Logout in bottom drawer navigation flutter

3,371

You can change the ListView to a Column then add a Expanded widget with a child Container

Drawer(
        child: Column( // Changed this to a Column from a ListView
          children: <Widget>[
            _createHeader(),
            ListTile(title: Text('First item')),
            Expanded(child: Container()), // Add this to force the bottom items to the lowest point
            Column(
              children: <Widget>[
                _createFooterItem(
                    icon: Icons.event,
                    text: 'Settings',
                    onTap: () => Navigator.pushReplacementNamed(context, '/')),
                _createFooterItem(
                    icon: Icons.event,
                    text: 'Logout',
                    onTap: () => Navigator.pushReplacementNamed(context, '/'))
              ],
            ),
          ],
        ),
      );
Share:
3,371
Ray Coder
Author by

Ray Coder

Be yourself but dont be selfish

Updated on December 18, 2022

Comments

  • Ray Coder
    Ray Coder over 1 year

    I want to make logout and settings in bottom of drawer navigation but I have tried many suggestion but doesn't work at all any suggestion?

    This is my drawer navigation

    Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              _createHeader(),
              _createDrawerItem(icon: Icons.event, text: 'Event', onTap: () => Navigator.pushReplacementNamed(context, Routes.event)
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: <Widget>[
                  _createFooterItem(icon: Icons.event, text: 'Settings', onTap: () => Navigator.pushReplacementNamed(context, Routes.event)),
                  _createFooterItem(icon: Icons.event, text: 'Logout', onTap: () => Navigator.pushReplacementNamed(context, Routes.event))
                ],
              ),
            ],
          ),
        );
    

    this is my widget for header

    Widget _createHeader() {
        return DrawerHeader(
            margin: EdgeInsets.zero,
            padding: EdgeInsets.zero,
            decoration: BoxDecoration(
                image: DecorationImage(
                    fit: BoxFit.fill,
                    image: AssetImage('res/images/drawer_header_background.png'))),
            child: Stack(children: <Widget>[
              Positioned(
                  bottom: 12.0,
                  left: 16.0,
                  child: Text("Flutter Step-by-Step",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20.0,
                          fontWeight: FontWeight.w500))),
            ]));
      }
    

    and this is my widget for footer item

    Widget _createFooterItem({IconData icon, String text, GestureTapCallback onTap}){
        return ListTile(
          title: Row(
            children: <Widget>[
              Icon(icon),
              Padding(
                padding: EdgeInsets.only(left: 8.0),
                child: Text(text),
              )
            ],
          ),
          onTap: onTap,
        );
      }