How to use Expansion Tile with ListView inside Column in Flutter

user_9658325 0
Viewed 3055

I am trying to create a custom drawer.

I want to make DrawerHeader fixed. However, I want ExpansionTile and ListView scrollable.

https://imgur.com/a/lWeDWOO ,

https://imgur.com/a/tR68ECK

 class _NavigationDrawerState extends State<NavigationDrawer> {


  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          DrawerHeader(
            child: Column(....),
          ExpansionTile(
            title: Text('Roles'),
            children: [
              ListView.builder(
                itemBuilder: _buildRolesList,
                itemCount: roles.length,
                shrinkWrap: true,
              )
            ],
          ),
          ListView.builder(
            shrinkWrap: true,
            itemBuilder: _buildList,
            itemCount: myList.length,
          ),
        ],
      ),
    );
  }

  Widget _buildList(BuildContext context, int index) {
    return ListTile(
      leading: Icon(icons[myList[index].toLowerCase()]),
      title: Text(myList[index]),
    );
  }

  Widget _buildRolesList(BuildContext context, int index) {
    return ListTile(
      dense: true,
      title: Text(roles[index]),
      onTap: () {},
    );
  }


}
flutter-layout flutter
1 Answers

Try this:

class _NavigationDrawerState extends State<NavigationDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: <Widget>[
          ExpansionTile(
            title: Text('Roles'),
            children: [
              SizedBox(
                height: MediaQuery.of(context).size.height - 100,
                child: ListView.builder(
                  itemBuilder: _buildRolesList,
                  itemCount: roles.length,
                  shrinkWrap: true,
                ),
              )
            ],
          ),
          Expanded(
            child: ListView.builder(
              shrinkWrap: true,
              itemBuilder: _buildList,
              itemCount: myList.length,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildList(BuildContext context, int index) {
    return ListTile(
      leading: Icon(icons[myList[index].toLowerCase()]),
      title: Text(myList[index]),
    );
  }

  Widget _buildRolesList(BuildContext context, int index) {
    return ListTile(
      dense: true,
      title: Text(roles[index]),
      onTap: () {},
    );
}
user_66186220
Related