How to take available space using container in Flutter

Question

I was trying to make an app with SingleChildScrollView and ListView using below code

SingleChildScrollView(
          child: Column(
            children: [
              maintile(),
              Container(
                padding: EdgeInsets.all(15.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  primary: false,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return listitem();
                  },
                ),
              ),
            ],
          ),

but the listview holding container does not take available space If I provide Expandable around it. is there any way to achieve Container take available space?

you should set size for Column and wrap ListView inside Expanded — darkness, Oct 08 '20 at 03:45
how to know the full screen height of the device and put it to column? — Jacob George, Oct 08 '20 at 04:42
MediaQuery.of(context).size gives you the device screen size. — Afridi Kayal, Oct 08 '20 at 05:25
when removing shrinkwrap: true, cause exception - RenderFlex children have non-zero flex but incoming height constraints are unbounded. I/flutter (22807): When a column is in a parent that does not provide a finite height constraint, for example if it is I/flutter (22807): in a vertical scrollable, it will try to shrink-wrap its children along the vertical axis — Jacob George, Oct 08 '20 at 06:59
Is it possible that you show what are you trying to accomplish? — Maz341, Oct 08 '20 at 07:06
Thanks for the MailTile(), how about you post your listItem() too so i can write the code for you — Maz341, Oct 08 '20 at 07:08
I am not a native english speaker. So sorry for my english. I want a scrolling list with listview just shown like above. — Jacob George, Oct 08 '20 at 07:09
1 minute. What is happening actually, my scaffold have different color so if listview container dont take whole space left. scaffold color will be shown. — Jacob George, Oct 08 '20 at 07:14
in ItemBuilder Inside your Listview i want to see the method listitem(); — Maz341, Oct 08 '20 at 07:15

score 1 · Answer 1 · answered Oct 08 '20 at 12:34

1

Use Expanded for Container parent like this :

Expanded(
      child: Container(
        child: Text("YOUR_WIDGET"),
      ),
    )

answered Oct 08 '20 at 12:34

Milad jalali

622
9
10

score 0 · Answer 2 · answered Oct 08 '20 at 07:30

0

Final Code:

final screenSize = MediaQuery.of(context).size;
return SafeArea(
  child: Scaffold(
      body: Container(
        height: screenSize.height,
        width: screenSize.width,
        child: Column(
          children: [
            maintile(),
            Expanded(
              child: Container(
                padding: EdgeInsets.all(15.0),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.only(
                    topRight: Radius.circular(75.0),
                  ),
                ),
                child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.vertical,
                  itemCount: items.length,
                  itemBuilder: (context, index) {
                    return listitem();
                  },
                ),
              ),
            ),
          ],
        ),
      )
  ),
);

answered Oct 08 '20 at 07:30

Maz341

2,232
15
20

if screenSize won't work then remove height : screenSize.height to double.infinity and same for width – Maz341 Oct 08 '20 at 07:31
this is not what I want. I want to scroll everything including listview, that's I include SingleChildScrollView – Jacob George Oct 08 '20 at 07:55
Then your root would be first SingleChildScrollView then Container – Maz341 Oct 08 '20 at 08:03
I mean when I scroll main tile and listview both scrolls, that's why I disabled ListView scrolling. – Jacob George Oct 08 '20 at 08:28
Have you tried wrapping the `ListView` inside an `Expanded`? & removing the one around the parent `Container`. That's what I always do to make my ListView fill the space. – mrj Oct 08 '20 at 13:10
I want the container, Expanded working only inside of Column/Row? – Jacob George Oct 08 '20 at 14:47

How to take available space using container in Flutter

2 Answers2