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

#flutter #validation #formfield #codenewbie

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,
                        ),
                      ),
                    ),