修复 Flutter 抽屉项目

Question

我试图让页脚小部件与抽屉底部对齐，但抽屉标题和抽屉顶部的列表仍然不起作用。这就是我正在尝试的：

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

图像：画

绿色容器（buildfooter）应该与抽屉底部对齐，我该如何解决这个问题？请帮我找到解决方案

Answer 1

使用 Expanded -> SingleChildScrollView 包裹 buildMenuItem，如下所示。

       Column(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            buildHeader(context),
            Expanded(
                child: SingleChildScrollView(child: buildMenuItem(context))),
            buildFooter(context),
          ],
        )