Flutter - How solve "RenderBox was not laid out" error

During flutter development, Maybe you've seen this type of error "RenderBox was not laid out". What is the reason behind that you got this error because you have added one scrollable widget directly inside another scrollable widget. Like GridView, ListView, directly inside the Row, or Column. So ln this post I will give you the solution, How to solve this type of error quickly.

Error :

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: RenderMouseRegion#5759a relayoutBoundary=up3 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1979 pos 12: 'hasSize'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

 

Let's see all possible solutions one by one of HRenderBox was not laid out error.

Solutions :

1. Using Container Widget with Column :

We need to give height to Container, you can see the below example.

Column(
            children: [
              Container(
                height: 100,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Text("Errorgram"),
                    SizedBox(
                      width: 10,
                    ),
                    Text("Errorgram"),

                  ],
                ),
              )
            ],
          )

 

2. Using Expanded Widget with Column :

We need to wrap ListView by Expanded, You can see the below example.

Column(
            children: [
              Expanded(
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Text("Errorgram"),
                    SizedBox(
                      width: 10,
                    ),
                    Text("Errorgram"),
                  ],
                ),
              )
            ],
          )

 

3. Using SizedBox Widget with Column :

We need to give height to SizedBox, you can see the below example.

Column(
            children: [
              SizedBox(
                height: 100,
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: [
                    Text("Errorgram"),
                    SizedBox(
                      width: 10,
                    ),
                    Text("Errorgram"),

                  ],
                ),
              )
            ],
          )

 

Using Expanded Widget with Row :

If the error is getting by TextField  inside Row widget, then wrap your TextField() like the below  example:

Row(
          children: [
            Expanded(
                child: TextField(
              decoration: InputDecoration(
                hintStyle: TextStyle(fontSize: 18),
                hintText: 'Name',
                contentPadding: EdgeInsets.all(20),
              ),
            ))
          ],
        )

 

If the error is getting by TextFormField inside Row widget, then wrap your TextFormField () like the below  example:

Row(
          children: [
            Expanded(
                child: TextFormField(
              decoration: InputDecoration(
                hintStyle: TextStyle(fontSize: 18),
                hintText: 'Name',
                contentPadding: EdgeInsets.all(20),
              ),
            ))
          ],
        )

 

We can quickly solve "RenderBox was not laid out" error above way. I hope this post will help you.

Tags: