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();
});
})
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
Custom Flutter Dropdown Button Design Source Code
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
