Flutter 自定义抽屉尺寸答案

【问题标题】：Flutter custom Drawer sizeFlutter 自定义抽屉尺寸
【发布时间】：2020-03-27 12:00:26
【问题描述】：

我希望在 Flutter 中调整抽屉的大小。我不希望抽屉挡住 AppBar，也不希望它超过 50%，寻找这样的东西。

目前就是这样。

我目前的代码是一个基本的 endDrawer

我看到人们在哪里放了第二个脚手架，或者人们在抽屉里放了一个应用栏，但我认为它看起来很便宜。

我宁愿这样抽屉只在主区域打开，并且大小可能只打开屏幕宽度的 50%。

我可以这样做吗？

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: Drawer(
        child: Container(
          color: Colors.grey,
          child: Column(
            children: <Widget>[],
          ),
        ),
      ),
      backgroundColor: Colors.white,
      appBar: AppBar(
        actions: [
          Builder(
            builder: (context) => IconButton(
              icon: Icon(FontAwesomeIcons.ellipsisV),
              onPressed: () => Scaffold.of(context).openEndDrawer(),
              tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
            ),
          ),
        ],
        backgroundColor: Color(0xfff11b7c),
        title: Row(
          children: <Widget>[
            Stack(
              children: <Widget>[
                Text("Group", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontWeight: FontWeight.w700, foreground: Paint()
                ..style = PaintingStyle.stroke
                ..strokeWidth = 5
                ..color = Colors.white
                )),
                Text(
                  "Group",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontWeight: FontWeight.w700,
                      color: Color(0xff383838)),
                ),
              ],
            ),
            Stack(
              children: <Widget>[
                Text("Post!", style: TextStyle(fontFamily: 'Segoe',fontSize: 25, fontStyle: FontStyle.italic ,fontWeight: FontWeight.w700, foreground: Paint()
                  ..style = PaintingStyle.stroke
                  ..strokeWidth = 5
                  ..color = Colors.white
                )),
                Text(
                  "Post!",
                  style: TextStyle(
                      fontFamily: 'Segoe',
                      fontSize: 25,
                      fontStyle: FontStyle.italic,
                      fontWeight: FontWeight.w700,
                      color: Color(0xfff11b7c)),
                ),
              ],
            ),
            Padding(padding: EdgeInsets.fromLTRB(15, 0, 0, 0),),
            Icon(FontAwesomeIcons.solidComments, color: Colors.white,)
          ],
        ),
      ),
      body: Container(),
    );
  }
}

【问题讨论】：

标签： flutter dart

【解决方案1】：

交换您的 Drawer 和 Container 小部件并为您的容器提供宽度以执行此操作。

...
Scaffold(
  endDrawer: Container(
    width: MediaQuery.of(context).size.width / 2,
    color: Colors.grey,
    child: Drawer(
      child: Column(
       ...

【讨论】：