Change Drawer Background Color in Flutter  – The EASY Way

The Drawer widget in Flutter is one of the most used widgets. It allows you to open a sliding window with some options either from the left or right side. You may want to change its color to match your design. So in this tutorial, we’ll see how to change drawer background color in Flutter.

Here’s how it looks after changing color:

Here’s what we’ll cover:

• Steps to change drawer background color in Flutter
• Different ways of adding color

Steps to change drawer background color in Flutter

You can change drawer background color in Flutter, by having the first child as a Container widget. Adding the color to the Container widget, will give the impression of changing the drawer background color.

Steps

Step 1: Locate the file where you have placed the Drawer widget.

Step 2: Inside the Drawer widget, add the Container widget.

Step 3: Inside the Container, add the color parameter and set the color of your choice.

Step 3: Run the app

Code Example

Drawer(
  child: Container(
    color: Colors.purpleAccent, //<-- SEE HERe
    child: ListView(
      children: <Widget>[
        //drawer stuffs
      ],
    ),
  ),
)

Different ways of adding color

There are main three ways you can add color to the drawer widget.

1. Colors.red: This is used to define from the predefined colors.
2. Color(0xffF02E65): This is used to have a custom color.
3. Color.fromARGB(255, 66, 125, 145): This is used to have color from the alpha, red, green, and blue color combination.

Code Example

Drawer(
  child: Container(
    color: Colors.purpleAccent, //<-- SEE HERE
    child: ListView(
      children: <Widget>[
        //drawer stuffs
      ],
    ),
  ),
),
Drawer(
  child: Container(
    color: Color(0xffF02E65), //<-- SEE HERE
    child: ListView(
      children: <Widget>[
        //drawer stuffs
      ],
    ),
  ),
),
Drawer(
  child: Container(
    color: Color.fromARGB(255, 66, 125, 145), //<-- SEE HERE
    child: ListView(
      children: <Widget>[
        //drawer stuffs
      ],
    ),
  ),
)

You can learn more about the Drawer widget here:

Conclusion

In this tutorial, we learned how to change drawer background color in Flutter with practical examples. We also learned what are the different ways to add colors.

Would you like to check other interesting Flutter tutorials?