DEV Community

Cover image for How to validate a dropdown button without using a package in Flutter
debbsefe
debbsefe

Posted on

How to validate a dropdown button without using a package in Flutter

If you’ve ever had a form that submits to a database, you’ll agree that ensuring that users submit the correct option is important. One way to do so is by using dropdown buttons with selected options. A typical dropdown button in flutter looks like this;

DropdownButton<String>(
                            items: [
                             DropdownMenuItem<String>(
                                 value: "January",
                                    child: Text(
                                      "Male",
                                     ),
                              DropdownMenuItem<String>(
                                    value: "February",
                                    child: Text(
                                       "Female",
                                      ),
                                   ],
                                onChanged: (value) async {
                                 setState(() {
                                   gender= value;
                                 });
                                }
                               value: gender,
                               elevation: 2,
                               style: TextStyle(
                               color: Colors.white,                                                         
                                  fontSize: 16),
                                      isDense: true,
                                      iconSize: 30.0,
                                      iconEnabledColor: 
                                      Colors.white,
                                    ),
                                  ),

This dropdown will work in most cases, however, it is quite difficult to validate your dropdown to prevent users from not choosing any option before submitting. Thankfully flutter has an inbuilt widget, that does exactly what we want, the DropdownButtonFormField.

The DropdownButtonFormField works like a dropdown button except it has the validator property with which you can validate for when a user does not choose an option before submitting. Other things you should know about this widget are;

  • The widget should be used inside a form field widget
  • You can style the widget using the decoration property
  • Items parameter must not be null

An example of the DropdownButtonFormField is shown below;

DropdownButtonFormField<String>(
                       items: [
                       DropdownMenuItem<String>(
                          value: "January",
                              child: Text(
                               "Male",
                            ),
                       DropdownMenuItem<String>(
                           value: "February",
                             child: Text(
                               "Female",
                                ),
                             ],
                          onChanged: (value) async {
                           setState(() {
                           gender= value;
                             });
                                       }
                     value: gender,
                     validator: (value) => value == null
                    ? 'Please fill in your gender' : null,
                     decoration: InputDecoration(
                       enabledBorder: UnderlineInputBorder(      
                         borderSide: BorderSide(color:      
                       Colors.white),),  
                       focusedBorder: UnderlineInputBorder(
                         borderSide: BorderSide(color: 
                            Colors.white),),  
                                      );
                          elevation: 2,
                          style: TextStyle(
                           color: Colors.white, fontSize: 16),
                          isDense: true,
                          iconSize: 30.0,
                          iconEnabledColor: Colors.white,
                       ),
                   ),

And it’s that easy to validate your dropdown button in Flutter. One more thing you should know is that the DropdownButtonFormField does not support the dropdown color property. You can change the color of your dropdown by wrapping it with your theme widget and changing the canvas color. An example is also shown below;

Theme(
                                data: Theme.of(context).copyWith(
                                     canvasColor: Colors.black),
                                child:                       
                        DropdownButtonFormField<String>(
                           items: [
                           DropdownMenuItem<String>(
                           value: "January",
                           child: Text(
                           "Male",
                          ),
                         DropdownMenuItem<String>(
                           value: "February",
                           child: Text(
                           "Female",
                           ),
                          ],
                         onChanged: (value) async {
                           setState(() {
                             gender= value;
                             });
                           }
                          value: gender,
                          validator: (value) => value == null
                            ? 'Please fill in your gender': null,
                          decoration: InputDecoration(
                            enabledBorder: UnderlineInputBorder(      
                              borderSide: BorderSide(color:        
                                 Colors.white),),  
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: 
                                  Colors.white),),  
                                      );
                           elevation: 2,
                           style: TextStyle(color: Colors.white, 
                                 fontSize: 16),
                           isDense: true,
                           iconSize: 30.0,
                           iconEnabledColor: Colors.white,
                        ),
                      ),
                    ),

Many thanks for reading this till the end.

Discussion (4)

Collapse
aqibaja profile image
aqibaja

thanks

Collapse
allanmassahud profile image
allanmassahud

Thank you ! 😁👍

Collapse
blakfreeman profile image
blakfreeman

Great value for me thanks

Collapse
rodrigoespinozadev profile image
Rodrigo Espinoza

Thanks for sharing!