Search code examples
flutterdartnavigation-drawer

Align drawer list tile at the bottom of the drawer


I've created a drawer for my app.It works fine but Im unable to align the logout button to the bottom of the drawer.Ive tried the align widget,it didnt work.Tried align widget inside an expanded widget,still didnt work.Almost tried everything that I could find.Dont know why it wont align.Please help.

 drawer: Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              child: Column(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.yellow,
                    child: const Text('USER'),
                    radius: 25,
                  ),
                  Text(name),
                  Text(email)
                ],
              ),
            ),
          ),
        ),
        ListTile(
          title: Text("Settings",style:TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(Icons.settings),
          onTap: () {
            context.read<NavCubit>().showHome();
            Navigator.pop(context);
          },
        ),
        Container(
          height: 1.0,
          width: MediaQuery.of(context).size.width,
          color: Colors.tealAccent,
        ),
        ListTile(
          title: Text("Learning",style:TextStyle(fontWeight: FontWeight.bold),),
          trailing: Icon(Icons.book),
          onTap: () {
            context.read<NavCubit>().showContracts();
          },
        ),
        Container(
          height: 1.0,
          width: MediaQuery.of(context).size.width,
          color: Colors.tealAccent,
        ),
             Align(
              alignment: Alignment.bottomCenter,
              child: ListTile(
                title: Text("Log Out",style:TextStyle(fontWeight: FontWeight.bold),),
                trailing: Icon(Icons.logout),
                onTap: () {
                  context.read<NavCubit>().showContracts();
                },
              ),
            ),
      ],
    ),

Solution

  • Refer below code hope it help to you.

    drawer: Container(
            width: 250,
            child: Drawer(
              //drawer Code
              child: Column(
                children: <Widget>[
                 
                  ListTile(
                    hoverColor: Colors.blue,
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    leading: Icon(
                      Icons.show_chart,
                      color: Colors.black,
                    ),
                    title: Text('All Leads'),
                    onTap: () {},
                  ),
                  Divider(
                    color: Colors.grey,
                  ),
                  ListTile(
                    hoverColor: Colors.blue,
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    leading: Icon(
                      Icons.bar_chart_rounded,
                      color: Colors.black,
                    ),
                    title: Text('Graphs'),
                    onTap: () { },
                  ),
                  Divider(
                    color: Colors.grey,
                  ),
                  ListTile(
                    hoverColor: Colors.blue,
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    leading: Icon(
                      Icons.group,
                      color: Colors.black,
                    ),
                    title: Text('Agents'),
                    onTap: () {},
                  ),
                  Divider(
                    color: Colors.grey,
                  ),
                  ListTile(
                    hoverColor: Colors.blue,
                    dense: true,
                    visualDensity: VisualDensity(vertical: -4),
                    leading: Icon(
                      Icons.book,
                      color: Colors.black,
                    ),
                    title: Text('About Us'),
                    onTap: () {},
                  ),
                  Divider(
                    color: Colors.grey,
                  ),
                  Expanded(
                    child: Align(
                      alignment: FractionalOffset.bottomCenter,
                      child: ListTile(
                        hoverColor: Colors.blue,
                        dense: true,
                        visualDensity: VisualDensity(vertical: -4),
                        leading: Icon(
                          Icons.logout,
                          color: Colors.black,
                        ),
                        title: Text('Logout'),
                        onTap: () {},
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
    

    Your Drawer Look like this->Your Drawer Look like this