How to validate a dropdown button without using a package in Flutter
Tags: flutter, validation, formfield, codenewbie
Published: 2020-06-21 13:18:38

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;



```dart
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;

```dart
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;

```dart
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.