How To Change Flutter Drawer Width – Easy Flutter Code Example

In this article, we’ll practically learn how to properly change Flutter drawer width.

We’ll explain it step by step by using a proper Flutter code example. We will first see the default width of drawer widget and after that, we’ll change it by using a practical code example.

After reading this post, you’ll have a detailed knowledge of how to easily change Flutter drawer width in your own Flutter code as well.

So let’s jump right into it.

What is Flutter Drawer Width?

As the name suggests, it specifies the horizontal size of Flutter drawer widget. Let’s now understand it using a practical example.

First we’ll see its default width. Then we’ll change the Flutter drawer width practically.

Default Flutter Drawer Width

For that, we’ve to implement a simple Flutter drawer widget. See below code:

Scaffold(
    drawer: Drawer(), 
    appBar: AppBar())

First we’ve passed a Flutter drawer widget to the drawer constructor of Flutter scaffold widget class. Then we have used the appbar constructor and passed it a Flutter appbar widget.

Reason for using appbar is that the drawer icon will be shown in appbar, so its necessary to specify an appbar as well.

You can see in the above image that we now have a drawer icon in our appbar widget. Let’s now click it and see the default width of Flutter drawer widget.

This is the default Flutter drawer width. Let’s now see how to practically change its width.

Change Flutter Drawer Width

For that, we’ve to use the width constructor of Flutter drawer widget class. This constructor takes a double(decimal) value but passing it an integer will also work just fine.

For demonstration, we have passed an integer 100 to this width constructor. See below code:

Scaffold(
       drawer: Drawer(
             width: 100,
            ),
            appBar: AppBar())

We can see that the Flutter drawer width is successfully customized.

You can use a media query class to specify the percentage of drawer’s width. Media query is used to get the screen’s height and width. In our case, we’ll get the screen’s width. See below code:

 drawer: Drawer(
        width: MediaQuery.of(context).size.width * .5
               )

This media query code will take 50 percent of screen width size and assigns it to the width constructor. So that means multiplying the media query code with 0.1 will take 10 percent of screen, 0.2 will take 20 percent and so on.

So this is how you can easily customize Flutter drawer width in your own code as well.

Don’t hesitate to ask if you still have any questions related to the customization of Flutter drawer width. I’d be very glad to answer all.

The complete source code of customized Flutter drawer width is provided in the next section.

Custom Flutter Drawer Width Source Code

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            drawer: Drawer(
                  width: MediaQuery.of(context).size.width * .5),
            appBar: AppBar()));
  }
}

Conclusion

In conclusion, hope you now have a detailed practical understanding of how to properly customize Flutter drawer width. I’ll be very happy to receive your valuable feedback on this post.

I’d also highly encourage you to visit my other articles as well. Thank you for reading this post.