Flutter – How to use Drawer without Scaffold.drawer

dartflutter

I've noticed that Drawer of Scaffold.drawer only shows up when an AppBar of Scaffold is present.

But Instead of AppBar,I Used BottomAppBar present in BottomNavigationBar.

How do I get Drawer working with BottomAppBar?
Here's my code Below for which Drawer dosen't appear

class homieclass extends State<homie>{

@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new Scaffold(

    backgroundColor: Colors.white70.withOpacity(0.9),
    floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    floatingActionButton: FloatingActionButton(onPressed: (){},backgroundColor: Colors.redAccent,child: ImageIcon(new AssetImage("ast/hello123.png")),),
    bottomNavigationBar: BottomAppBar(child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,mainAxisSize: MainAxisSize.max,children: <Widget>[
        IconButton(icon: Icon(Icons.menu), onPressed: (){}),IconButton(icon: Icon(Icons.message), onPressed: (){}),
    ],
    ),
    ),
    body: new Column(
      children: <Widget>[new SizedBox(height: 50.0, ),
        Container(margin: EdgeInsets.only(left: 0.0),child: new Text("Events",textAlign: TextAlign.left,style: TextStyle(fontFamily: 'ssfr',fontSize: 35.0,fontWeight: FontWeight.bold),),)
        , Container(margin: EdgeInsets.only(left: 10.0,right: 10.0) ,width: 360.0,height: 40.0,decoration: new BoxDecoration(color: Colors.blueGrey.withOpacity(0.2),
          border: new Border.all(color: Colors.blueGrey.withOpacity(0.0), width: 2.0),
          borderRadius: new BorderRadius.circular(10.0),),child: new Row(children: <Widget>[SizedBox(width: 10.0,),Icon(Icons.search,color: Colors.blueGrey.withOpacity(0.9),),Text(" Search",style: TextStyle(fontFamily: 'ssft',color: Colors.blueGrey,fontSize: 20.0),)],),)
      ,new SizedBox(height: 10.0,),new SizedBox(
        height: 5.0,
        child: new Center(
          child: new Container(
            margin: new EdgeInsetsDirectional.only(start: 1.0, end: 1.0),
            height: 2.0
            ,
            color: Colors.redAccent.withOpacity(0.8),
          ),
        ),
      ),],
    ),drawer: new Drawer(
    child: new ListView(
      children: <Widget>[ListTile(title: Text("hello"),)],
    ),
  ),

  ),
);

}

Best Answer

It works perfectly for me. Here is a working example with a dedicated "Show Drawer" button in the bottom bar (the drawer can also be dragged in from the left):

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Playground',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Body'),
      ),
      bottomNavigationBar: Builder(builder: (BuildContext context) {
        return BottomAppBar(
          color: Colors.orange,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {
                Scaffold.of(context).openDrawer();;
              }),
              IconButton(icon: Icon(Icons.message), onPressed: () {}),
            ],
          ),
        );
        },),
      drawer: Drawer(
        child: SafeArea(
          right: false,
          child: Center(
            child: Text('Drawer content'),
          ),
        ),
      ),
    );
  }
}

Flutter version: Latest master build (though I'm also quite sure that it works with the beta version)

Related Topic