ListView inside column does not expanded correctly

Question

My window widget:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          globals.strings["add_event_title"],
          style: TextStyle(
            fontSize: 18,
            color: AppTheme.darkText,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      body: Column(
        children: [
          Expanded(
            child: Align(
              alignment: FractionalOffset.topLeft,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: AddEventWidget.withData(
                  categories: widget.categories,
                  geojson: widget.geojson,
                  address: widget.address,
                ),
              ),
            ),
          ),
          Expanded(
            child: Align(
              alignment: FractionalOffset.bottomCenter,
              child: Row(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 2 - 16,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: () => {},
                        padding: EdgeInsets.all(12.0),
                        color: AppTheme.buttonConfirm,
                        child: Text(
                          globals.strings["add_event_button_confirm"],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                  Spacer(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: SizedBox(
                      width: MediaQuery.of(context).size.width / 2 - 16,
                      child: RaisedButton(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                        onPressed: () => Navigator.of(context).pop(),
                        padding: EdgeInsets.all(12.0),
                        color: AppTheme.buttonCancel,
                        child: Text(
                          globals.strings["add_event_button_cancel"],
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  )
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

AddEventWidget is actually ListBox to get conent scrollable if there's no room to show all controls. For testing, it's currently filled with Text widgets:

Widget build(BuildContext context) {
    return ListView(
      children: [
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),
        Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"),

      ],
    );
  }

As a result, I'm indeed getting scrollable ListView, but with I want it to fit to remaining space (bottom buttons should not be scrollable, they need to be displayed at the bottom always). Current result:

Any ideas how to get the effect I need? Why my ListView is not expanded to fit remaining space without overlap bottom buttons?

Answer 1

This is correctly rendered by flutter the problem is on your end. You are using two expanded widgets inside a Column due to the screen space available is divided into two equal parts.

This leads to the first expanded widget to have half the size of the available column and hence the ListView reaches the max expend till the middle of the screen.

Two fix this and make ListView take up all the available space you can remove expanded widget from the second child i.e. the Row. And then in the ListView property shrinkWrap set it to true.

Code snippet here

@override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "add_event_title",
          style: TextStyle(
            fontSize: 18,
            color: Colors.blue,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Expanded(
            child: Align(
              alignment: FractionalOffset.topLeft,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child:ListView.builder(
                  itemBuilder: (BuildContext context,int index){
                    return Text("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa");
                  },
                  itemCount: 100,
                  shrinkWrap: true,
                ),
              ),
            ),
          ),
          Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => {},
                    padding: EdgeInsets.all(12.0),
                    color: Colors.green,
                    child: Text(
                      "confirm",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => Navigator.of(context).pop(),
                    padding: EdgeInsets.all(12.0),
                    color: Colors.black45,
                    child: Text("cancel",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }

Answer 2

Just remove Expanded from second child of the column, like this:

 Align(
          alignment: FractionalOffset.bottomCenter,
          child: Row(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => {},
                    padding: EdgeInsets.all(12.0),
                    child: Text(
                      'globals.strings["add_event_button_confirm"]',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              Spacer(),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: SizedBox(
                  width: MediaQuery.of(context).size.width / 2 - 16,
                  child: RaisedButton(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(24.0)),
                    onPressed: () => Navigator.of(context).pop(),
                    padding: EdgeInsets.all(12.0),
                    child: Text(
                      'globals.strings["add_event_button_cancel"]',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),