Неожиданная прокладка на боковой стороне ящика

Question

Я не уверен, если это из-за использования вложенных лесов, но у моего ящика есть таинственный отступ или поле на левой стороне, когда он расширен. Изменение ширины размера ячейки также не меняет размер пробела. Также ящик очень привередливый, чтобы его открыть.

import 'package:flutter/material.dart';

class NewHome extends StatefulWidget {
@override
_NewHomeState createState() => _NewHomeState();
}

class _NewHomeState extends State<NewHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Stack(
    children: <Widget>[
      Align(
        alignment: Alignment.centerRight,
        child: SizedBox(
          width: 285.0,
          child: Scaffold(
            drawer: Drawer(
              child: Container(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ),
      Container(
        color: Theme.of(context).accentColor,
        width: 75.0,
        child: Column(
          children: <Widget>[],
        ),
      ),
    ],
  ),
);
}
}

Скриншоты:

Закрыто:
https://i.imgur.com/E4vgoqr.png

Ожидаемый:
https://i.imgur.com/hRcfOJ0.png

Фактический:
https://i.imgur.com/QMGTKpU.png

Answer 1

Я понял, что флаттер создает виджеты друг над другом по мере их создания. Это означает, что первый виджет в стеке находится ниже второго и так далее. Таким образом, я решил это, поместив первый контейнер с дочерним элементом скаффолда первым, с отступом, что позволило второму контейнеру, который всегда будет виден, идти на заполнитель, в то время как ящик все еще можно было открыть.

class _NewHomeState extends State<NewHome> {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text("App"),
  ),
  body: Stack(
    children: <Widget>[
      Padding(
        padding: EdgeInsets.only(left: 74.0),
        child: Container(
          child: Scaffold(
            drawer: Drawer(
              child: Container(
                color: Theme.of(context).accentColor,
              ),
            ),
          ),
        ),
      ),
      Container(
        color: Theme.of(context).accentColor,
        width: 75.0,
        child: Column(
          children: <Widget>[],
        ),
      ),
    ],
  ),
);
}
}

Answer 2

Прежде всего позвольте мне объяснить, почему это не работает должным образом. Прежде всего, он выровнен по центру, поэтому он начинается с центра и вызывает эту проблему. Во-вторых, так как он был в центре, и вы используете стек, вам нужно найти точное место в начале ящика, поэтому он действовал плохо. Для ее решения:

class NewHome extends StatefulWidget {
  @override
  _NewHomeState createState() => _NewHomeState();
}

class _NewHomeState extends State<NewHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("App"),
      ),
      body: Stack(
        children: <Widget>[
          //Deleted the blue box because I don't understand why you need it and it was blocking the swipe zone of the drawer
          Container(
            width: 285.0,
            child: Scaffold(
              drawer: Drawer(
                child: Container(
                  color: Theme.of(context).accentColor,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Для решения я поиграл с официальной документацией отсюда

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final appTitle = 'Drawer Demo';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: Scaffold(
        drawer: Drawer(
          // Add a ListView to the drawer. This ensures the user can scroll
          // through the options in the Drawer if there isn't enough vertical
          // space to fit everything.
          child: ListView(
            // Important: Remove any padding from the ListView.
            padding: EdgeInsets.zero,
            children: <Widget>[
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  Navigator.pop(context);
                },
              ),
              ListTile(
                title: Text('Item 2'),
                onTap: () {
                  // Update the state of the app
                  // ...
                  // Then close the drawer
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      )
    );
  }
}