Question 77948 in Flutter Question posted in
The official Flutter documentation can be found here.

how to takes a entire available space in column in flutter

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

Tags:

3

Answers


  1. 0

    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,
      ),
    ),
  ],
),
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search