In this example, we are going to show how to style DropdownButton, such as applying background color, border width, border color, border-radius, box-shadow, Dropdown Menu color, font color, font size, icons, etc. See the example:
Read this also: How to add Dropdown Button Widget in Flutter App
DecoratedBox(
decoration: BoxDecoration(
color:Colors.lightGreen, //background color of dropdown button
border: Border.all(color: Colors.black38, width:3), //border of dropdown button
borderRadius: BorderRadius.circular(50), //border raiuds of dropdown button
boxShadow: <BoxShadow>[ //apply shadow on Dropdown button
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
blurRadius: 5) //blur radius of shadow
]
),
child:Padding(
padding: EdgeInsets.only(left:30, right:30),
child:DropdownButton(
value: "United Kingdom",
items: [ //add items in the dropdown
DropdownMenuItem(
child: Text("United Kingdom"),
value: "United Kingdom",
),
DropdownMenuItem(
child: Text("Canada"),
value: "Canada"
),
DropdownMenuItem(
child: Text("Russia"),
value: "Russia",
)
],
onChanged: (value){ //get value when changed
print("You have selected $value");
},
icon: Padding( //Icon at tail, arrow bottom is default icon
padding: EdgeInsets.only(left:20),
child:Icon(Icons.arrow_circle_down_sharp)
),
iconEnabledColor: Colors.white, //Icon color
style: TextStyle( //te
color: Colors.white, //Font color
fontSize: 20 //font size on dropdown button
),
dropdownColor: Colors.redAccent, //dropdown background color
underline: Container(), //remove underline
isExpanded: true, //make true to make width 100%
)
)
)The output of DropdownButton:
You can use DecoratedBox() to apply decoration on DropdownButton() widget. DecoratedBox provides all necessary parameters to customize the style of any kind of widget.
If you get any errors then have a look: How to Solve DropdownButton Errors in Flutter
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.redAccent,
Colors.blueAccent,
Colors.purpleAccent
//add more colors
]),
borderRadius: BorderRadius.circular(5),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
blurRadius: 5) //blur radius of shadow
]
),
child: Padding(
padding: EdgeInsets.only(left:30, right:30),
child:DropdownButton(
value: "menuone",
items: [
DropdownMenuItem(
child: Text("Menu One"),
value: "menuone",
)
],
onChanged: (value){
},
isExpanded: true, //make true to take width of parent widget
underline: Container(), //empty line
style: TextStyle(fontSize: 18, color: Colors.white),
dropdownColor: Colors.green,
iconEnabledColor: Colors.white, //Icon color
)
)
)The output of DropdownButton with Gradient Background:
Related Post: How to set Gradient Background on ElevetedButton in Flutter
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Home()
);
}
}
class Home extends StatefulWidget {
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
String selectval = "United Kingdom";
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Style Dropdown Button"),
backgroundColor: Colors.redAccent
),
body: Container(
alignment: Alignment.center,
padding: EdgeInsets.all(50),
child: Column(
children: [
DecoratedBox(
decoration: BoxDecoration(
color:Colors.lightGreen, //background color of dropdown button
border: Border.all(color: Colors.black38, width:3), //border of dropdown button
borderRadius: BorderRadius.circular(50), //border raiuds of dropdown button
boxShadow: <BoxShadow>[ //apply shadow on Dropdown button
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
blurRadius: 5) //blur radius of shadow
]
),
child:Padding(
padding: EdgeInsets.only(left:30, right:30),
child:DropdownButton(
value: "United Kingdom",
items: [ //add items in the dropdown
DropdownMenuItem(
child: Text("United Kingdom"),
value: "United Kingdom",
),
DropdownMenuItem(
child: Text("Canada"),
value: "Canada"
),
DropdownMenuItem(
child: Text("Russia"),
value: "Russia",
)
],
onChanged: (value){ //get value when changed
print("You have selected $value");
},
icon: Padding( //Icon at tail, arrow bottom is default icon
padding: EdgeInsets.only(left:20),
child:Icon(Icons.arrow_circle_down_sharp)
),
iconEnabledColor: Colors.white, //Icon color
style: TextStyle( //te
color: Colors.white, //Font color
fontSize: 20 //font size on dropdown button
),
dropdownColor: Colors.redAccent, //dropdown background color
underline: Container(), //remove underline
isExpanded: true, //make true to make width 100%
)
)
),
Divider(),
DecoratedBox(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.redAccent,
Colors.blueAccent,
Colors.purpleAccent
//add more colors
]),
borderRadius: BorderRadius.circular(5),
boxShadow: <BoxShadow>[
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.57), //shadow for button
blurRadius: 5) //blur radius of shadow
]
),
child: Padding(
padding: EdgeInsets.only(left:30, right:30),
child:DropdownButton(
value: "menuone",
items: [
DropdownMenuItem(
child: Text("Menu One"),
value: "menuone",
)
],
onChanged: (value){
},
isExpanded: true, //make true to take width of parent widget
underline: Container(), //empty line
style: TextStyle(fontSize: 18, color: Colors.white),
dropdownColor: Colors.green,
iconEnabledColor: Colors.white, //Icon color
)
)
)
]
)
)
);
}
}
In this way, you can style DropdownButton and apply a background color, border color, border radius, border width, gradient background, box-shadow, font size, change icon, and many more in the Flutter app.
More Guides for Flutter Developers:
Please Wait...
Buy Popular Flutter Scripts
Buy Popular Flutter UI Kits, eCommerce, Restaurant Food Delivery Apps Scripts.
1 Commet on this Article
Muhammad Ibn Ameen
How do i fill the options with the gradient?