adding width to drawer in flutter

Question

I want to be able to add width to this drawer because it takes up too much of the screen when open and I want to lessen the width a bit, is this possible and how would I do this?

here is my scaffold

Widget build(BuildContext context) {
return new Scaffold(
  appBar: new AppBar(
    title: new Text("App Name"),
    centerTitle: true,
  ),
  body: new Center(
  ),

  drawer: Drawer(
  child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
      UserAccountsDrawerHeader(
        accountName: Text('Test123') ,
        accountEmail: Text('test@123.com'),
        currentAccountPicture: Image.network('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8'),
        ),

        ListTile(
          title: Text('data'),
        ),
      ],
    ),
  ),
);

score 78 · Accepted Answer · answered Aug 02 '19 at 20:24

Wrap the Drawer widget inside a Container widget and pass the width parameter to the Container.

drawer: Container(
      width: 50,
      child: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text('Test123'),
              accountEmail: Text('test@123.com'),
              currentAccountPicture: Image.network(
                  'https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a89c3e38-b6f3-48a0-9f9e-df9a0129fb93/daghh5x-4a77b3ec-fd4f-4d17-9f84-5963a8cb5c03.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcL2E4OWMzZTM4LWI2ZjMtNDhhMC05ZjllLWRmOWEwMTI5ZmI5M1wvZGFnaGg1eC00YTc3YjNlYy1mZDRmLTRkMTctOWY4NC01OTYzYThjYjVjMDMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.dWTFMrwnbAbj5TtUp9U_vQsohW7MnkRPymzR5wZQoV8'),
            ),
            ListTile(
              title: Text('data'),
            ),
          ],
        ),
      ),
    ),

score 15 · Answer 2 · answered Mar 25 '21 at 10:49

15

Here is another example to give width to the Drawer.

return SizedBox(
  width: MediaQuery.of(context).size.width * 0.75, // 75% of screen will be occupied
  child: Drawer(
    
  ),
);

Thank you.

answered Mar 25 '21 at 10:49

Pratik Butani

60,504
58
273
437

This is great. Thanks! – Sleewok May 25 '21 at 20:06

score 1 · Answer 3 · answered Jan 20 '21 at 12:52

1

Try this method once.

drawer: Container(
width: MediaQuery.of(context).size.width * 0.5,
child: Drawer()
),

answered Jan 20 '21 at 12:52

Kalpesh Khandla

758
1
9
22

score 0 · Answer 4 · answered Feb 13 '22 at 16:57

Before

After

Scaffold Drawer with Container or Sizeable widget

Container(
          width: 125,
          child: Drawer(
            child: ListView(
              // Important: Remove any padding from the ListView.
              padding: EdgeInsets.zero,
              children: [
                const DrawerHeader(
                  decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                  child: Text('Drawer Header'),
                ),
                ListTile(
                  title: const Text('google.com'),
                  onTap: () {
                    widget._controller!.loadUrl(
                        urlRequest: URLRequest(url: Uri.parse("www.google.com")));

                    // Update the state of the app.
                    // ...
                  },
                ),
                ListTile(
                  title: const Text('yahoo.com'),
                  onTap: () {
                    widget._controller!.loadUrl(
                        urlRequest: URLRequest(url: Uri.parse("www.yahoo.com")));
                    // ...
                  },
                ),
              ],
            ),
          ),
        )

Christophe Desbois · Answer 5 · 2023-07-04T15:38:06.767

-1

Works for me:

return Scaffold( drawer: Drawer( width: ihmParams.menuWidth, child: leftMenu( closeMenu: true, ), ),

Code

edited Jul 04 '23 at 15:38

answered Jul 04 '23 at 15:37

Christophe Desbois

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 06 '23 at 01:22

adding width to drawer in flutter

5 Answers5

Before

After