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(
       ...

Flutter如何设定客户应用程式抽屉尺寸

1 个答案: