DrawerLayout: How to make this Custom Layout in flutter - flutter

Question

I have a drawer in which I want to achieve layout posted in the below screenshot.
AllTasks, Today, Complete and Incomplete with numbers are fixed. The user cannot add these. Already added by me. CreateList and Settings as well.
MyList which is added by the user and he can add more like Food, Sports, Reading etc.
Divider as well, maybe after 1 row or 3 rows to show as groups.
Should I use ListView?. Any suggestion, please.

Answer 1

You have a couple of methods to do that the first one using ListView like that:
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Widget'),
accountEmail: const Text('test.widget#example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView(
padding: const EdgeInsets.only(top: 8.0),
children: <Widget>[
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: _drawerContents.map((String id) {
return new ListTile(
leading: new CircleAvatar(child: new Text(id)),
title: new Text('Drawer item $id'),
);
}).toList(),
),
// The drawer's "details" view.
new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new ListTile(
leading: const Icon(Icons.add),
title: const Text('Add account'),
),
new ListTile(
leading: const Icon(Icons.settings),
title: const Text('Manage accounts'),
),
],
),
],
),
),
],
),
)
But it is efficient only with a limited number of list item because all the item of that ListView are rendered at once.
The other way to do that is using a ListView.builder like that:
drawer: new Drawer(
child: new Column(
children: <Widget>[
new UserAccountsDrawerHeader(
accountName: const Text('Test Test'),
accountEmail: const Text('test#example.com'),
margin: EdgeInsets.zero,
onDetailsPressed: () {},
),
new Expanded(
child: new ListView.builder(
itemBuilder: (BuildContext context, int index) =>
new EntryItem(data[index]),
itemCount: data.length,
),
),
],
),
),
In that way your list elements will be rendered one by one during scrolling. You should create one model for both your hardcoded elements and your variable elements and then create a different ListTile (in the example EntryItem).
Let me know if you need more details.
PS. EntryItem example below:
class EntryItem extends StatelessWidget {
const EntryItem(this.entry);
final Entry entry;
Widget _buildTiles(Entry root) {
if(root.counter != null) {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
trailing: new Text(root.counter)
);
} else {
return new ListTile(
leading: Icon(root.icon),
title: Text(root.title),
);
}
}
#override
Widget build(BuildContext context) {
return _buildTiles(entry);
}
}