How To Easily Change Flutter Drawer Background Color

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

As you can see in the above image that the background color of drawer is now successfully customized.

You can also pass a color code(e.g. Color(0xff563f73)) to it.

So this is how you can easily change Flutter drawer background color in your own code as well.

Do comment if you still have any questions related to the customization of Flutter drawer background color. I’d be very delighted to answer all your questions.

Below section features the complete source code of custom Flutter drawer background color.

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.