Flutter - Drawer with Expanded and ListView scroll not working

Question

I'm trying to make the question simple. I need to make a Drawer, It gives me below error:

RenderFlex children have non-zero flex but incoming height constraints are unbounded

I want the drawer to have 3 sections:

|--------------------------------|
|                                |
|           DrawerHeader         |
|                                |
|--------------------------------|
|--------------------------------|
|                                |
|         Scrollable Area        |
|                                |
|           ListItem1            |
|           ListItem2            |
|           ListItem3            |
|                                |
|                                |
|--------------------------------|
|--------------------------------|
|                                |
|        Copyright Section       |
|                                |
|--------------------------------|

Drawer(
  child : Column(
      children: [
        DrawerHeader(
          padding: const ..,
          child: ....,
        ),//DrawerHeader
        Expanded(
          child: ListView(
            children: const [
              ListTile(
                leading: ...,
                title: ...,
              ),//ListTile
              ExpansionTile(
                title: ...,
                children: <Widget>[
                  ListTile(
                    leading: ...,
                    title: ...,
                  ),//ListTile
                  ListTile(
                    leading: ...,
                    title: ...,
                  ),//ListTile
                  ...
                ], //<Widget>
              ),//ExpansionTile
              
              Divider(thickness: 1),
              
            ],//children
          ),//ListView
        ),//Expanded
        const SizedBox(height: kSpacing * 2),
        const Text("Copyright. All Rights Reserved"),
        const SizedBox(height: kSpacing),
      ],//children
    ),//Column
);//Drawer

I've tried more that 8 solution that came up from 4 days searching. here are some examples

Solution 1:

Error

Failed assertion: line 2817 pos 12: '!_needsLayout'

Solution 2:

Error

Failed assertion: line 1979 pos 12: 'hasSize'

Solution 3:

Error

RenderFlex children have non-zero flex but incoming height constraints are unbounded

And tried removing Expanded, use SingleChildScrollView but still doesn't work for me

It would be easier if you could provide child instead of `....,` that will reproduce the issue — Md. Yeasin Sheikh, Aug 13 '22 at 08:59
And everything is working fine from provided snippet structure — Md. Yeasin Sheikh, Aug 13 '22 at 09:05

score 1 · Accepted Answer · answered Aug 13 '22 at 09:02

Add a SizedBox of specific height to give bound for the column that will define a bound for the expanded widget too

Drawer(
  child : SizedBox(//<---here
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width*0.5,
   child : Column(
      children: [
        DrawerHeader(
          padding: const ..,
          child: ....,
        ),//DrawerHeader
        Expanded(
          child: ListView(
            children: const [
              ListTile(
                leading: ...,
                title: ...,
              ),//ListTile
              ExpansionTile(
                title: ...,
                children: <Widget>[
                  ListTile(
                    leading: ...,
                    title: ...,
                  ),//ListTile
                  ListTile(
                    leading: ...,
                    title: ...,
                  ),//ListTile
                  ...
                ], //<Widget>
              ),//ExpansionTile
              
              Divider(thickness: 1),
              
            ],//children
          ),//ListView
        ),//Expanded
        const SizedBox(height: kSpacing * 2),
        const Text("Copyright. All Rights Reserved"),
        const SizedBox(height: kSpacing),
      ],//children
    ),//Column
  ),//SizedBox
);//Drawer

score 0 · Answer 2 · answered Aug 13 '22 at 09:32

Try this it's working well https://prnt.sc/JX49BJc8dyvL

Drawer(
    child : Column(
      children: [
        DrawerHeader(
          child: Container(color: Colors.black),
        ),//DrawerHeader
        Expanded(
            child: ListView(
              children: [
                ListTile(
                    leading: CircleAvatar(
                      backgroundColor: Colors.red,
                    ),
                    title: Text('Red')),
                ExpansionTile(
                  title: Text(
                    "items.playerName",
                    style: TextStyle(fontSize: 16.0, fontWeight: FontWeight.w500),
                  ),
                  children: <Widget>[
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    ),
                    ListTile(
                      title: Text(
                        "items.description",
                        style: TextStyle(fontWeight: FontWeight.w700),
                      ),
                    )
                  ],
                ),
                Divider(thickness: 1),
              ],)),
        const SizedBox(height: 10 * 2),
        const Text("Copyright. All Rights Reserved"),
        const SizedBox(height: 10),
      ],//children
    ),//Column
  ),

I've tried this but gave me `Vertical viewport was given unbounded height.` — Poula Adel, Aug 13 '22 at 16:10

score 0 · Answer 3 · answered Aug 16 '22 at 19:59

after a lot of search and trying different structures. Probably you are using desktop flutter as me.

this Link offers a simple solution when it comes to error

scrollcontroller attached to multiple scroll views

when you use the structre Drawer -> Expanded -> ListView -> ExpansionTile

Explaination:

It happens because of how ScrollViews treat default (null) primary on them. It defaults to true if direction is vertical and there is no scroll controller. Because of that, all your vertical scroll views' scrollbars attach to the PrimaryScrollController, and that is why this error occurs

Solution:

mark appropriate ScrollViews with primary: false, so that you are left with no more than one primary ScrollView

Flutter - Drawer with Expanded and ListView scroll not working

3 Answers3