how to takes a entire available space in column in flutter

Question

I will explain with simple examble,

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Flexible(
                child: ListView(
                  shrinkWrap: true,
                  children: const [
              ListTile(
                leading: Icon(Icons.image),
                title: Text('with shrinkwrap is true'),
                trailing: Icon(Icons.delete_forever),
              ),
            ])),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

Here the green colored container is not filling the remaining space, so how to fill the remaining area? Thanks in advance

Answer 1

You can use SingleChildScrollView instead of using ListView with shrinkWrap: true.

class Demo1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            SingleChildScrollView(
              child: Column(
                children: const [
                  ListTile(
                    leading: Icon(Icons.image),
                    title: Text('with shrinkwrap is true'),
                    trailing: Icon(Icons.delete_forever),
                  ),
                ],
              ),
            ),
            Expanded(
                child: Container(
              color: Colors.green,
            )),
          ],
        ),
      ),
    );
  }
}

You may also like CustomScrollView over SingleChildScrollView and shrinkWrap:true.

Answer 2

Both Flexible and Expanded have flex value 1, so they both request 50% of the available space. So the Container child of Expanded takes fills only half space, while the ListView, a child of Flexible, also requests half the space but needs very little space.

You can make Container fill the available space by removing Flexible, so Expanded that wraps Container will get all the available space.

Answer 3

Try below code and just Remove your first Flexible Widget

Column(
  children: <Widget>[
    ListView(
      shrinkWrap: true,
      children: const [
        ListTile(
          leading: Icon(Icons.image),
          title: Text('with shrinkwrap is true'),
          trailing: Icon(Icons.delete_forever),
        ),
      ],
    ),
    Expanded(
      child: Container(
        color: Colors.green,
      ),
    ),
  ],
),