在抽屉底部对齐抽屉列表磁贴答案

【问题标题】：Align drawer list tile at the bottom of the drawer在抽屉底部对齐抽屉列表磁贴
【发布时间】：2021-08-09 04:58:13
【问题描述】：

我为我的应用程序创建了一个抽屉。它工作正常，但我无法将注销按钮对齐到抽屉的底部。我尝试了对齐小部件，它不起作用。尝试在扩展小部件中对齐小部件，仍然没用。几乎尝试了我能找到的所有东西。不知道为什么它不会对齐。请帮忙。

 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();
                },
              ),
            ),
      ],
    ),

【问题讨论】：

标签： flutter dart navigation-drawer

【解决方案1】：

参考下面的代码希望对你有帮助。

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: () {},
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

你的抽屉看起来像这样->

【讨论】：

最欢迎@KavishkaRajapakshe

【解决方案2】：

drawer: Drawer(
    child: ListView(
      children: <Widget>[
        DrawerHeader(
          child: Align(
            alignment: Alignment.topLeft,
            child: Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                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();
          },
        ),
        //code change and use Divider widget for gap/space bw widgets rather than Container
        Expanded(
         child: Container(
          width: MediaQuery.of(context).size.width,
          color: Colors.tealAccent,
         )
        ),
        ListTile(
                title: Text("Log Out",style:TextStyle(fontWeight: FontWeight.bold),),
                trailing: Icon(Icons.logout),
                onTap: () {
                  context.read<NavCubit>().showContracts();
                },
              ),
      ],
    ),

【讨论】：