Pfthb

I'm not sure if this is due to using nested scaffolds, but my drawer has a mysterious padding or margin on the left side of it when it is extended. Changing the width of the sizedbox doesn't change the size of the whitespace either. Also the drawer is really finicky to open.

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>,
 ),
 ),
 ],
 ),
);

Screenshots:

Closed:
https://i.imgur.com/E4vgoqr.png

Expected:
https://i.imgur.com/hRcfOJ0.png

Actual:
https://i.imgur.com/QMGTKpU.png

First of all let me explain why doesn't it work properly. First of all, it is aligned to center, therefore it starts from the center and cause this issue. Secondly, since it was at center and you use a stack, you need to find the exact spot the start the drawer, that's why it was acting flaky. For solving it:

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,
 ),
 ),
 ),
 ),
 ],
 ),
 );
 

For solution, I played around with the official documentation from here

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);
 ,
 ),
 ],
 ),
 ),
 )
 );
 

I figured out that flutter builds widgets on top of each other as they are created. This means that the first widget in a stack is below the second one and so on. So the way I solved this was by putting the first container which has the scaffold child in first, with a padding, this allowed the second container which will always be visible to go onto the padding while the drawer can still be opened nicely.

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>,
 ),
 ),
 ],
 ),
);