How to Style DropdownButton in Flutter

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. 

1 Commet on this Article

Muhammad Ibn Ameen

How do i fill the options with the gradient?

1 year ago


Please Wait...