Home > Net >  Many "RenderBox was not laid out" for a Row in a Column
Many "RenderBox was not laid out" for a Row in a Column

Time:06-12

The many solutions that are already present for the same error do not seem to help in my case, thus the question.

I get a bunch of "RenderBox was not laid out" errors while my Scaffold body remains empty. The error occurs because of the Row widget in my Column widget. When removing the Row widget the error does not occur anymore.

I tried wrapping the Row widget in an Expanded as well as SizedBox or Flexible but none helped. I also tried the same with the parent Column widget even both at the same time with different combinations.

When looking at the Widget Details Tree in the Flutter Inspector the renderObject of the Padding at the top has size: MISSING but constraints are finite constraints: BoxConstraints(0.0<=w<=392.7, 0.0<=h<=413.8).

Same goes for the child Column widget with the following constraints: constraints: BoxConstraints(0.0.<=w<=340.7, 0.0<=h<=361.8).

The child Row widget then also has size: MISSING but constraints: BoxConstraints(0.0<=w<=340.7, 0.0<=h<=Infinity).

I thought that the child widgets inherit the constraints of the parent? And as I said wrapping the Row with Expanded, SizedBox or Flexbox did not help except I did it wrong.

I would be glad to get some answers and a solution. Thank you in advance!

The exact error messages can be found here: https://pastebin.com/n3RFbasT

My code:

class AddBalance extends StatefulWidget {
  const AddBalance({Key? key}) : super(key: key);

  @override
  State<AddBalance> createState() => _AddBalanceState();
}

class _AddBalanceState extends State<AddBalance> {
  final _formKey = GlobalKey<FormState>();

  bool subtractSwitch = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: const Text("Add Entry"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(26.0),
        child: Form(
          autovalidateMode: AutovalidateMode.always,
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                autofocus: true,
                maxLines: 1,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                  labelText: "Name",
                ),
              ),
              Row(
                children: [
                  TextFormField(
                    textInputAction: TextInputAction.next,
                    keyboardType: TextInputType.number,
                    maxLength: 10,
                    maxLines: 1,
                    decoration: const InputDecoration(
                      labelText: "Amount",
                    ),
                  ),
                  const Text("Subtract"),
                  Switch(
                      value: subtractSwitch,
                      onChanged: (value) {
                        setState(() {
                          subtractSwitch = value;
                        });
                      }),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response:

Just need to wrap your Row with any Widget that give you boundaries like Center, Align , SizedBox, etc.

In this case I used Align and ... don't forget to use Expanded over your TextFormField inside the Row.

Scaffold(
      appBar: AppBar(
        elevation: 0,
        title: const Text("Add Entry"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(26.0),
        child: Form(
          autovalidateMode: AutovalidateMode.always,
          key: _formKey,
          child: Column(
            children: <Widget>[
              TextFormField(
                autofocus: true,
                maxLines: 1,
                textInputAction: TextInputAction.next,
                decoration: const InputDecoration(
                  labelText: "Name",
                ),
              ),
              Align(
                child: Row(
                  children: [
                    Expanded(
                      child: TextFormField(
                        textInputAction: TextInputAction.next,
                        keyboardType: TextInputType.number,
                        maxLength: 10,
                        maxLines: 1,
                        decoration: const InputDecoration(
                          labelText: "Amount",
                        ),
                      ),
                    ),
                    const Text("Subtract"),
                    Switch(
                        value: subtractSwitch,
                        onChanged: (value) {
                          setState(() {
                            subtractSwitch = value;
                          });
                        }),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    )
  • Related