Flutter自定义抽屉尺寸

Question

我正在寻找在 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(),
    );
  }
}

Answer 1

交换您的抽屉和容器小部件，并为容器提供宽度来执行此操作。

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