How to expand a column in a list view to cover all remaining space of the screen in the navigation drawer

Question

Am building a navigation Drawer in flutter, with some items on top and some items on the bottom of the drawer. But in ListView, am unable to add Column widget on the bottom of the Drawer. I had even tried expanded, but that didn't resolved the problem.

Drawer(
      child: ListView(
        children: <Widget>[
          Container(
            margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
            padding: const EdgeInsets.only(bottom: 10),
            child: Stack(
              alignment: Alignment.topRight,
              children: <Widget>[
                Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      SizedBox(height: 30),
                      CircleAvatar(
                        radius: 45,
                        child: Text(
                          'AC',
                          style: TextStyle(fontSize: 40),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Divider(),
          Column(children: _drawerOptions),
          Expanded(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Text(
                  AppStrings.termsAndConditions,
                  style: TextStyle(
                    fontSize: 16.0,
                    color: Color.fromARGB(255, 39, 39, 39),
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );

That last widget Column wrapped with Expanded was to put that Column at bottom of the Drawer, but that's not happening.

Can anyone suggest any solution?

Answer 1

You should do it the other way, put ListView inside Column using Expanded , here is the full working code.

Drawer(
  child: Column(
    children: <Widget>[
      Container(
        margin: const EdgeInsets.only(top: 10, right: 10.0, left: 10.0),
        padding: const EdgeInsets.only(bottom: 10),
        child: Stack(
          alignment: Alignment.topRight,
          children: <Widget>[
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  SizedBox(height: 30),
                  CircleAvatar(
                    radius: 45,
                    child: Text(
                      'AC',
                      style: TextStyle(fontSize: 40),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      Divider(),
      Expanded(child: ListView(children: _drawerOptions)),
      Spacer(),
      Text("Terms and conditions"),
    ],
  ),
),