Align drawer list tile at the bottom of the drawer

Question

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->

Comments

[Ravindra S. Patil]

Most Welcome @KavishkaRajapakshe