ListView inside column does not expanded correctly

user_1209216 0
Viewed 185

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:

enter image description here

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

dart flutter scroll listview
2 Answers

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),
                    ),
                  ),
                ),
              )
            ],
          )
        ],
      ),
    );
  }
user_74037290

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),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
user_132122640
Related