抽屉页脚项目

Question

我的抽屉有点小问题，我已经在堆栈上搜索了一个解决方案，并找到了一个解决方案，但在尝试之后，它对我不起作用！ :) 这个想法是，我想在抽屉里放一些物品，放在它的最后！ :)

Drawer(
    child: Container(
      decoration: BoxDecoration(color: Color(0xFF0098c2)),
      child: ListView(
        children: <Widget>[
          ListTile(
            title: Text(
              'Dealer',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.person,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => dealerBuilder()));
            },
          ),
          ListTile(
            title: Text(
              'Shuffler',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.shuffle,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => shufflerBuilder()));
            },
          ),
          ListTile(
            title: Text(
              'Mistakes',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.info_outline,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => mistakePage()));
            },
          ),
          ListTile(
            title: Text(
              'Important links',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.border_color,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => importantLinks()));
            },
          ),
          Container(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: Column(
                    children: <Widget>[
                      Divider(),
                      ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Facebook')),
                      ListTile(
                          leading: Icon(Icons.help),
                          title: Text('Instagram'))
                    ],
                  ))),
        ],
      ),
    ),
  ),

这就是我抽屉里的代码，到目前为止它是这样显示的！

Answer 1

您可以在下面复制粘贴运行完整代码
您可以将ListView 替换为Column 并将第一组包装为Expaned Column

 child: Column(
          children: <Widget>[
            Expanded(
              child: Column(children: <Widget>[
              ...
              Container(
                child: Align(

工作演示

完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        drawer: Drawer(
          child: Container(
            decoration: BoxDecoration(color: Color(0xFF0098c2)),
            child: Column(
              children: <Widget>[
                Expanded(
                  child: Column(children: <Widget>[
                    ListTile(
                      title: Text(
                        'Dealer',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                      leading: Icon(
                        Icons.person,
                        size: 20.0,
                        color: Colors.white,
                      ),
                      onTap: () {
                        /* Navigator.pop(context);
                      Navigator.of(context).push(new MaterialPageRoute(
                          builder: (context) => dealerBuilder()));*/
                      },
                    ),
                    ListTile(
                      title: Text(
                        'Shuffler',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                      leading: Icon(
                        Icons.shuffle,
                        size: 20.0,
                        color: Colors.white,
                      ),
                      onTap: () {
                        /*Navigator.pop(context);
                      Navigator.of(context).push(new MaterialPageRoute(
                          builder: (context) => shufflerBuilder()));*/
                      },
                    ),
                    ListTile(
                      title: Text(
                        'Mistakes',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                      leading: Icon(
                        Icons.info_outline,
                        size: 20.0,
                        color: Colors.white,
                      ),
                      onTap: () {
                        /* Navigator.pop(context);
                      Navigator.of(context).push(new MaterialPageRoute(
                          builder: (context) => mistakePage()));*/
                      },
                    ),
                    ListTile(
                      title: Text(
                        'Important links',
                        style: TextStyle(fontSize: 18.0, color: Colors.white),
                      ),
                      leading: Icon(
                        Icons.border_color,
                        size: 20.0,
                        color: Colors.white,
                      ),
                      onTap: () {
                        /*Navigator.of(context).push(new MaterialPageRoute(
                          builder: (context) => importantLinks()));*/
                      },
                    ),
                  ]),
                ),
                Container(
                    child: Align(
                        alignment: FractionalOffset.bottomCenter,
                        child: Column(
                          children: <Widget>[
                            Divider(),
                            ListTile(
                                leading: Icon(Icons.settings),
                                title: Text('Facebook')),
                            ListTile(
                                leading: Icon(Icons.help),
                                title: Text('Instagram'))
                          ],
                        ))),
              ],
            ),
          ),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Answer 2

试试这个：

Drawer(
    child: Container(
      decoration: BoxDecoration(color: Color(0xFF0098c2)),
      child: ListView(
        children: <Widget>[
          ListTile(
            title: Text(
              'Dealer',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.person,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => dealerBuilder()));
            },
          ),
          ListTile(
            title: Text(
              'Shuffler',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.shuffle,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => shufflerBuilder()));
            },
          ),
          ListTile(
            title: Text(
              'Mistakes',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.info_outline,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.pop(context);
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => mistakePage()));
            },
          ),
          ListTile(
            title: Text(
              'Important links',
              style: TextStyle(fontSize: 18.0, color: Colors.white),
            ),
            leading: Icon(
              Icons.border_color,
              size: 20.0,
              color: Colors.white,
            ),
            onTap: () {
              Navigator.of(context).push(new MaterialPageRoute(
                  builder: (context) => importantLinks()));
            },
          ),
          Expanded(),
          Container(
              child: Align(
                  alignment: FractionalOffset.bottomCenter,
                  child: Column(
                    children: <Widget>[
                      Divider(),
                      ListTile(
                          leading: Icon(Icons.settings),
                          title: Text('Facebook')),
                      ListTile(
                          leading: Icon(Icons.help),
                          title: Text('Instagram'))
                    ],
                  ))),
        ],
      ),
    ),
  ),

Answer 3

这是一种方法

代码：

Scaffold(
  appBar: AppBar(),
  drawer: Drawer(
    child: LayoutBuilder(
      builder: (context, constraints) {
        return SingleChildScrollView(
          child: Container(
            decoration: BoxDecoration(color: Color(0xFF0098c2)),
            child: ConstrainedBox(
              constraints: constraints.copyWith(
                minHeight: constraints.maxHeight,
                maxHeight: double.infinity,
              ),
              child: IntrinsicHeight(
                child: SafeArea(
                  child: Column(
                    children: [
                      Column(
                        children: <Widget>[
                          // your ListTile here
                        ],
                      ),
                      Expanded(
                        child: Align(
                          alignment: Alignment.bottomLeft,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              // your footer widgets here
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ),
        );
      },
    ),
  ),
  body: Container(),
);

通过使用LayoutBuilder、ConstrainedBox 和IntrinsicHeight，您甚至可以在ScrollView 中使用Expanded，并将图像页脚保持在底部。它确保您在任何手机屏幕上都有响应式布局。

图片结果：

使用的完整测试代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(
        child: LayoutBuilder(
          builder: (context, constraints) {
            return SingleChildScrollView(
              child: Container(
                decoration: BoxDecoration(color: Color(0xFF0098c2)),
                child: ConstrainedBox(
                  constraints: constraints.copyWith(
                    minHeight: constraints.maxHeight,
                    maxHeight: double.infinity,
                  ),
                  child: IntrinsicHeight(
                    child: SafeArea(
                      child: Column(
                        children: [
                          Column(
                            children: <Widget>[
                              ...List<Widget>.generate(
                                  5,
                                  (index) => ListTile(
                                        title: Text(
                                          "$index",
                                          style: TextStyle(color: Colors.white),
                                        ),
                                        leading: Icon(
                                          Icons.person,
                                          size: 20,
                                          color: Colors.white,
                                        ),
                                        onTap: () => Navigator.pop(context),
                                      )),
                            ],
                          ),
                          Expanded(
                            child: Align(
                              alignment: Alignment.bottomLeft,
                              child: Column(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  ListTile(
                                    leading: Icon(Icons.settings),
                                    title: Text('Facebook'),
                                    onTap: () => Navigator.pop(context),
                                  ),
                                  ListTile(
                                    leading: Icon(Icons.help),
                                    title: Text('Instagram'),
                                    onTap: () => Navigator.pop(context),
                                  ),
                                ],
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
      body: Container(),
    );
  }
}

Answer 4

Expanded on SizedBox 对我有用！

class CustomDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          DrawerHeader(child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
            children: [
            // SizedBox(height: 10,),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: ProfileAvatar(),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Row(
                      children: [
            Text("Syed Tariq Ullah"),
            Spacer(),
            IconButton(onPressed: (){},
              icon:Icon(CupertinoIcons.play_arrow)),
                      ],
                
                    ),
                  ),
          ],)),
            
        SizedBox(height: 5.0,),
        ListTile(
          leading: Icon(CupertinoIcons.chat_bubble_2_fill),
          title: Text("Messages"),
        ),
           ListTile(
          leading: Icon(CupertinoIcons.chart_bar),
          title: Text("Stats"),
        ),
           ListTile(
          leading: Icon(CupertinoIcons.briefcase),
          title: Text("Your Content"),
        ),
           ListTile(
          leading: Icon(CupertinoIcons.bookmark),
          title: Text("Bookmarks"),
        ),
           ListTile(
          leading: Icon(CupertinoIcons.doc_text),
          title: Text("Drafts"),
        ),
        Divider(height: 2.0,),
        
      
        Expanded(child: SizedBox(height: 20,)),
        
         Align(
           alignment: Alignment.bottomCenter,
           child: ListTile(leading: Icon(CupertinoIcons.settings_solid),
           title: Text("Settings"),
           trailing: Icon(CupertinoIcons.ellipsis),
           ),
         ),
         // Spacer(),
         
      
      ],),
      
    
    );
  }
}

Answer 5

您可以使用脚手架。如果您想要一个不移动的标题，您可以将 appBar 设置为 PreferredSize 小部件，并将子部件作为 DrawerHeader 或任何您想要的。将 body 设置为 ListView 以获得可滚动列表。并将 bottomNavigationBar 设置为具有一定高度的 Container（例如 144 用于 3 个按钮），然后将子项设置为 Column 小部件。

 return Drawer(
      child: Scaffold(
          appBar: PreferredSize(
            preferredSize: Size.fromHeight(144),
            child: DrawerHeader(child: Image.asset("")),
          ),
          body: ListView(
            children: [
              ListTile(
                title: const Text("dark mode"),
                leading: const Icon(Icons.dark_mode_rounded),
                trailing: Switch(
                  value: true,
                  onChanged: (value) {},
                ),
              ),
              ListTile(
                title: const Text("metric"),
                leading: const Icon(Icons.thermostat_rounded),
                trailing: Switch(
                    value: true,
                    onChanged: (value) {}
                ),
              ),
            ],
          ),
          bottomNavigationBar: Container(
            height: 144,
            child: Column(
              children: [
                ListTile(
                  title: Text("Settings"),
                  leading: Icon(Icons.settings_outlined),
                  onTap: () {},
                ),
                ListTile(
                  title: Text("Help"),
                  leading: Icon(Icons.help_outline_outlined),
                  onTap: () {},
                ),
                ListTile(
                  title: Text("Log Out"),
                  leading: Icon(Icons.logout_outlined),
                  onTap: () {},
                ),
              ],
            ),
          )),
    );

Answer 6

嘿，我想我想出了可能有帮助的答案 - 您可以使用一个 spacer 小部件来占据所有拉伸的空间空间