Since the Listview.builder widget in flutter requires a height, some fixed heights I give to the container wrapping the widget causes to overflow

Question

Code

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text('Search Families'),
          centerTitle: true,
        ),
        backgroundColor: StaticEntry.backColor,
        body: Center(
          child: FractionallySizedBox(
            widthFactor: 0.8,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SearchInput(onSubmitHandler: onSubmit),
                SizedBox(
                  height: 300,
                ),
                resultList.isNotEmpty
                    ? Container(                    // <---------------- Container that I am using to wrap the list view widget
                        height: 400,                // <---------------- fixed height I am setting on the container that is wrapped around the ListView widget
                        child: ListView.builder(    // <---------------- ListView widget
                          itemCount: 20,
                          itemBuilder: (context, index) {
                            return Text('Heyyyy!');
                          },
                        ),
                      )
                    : SizedBox()
              ],
            ),
          ),
        ),
      ),
    );
  }

Problem

In the above code, as I have pointed using arrows, I am wrapping a ListView widget in a Container and assigning a fixed height to that Container since ListView widgets has an infinite height by default.
The problem with this approach is, since that height I am providing to the container is a fixed height, the layout breaks on devices with small viewport heights, while it works fine with devices that has a large viewport height.
So what I am trying to figure out is, how can I set a height to that Container that works on all devices without breaking the layout? (I am trying to make that height as maximum as possible without making the app break on smaller devices.)

(While researching about this, I came across this stack overflow link and according to that link, I tried wrapping the ListView widget with a Flexible widget and set the shrinkWrap property of the ListView widget to true. This did not work and it caused my ListView widget and the other widget to gain as much space as possible between them and pushed my ListView widget to the bottom of the screen.)

Since the `ListView` is a `Column` child, why don't you just wrap your `ListView` with `Expanded` widget? Wouldn't that do what you want ? — esentis, Sep 19 '21 at 19:10
@esentis Your solution worked fine perfectly. One thing I would like to clarify from your answer is you mentioned `Since the ListView is a Column child`. Here I do not understand how `ListView` being a Column child becomes related to us wrapping it with an `Exapanded` widget? What does the `ListView` being a Column child has to do with it? (Thanks in advance) — gfit21x, Sep 19 '21 at 19:17
It doesn't has to do with `ListView` specifically, in general as per documentation `Expanded` is a widget that expands a child of a Row, Column, or Flex so that the child fills the available space. — esentis, Sep 19 '21 at 19:19

score 1 · Answer 1 · answered Mar 02 '23 at 12:56

Wrap the your listview.builder in expanded then problem resolved

 Expanded(
                child: ListView.builder(
                  itemCount: 20,
                  itemBuilder: (context, index) {
                    return Text('Heyyyy!');
                  },
                ),
              ),

Since the Listview.builder widget in flutter requires a height, some fixed heights I give to the container wrapping the widget causes to overflow

Code

Problem

1 Answers1