In this article, we’ll learn how to properly change Flutter drawer background color.
We’ll be explaining it step by step by using an easy but proper Flutter code example. We will first see the default color of drawer widget. Then 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 background color in your own Flutter code with ease.
So what are we both waiting for? Let’s just dive right into it.
What is Flutter Drawer Background Color?
It specifies the color of Flutter drawer widget. Let’s now customize its color. But first, let’s see the default background color of drawer widget.
Default Background Color
In order to see it, we first have to define a simple Flutter drawer widget. See below code:
Scaffold( drawer: Drawer(), appBar: AppBar())

Explanation
First step is to use the drawer constructor of scaffold widget and pass it a Flutter drawer widget.
Then using the appbar constructor of Flutter scaffold and passing it an appbar widget class because the drawer’s icon will show in that appbar.

Customize Flutter Drawer Background Color
For that, we’ve to use the background color constructor of Flutter drawer widget class. This constructor takes a color. So for demonstration, we’ll pass a blue color to it. See below code:
drawer: Drawer( backgroundColor: Colors.blue.shade200, )

Custom Flutter Drawer Background Color 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( backgroundColor: Colors.blue.shade200, ), appBar: AppBar())); } }
Conclusion
In conclusion, hope you now have a detailed practical knowledge of how to properly customize Flutter drawer background color. I’ll be very delighted to receive your feedback on this post.
I’d also highly encourage you to visit my other posts as well. Thank you for reading this article.