Flutter - How to solve error "Horizontal viewport was given unbounded heightʺ

In flutter development, Maybe you've seen this type of error "Horizontal viewport was given unbounded height". What is the reason behind that you got this error because you have added the ListView or GridView inside the Column without giving proper constraint. So ln this post I will give you solution, How to solve this type of error quickly.

Error :

======== Exception caught by rendering library =====================================================
The following assertion was thrown during performResize():
Horizontal viewport was given unbounded height.

Viewports expand in the cross axis to fill their container and constrain their children to match their extent in the cross axis. In this case, a horizontal viewport was given an unlimited amount of vertical space in which to expand.
The relevant error-causing widget was: 

Let's see all possible solutions one by one of Horizontal viewport was given unbounded height error.

Let's see all possible solutions one by one of Horizontal viewport was given unbounded height error.

Solutions :


1. Using Expanded Widget:

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"),
                  ],
                ),
              )
            ],
          )

 

2. Using Container Widget:

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"),

                  ],
                ),
              )
            ],
          )

 

3. Using SizedBox Widget:

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"),

                  ],
                ),
              )
            ],
          )

 

We can quickly solve "Horizontal viewport was given unbounded height" above way. I hope this post will help you.

Tags: