CODEWITHSUNDEEP
flutterflutter-layoutdrawer
Sarah
Sarah

Reputation: 1235

flutter drawer Hamburger icon is not showing when i chance Directionality

I am trying to make my app RTL and I want the drawer to be on the right side. I managed to open it from the right direction but the hamburger menu icon disappeared.

This is code to make the layout rtl:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter task',
      home: Directionality(
        textDirection: TextDirection.rtl,
          child: new MyHomePage()
      ),
    );
  }
}`

and this is my drawer :

              drawer: new Container(
            constraints: new BoxConstraints.expand(
              width: MediaQuery
                  .of(context)
                  .size
                  .width - 60,
            ),
            color: Colors.black.withOpacity(0.6),
            alignment: Alignment.center,
              child: new ListView(
               children: <Widget>[
                 Text('1'),
                 Text('2')
               ],
              ),

          ),

What am I missing?

Upvotes: 1

Views: 8947

Answers (4)

redx1t
redx1t

Reputation: 39

Not sure who is still stuck on this but ensure AppBar is present for default hamburger to show

return Scaffold(
      appBar: AppBar(),//REQUIRED FOR DEFAULT TO SHOW
      drawer: Drawer(),

Upvotes: 1

Amit Prajapati
Amit Prajapati

Reputation: 14315

Wrap your home child widget with Directionality using TextDirection.rtl

enter image description here

    import 'package:flutter/material.dart';

    class DrawerLayoutApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return new MaterialApp(
            title: "My Apps",
            theme: new ThemeData(
                fontFamily: "Vazir",
                primaryColor: Color(0xff075e54),
                accentColor: Color(0xff25d366),
                primaryIconTheme: new IconThemeData(color: Colors.white)
            ),
            home: new Directionality(textDirection: TextDirection.rtl, child: new DrawerLayoutAppBody())
        );
    }
    }

    class DrawerLayoutAppBody extends StatefulWidget {
    @override
    State<StatefulWidget> createState() => new DrawerLayoutAppBodyState();
    }

    class DrawerLayoutAppBodyState extends State<DrawerLayoutAppBody>{
    TextStyle listTileTextStyle = new TextStyle(
        color: Colors.black,
        fontWeight: FontWeight.bold,
        fontSize: 18
    );

    @override
    Widget build(BuildContext context) {
        return new Scaffold(
        appBar: new AppBar(
            title: new Text("برنامه های من")
        ),
        drawer: new Drawer(
            child: new ListView(
            children: <Widget>[
                new Container(
                    height: 120,
                    child: new DrawerHeader(
                    padding: EdgeInsets.zero,
                    child: new Container(
                        decoration: new BoxDecoration(
                            gradient: new LinearGradient(
                                colors: <Color>[
                                Theme.of(context).primaryColor,
                                const Color(0xff05433c),
                                ],
                                begin: Alignment.topCenter,
                                end:  Alignment.bottomCenter
                            )
                        ),

                    )
                    )
                ),
                new ListTile(
                leading: new Icon(Icons.map, color: Colors.black),
                title: new Text(
                    'گوگل مپ',
                    style: listTileTextStyle
                ),
                onTap: (){

                },
                ),

            ]
            )
        ),
        );
    }
    }

Upvotes: 1

CopsOnRoad
CopsOnRoad

Reputation: 267724

Output:

enter image description here

Full code:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Directionality(
        child: MyPage(),
        textDirection: TextDirection.rtl, // setting rtl
      ),
    ),
  );
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(), // your drawer
    );
  }
}

Upvotes: 0

Jay Mungara
Jay Mungara

Reputation: 7148

If you do not want to change your code. then you can do as follow,

    leading: IconButton(icon: Icon(Icons.arrow_back), onPressed: (){
      Navigator.of(context).pop();
    }),

This will surely help you without changing your code and work as it should.

Upvotes: 0

Related Questions