Flutter Question posted in
The official Flutter documentation can be found here.

fix Flutter drawer items

I’m trying to have a footer Widget align to the bottom of the Drawer but still not working Drawer Header and a list at the top of the Drawer. Here’s what I’m trying:

//drawer class 
 class _NavigationDrawer extends State<NavigationDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            buildHeader(context),
            buildMenuItem(context),
            buildFooter(context),
          ],
        ),
      ),
    );
  }

//header function
 Widget buildHeader(BuildContext context) => Material(
        color: Colors.white,
        child: InkWell(
          onTap: () {},
          child: Container(
            padding: EdgeInsets.only(
              top: MediaQuery.of(context).padding.top + 24,
              bottom: 24,
            ),
            child: Column(
              children: [
                Center(
                  child: Image.asset(
                    'assets/img/logo.png',
                    width: MediaQuery.of(context).size.width * 0.5,
                    height: MediaQuery.of(context).size.width * 0.2,
                  ),
                )
              ],
            ),
          ),
        ),
      );

//body function
Widget buildMenuItem(BuildContext context) => Container(
        padding: EdgeInsets.all(24),
        color: Colors.red,
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.home),
              title: Text('Home'),
              onTap: () {
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                  //push
                  builder: (context) => HomeScreen(),
                ));
              },
            ),
            ListTile(
              leading: Icon(Icons.person_2),
              title: Text('Profile'),
              onTap: () {},
            ),
            ListTile(
              leading: Icon(Icons.home_work_rounded),
              title: Text('Exwor'),
              onTap: () {},
            ),
            // const Divider(color: Colors.black),
            ListTile(
              leading: Icon(Icons.help),
              title: Text('help'),
              onTap: () {},
            ),
            ListTile(
              title: Text(
                "Logout",
              ),
              leading: Icon(
                Icons.logout_outlined,
              ),
              onTap: () {},
            ),
          ],
        ),
      );

//footer function
Widget buildFooter(BuildContext context) => Container(
        color: Colors.green,
        alignment: Alignment.bottomCenter,
        // margin: EdgeInsets.only(top: 100),
        child: Align(
            alignment: FractionalOffset.bottomCenter,
            child: Column(
              children: <Widget>[
                Text("Developed by .."),
                Text(
                  "Version 1.0.0",
                  style: TextStyle(
                      fontSize: 11,
                      color: Colors.black,
                      fontWeight: FontWeight.bold),
                )
              ],
            )),
      );

image : DRAWE

the green container (buildfooter) should be aligned to the bottom of the drawer,how can i fix that?please help me to find solution

Tags:

2

Answers


  1. 0

    Wrap buildMenuItem with Expanded -> SingleChildScrollView like below.

           Drawer(
          backgroundColor: Colors.white,
          child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            buildHeader(context),
            Expanded(
            child: SingleChildScrollView(child: buildMenuItem(context))),
            buildFooter(context),
          ],
        ))
    Login or Signup to reply.
  2. 0

    The SingleChildScrollView you use in the drawer is causing this.You may try remove it and write the drawer widget like this.

    class _NavigationDrawer extends State<NavigationDrawer> {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      backgroundColor: Colors.white,
      //remove SingleChildScrollView
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          buildHeader(context),
          Expanded(child: buildMenuItem(context)), // This will take remaining space
          buildFooter(context),
        ],
      ),
    );
  }
}

    if its still not look like you want , you may try add to column

    mainAxisAlignment: MainAxisAlignment.spaceBetween,

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search