Vertical viewport was given unbounded height using Single-Child-Scroll-View

Question

When try to wrap "list view builder" with single-child-scroll-view it shows the given error.

Error : Vertical viewport was given unbounded height.

Also if I try to give a specific height of the list view wrapping with a container the single child scroll view doesn't work. It gives the same error. May be there are some faults in this code

Code :

          return ListView.builder(
              scrollDirection: Axis.vertical,
              itemCount: dailyUpdate!.forecast!.forecastday!.length,
              itemBuilder: (context, index) {
                return Card(
                  elevation: 3,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  color: Color.fromARGB(255, 65, 65, 64),
                  child: Padding(
                    padding:
                        const EdgeInsets.symmetric(vertical: 10, horizontal: 5),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        Container(
                          width: 50,
                          child: Image.network(
                            'https:' +
                                dailyUpdate!.forecast!.forecastday![index].day!
                                    .condition!.icon
                                    .toString(),
                            width: 50,
                          ),
                        ),
                        Container(
                          width: 85,
                          child: customText(
                              DateFormat('EEE, MMMM d').format(DateTime.parse(
                                  dailyUpdate.forecast!.forecastday![index].date
                                      .toString())),
                              color: Colors.white),
                        ),
                        Container(
                          width: 120,
                          child: customText(
                              dailyUpdate.forecast!.forecastday![index].day!
                                  .condition!.text
                                  .toString(),
                              color: Colors.white),
                        ),
                        Container(
                          width: 60,
                          child: customText(
                              dailyUpdate.forecast!.forecastday![index].day!
                                      .maxtempC!
                                      .round()
                                      .toString() +
                                  ' / ' +
                                  dailyUpdate.forecast!.forecastday![index].day!
                                      .mintempC!
                                      .round()
                                      .toString(),
                              color: Colors.white),
                        ),
                      ],
                    ),
                  ),
                );
              });

Niko · Answer 1 · 2023-07-03T01:25:05.567

the problem here is that the SingleChildScrollView provides unbound constraints in it's main axis. Therefor it's child has infinite space available to size itself, but the ListView will by default expand to the available space which is now not possible(can't expand to infinite space).

Giving the ListView an explicit height (for example by wrapping it with a Container as you said, or using shrinkWrap) removes the Error. Where exactly did you put your Container?

Your best Solution would be to just remove the SingleChildScrollView completely, because it is unnecessary. The ListView already is scrollable on its own. If you want to control the scroll behaviour like for example making the scrollbar always visible, consider wrapping the ListView with a Scrollbar widget.

return Scrollbar(
  thumbVisibility: true,
  child: ListView.builder(
    padding: const EdgeInsets.all(8),
    itemCount: 100,
    itemBuilder: (BuildContext context, int index) => Container(height: 50, color: Colors.blue[(index % 9) * 100]),
  ),
);

Vertical viewport was given unbounded height using Single-Child-Scroll-View

1 Answers1