How To Change Flutter Dropdown Background Color

Flutter dropdown background color

Flutter dropdown background color customization. In this article, I will be changing the Flutter dropdown background color with proper implementation using Flutter example code. I will also discuss what Flutter dropdown background color is and its usage in Flutter dropdown button. So let’s not waste anymore of your time and jump right into the implementation of changing Flutter dropdown background color.

What is Flutter Dropdown Background Color?

Flutter dropdown background color is the color of the dropdown menu that is shown when we click/tap on the  Flutter dropdown button. It contains a list of flutter dropdown menu items. We can tap anyone of those items to show and select that particular Flutter dropdown item in Flutter dropdown button.

In this post we will change the background color of that dropdown. Don’t worry, I will be using a proper and easy Flutter example code so you can have a better idea of how to change Flutter dropdown background color.

Default Flutter Dropdown Background Color

Let’s see the default Flutter dropdown background color. For that we have to implement a simple Flutter dropdown button. I have used two dropdown menu items in the Flutter dropdown. See the below code:

DropdownButton(
            iconEnabledColor: Colors.blue,
            isExpanded: true,
            hint: Text('Select any category', style: TextStyle(fontSize: 15)),
            value: categoryValue,
            items: [
              DropdownMenuItem(
                  value: 'Sports',
                  child: Text('Sports',
                      style: TextStyle(fontSize: 15, color: Colors.black45))),
              DropdownMenuItem(
                  value: 'Tech',
                  child: Text('Tech',
                      style: TextStyle(fontSize: 15, color: Colors.black45))),
            ],
            onChanged: (val) {
              setState(() {
                categoryValue = val.toString();
              });
            })
flutter dropdown default background color
flutter dropdown default background color
You can see in the first image, it is just the Flutter dropdown button and when we click on it then the Flutter dropdown menu is shown as see in the second image. This is the default Flutter dropdown background color. Let’s now see how to change the background color of Flutter dropdown.

Change Flutter Dropdown Background Color

To change the background color of Flutter dropdown menu, we have to use the dropdown color constructor. For demonstration, I have given it a blue color. Let’ see how Flutter dropdown background color looks now:

dropdownColor: Colors.blue.shade100
flutter dropdown background color
You can see in the above image that the Flutter dropdown background color is now changed.
So this is how you can change the background color of Flutter dropdown. If you still face any problems regarding the customization of Flutter dropdown background color then do let me know in the comment sections. I would love to solve all your queries.
Congrats for making it to the end, I have designed a beautiful Flutter dropdown design for you in which Flutter dropdown background color is also customized. Hope you will like it. The source code of the mentioned design is available in the next section.

Custom Flutter Dropdown Button Design Source Code

flutter dropdown background color

flutter dropdown background color

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @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> {
  String? categoryValue;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
      padding: EdgeInsets.all(20),
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(50)
                .copyWith(bottomRight: Radius.circular(0)),
            color: Colors.purple.shade100),
        child: DropdownButtonHideUnderline(
          child: DropdownButton(
              dropdownColor: Colors.purple.shade100,
              iconEnabledColor: Colors.blue,
              isExpanded: true,
              hint: Text('Select any category', style: TextStyle(fontSize: 15)),
              value: categoryValue,
              items: [
                DropdownMenuItem(
                    value: 'Sports',
                    child: Text('Sports',
                        style: TextStyle(fontSize: 15, color: Colors.black45))),
                DropdownMenuItem(
                    value: 'Tech',
                    child: Text('Tech',
                        style: TextStyle(fontSize: 15, color: Colors.black45))),
              ],
              onChanged: (val) {
                setState(() {
                  categoryValue = val.toString();
                });
              }),
        ),
      ),
    ))));
  }
}

Conclusion

In conclusion, now you know in detail how to change the Flutter dropdown background color and give it any color depending on your Flutter app requirements. Please let me know how this article was. Here are my other blog posts related to Flutter app development, Flutter widgets, Flutter animations, Flutter beautiful template designs, and more. Links to some of posts are listed below. I would love to see you visit them as well. Thanks for reading

Leave a Comment

Your email address will not be published.