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
Error
Failed assertion: line 2817 pos 12: '!_needsLayout'
Error
Failed assertion: line 1979 pos 12: 'hasSize'
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
CodePudding user response：
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
CodePudding user response：
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
),