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())


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())

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

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.