Flutter: Navigation drawer with expansion tile

user_8993706 0
Viewed 3773

I`m trying to build a navigation drawer with expansion tile, when i click on the header it collapse and vice versa but when i set the the drawer header as a child of ExpansionTile, original header padding is lost

enter image description here

 Widget _buildDrawer() {
return Drawer(
    child: ExpansionTile(
  title: UserAccountsDrawerHeader(
    decoration: BoxDecoration(color: Colors.deepPurple),
    accountName: Text("Mohamed Ali"),
    accountEmail: Text("mohamed.ali6996@hotmail.com"),
    currentAccountPicture: CircleAvatar(
      child: Text("M"),
      backgroundColor: Colors.white,
    ),
  ),
  children: <Widget>[
    ListTile(
      title: Text("page one"),
      trailing: Icon(Icons.android),
      onTap: () => _onSelectedItem(0),
    ),
    ListTile(
      title: Text("page two"),
      trailing: Icon(Icons.accessible),
      onTap: () => _onSelectedItem(1),
    ),
    Divider(),
    ListTile(
      title: Text("Log out"),
      trailing: Icon(Icons.exit_to_app),
    ),
  ],
  initiallyExpanded: false,
)

); }

flutter-layout flutter
1 Answers

The problem is that the header takes the place of the first tile in the ExpansionTile.

One possible solution is to use a Stack and tweak the content with an Align so the expansion icon is at the bottom of the header.

Changing the color of the expanding icon may not work for you. There is a reported issue here for which I have already submitted a PR here. Don't know when it will land in master.

_buildDrawer(BuildContext context) {
  ThemeData theme = Theme.of(context);
  return Drawer(
    child: Stack(
      children: <Widget>[
        UserAccountsDrawerHeader(
          decoration: BoxDecoration(color: Colors.indigo),
        ),
        Positioned(
          top: 120.0,
          left: 0.0,
          right: 0.0,
          child: Theme(
            data: theme.copyWith(
              textTheme: theme.textTheme.copyWith(
                subhead: theme.textTheme.subhead.copyWith(
                  color: Colors.grey,
                ),
              ),
              accentColor: Colors.white,
              unselectedWidgetColor: Colors.grey,
              iconTheme: theme.iconTheme.copyWith(color: Colors.white),
              dividerColor: Colors.transparent,
            ),
            child: ExpansionTile(
              title: Align(
                heightFactor: 0.4,
                alignment: Alignment.bottomCenter,
                child: UserAccountsDrawerHeader(
                  decoration: BoxDecoration(color: Colors.transparent),
                  accountName: Text("Mohamed Ali"),
                  accountEmail: Text("mohamed.ali6996@hotmail.com"),
                  currentAccountPicture: CircleAvatar(
                    child: Text("M"),
                    backgroundColor: Colors.white,
                  ),
                ),
              ),
              children: <Widget>[
                ListTile(
                  title: Text("page one"),
                  trailing: Icon(Icons.android),
                  onTap: () => {},
                ),
                ListTile(
                  title: Text("page two"),
                  trailing: Icon(Icons.accessible),
                  onTap: () => {},
                ),
                Container(
                  height: 1.0,
                  color: Color(0xFFDDDDDD),
                ),
                ListTile(
                  title: Text("Log out"),
                  trailing: Icon(Icons.exit_to_app),
                ),
              ],
              initiallyExpanded: false,
            ),
          ),
        ),
      ],
    ),
  )
}
user_24981790
Related