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

debbsefe — Sun, 21 Jun 2020 13:18:38 +0000

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.

How to use change the state of your material switch widget with values from cloud firestore (flutter)

debbsefe — Wed, 20 May 2020 23:53:08 +0000

I used the Material switch widget for the first time in one of my projects and I initially found it quite tricky to use. After creating the switch widget, I wanted to change its state based on the values I received from Firestore. However, calling setState after retrieving the data did not seem to work.

Initial Code

class SwitchExample extends StatefulWidget {
  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool isSwitch = false;

  @override
  Widget build(BuildContext context) {
    handleSwitch(bool value) {
      setState(() {
        isSwitch = value;
      });
    }

    return StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection('users').snapshots(),
        builder: (context, snapshot) {
          if (snapshot.data.active == true) {
            setState(() {
              isSwitch = true;
            });
          }
          return Scaffold(
            body: Center(
              child: Switch(
                value: isSwitch,
                onChanged: (val) {
                  handleSwitch(val);
                },
                activeTrackColor: Colors.green,
                activeColor: Colors.white,
                inactiveTrackColor: Colors.grey,
              ),
            ),
          );
        });
  }
}

Thankfully, I was able to find a solution, but before I tell you what it is, here is something you should know about the switch widget.

The switch widget maintains no state of its own

The switch itself does not maintain any state. Instead, when the state of the switch changes, the widget calls the onChanged callback. Most widgets that use a switch will listen for the onChanged callback and rebuild the switch with a new value to update the visual appearance of the switch.

The lines below are the most important in the whole paragraph.

Most Widgets that use a switch will listen for the Onchanged callback and rebuild the switch with a new value to update the visual appearance of the switch

It simply means, widgets will only listen to the onchange callback and update the switch accordingly, and herein lies the problem in the initial code.
The widget cannot listen to

setState(() {
isSwitch = true;
});

because it is not being called from the onchange callback. How then do you change the state dynamically? Here’s a quick solution I was able to come up with below.

Final code

class SwitchExample extends StatefulWidget {
  @override
  _SwitchExampleState createState() => _SwitchExampleState();
}

class _SwitchExampleState extends State<SwitchExample> {
  bool isSwitch = false;
  bool dynamicSwitch;

  @override
  Widget build(BuildContext context) {
    handleSwitch(bool value) {
      setState(() {
        isSwitch = value;
        dynamicSwitch = value;
      });
    }

    return StreamBuilder<QuerySnapshot>(
        stream: Firestore.instance.collection('users').snapshots(),
        builder: (context, snapshot) {
          dynamicSwitch = snapshot.data.active;

          return Scaffold(
            body: Center(
              child: Switch(
                value: dynamicSwitch != true ? isSwitch : dynamicSwitch,
                onChanged: (val) {
                  handleSwitch(val);
                },
                activeTrackColor: Colors.green,
                activeColor: Colors.white,
                inactiveTrackColor: Colors.grey,
              ),
            ),
          );
        });
    }
  }
}

So now depending on the value you have in your collection, your switch will change accordingly.

To test out this code, you can create a collection called users on firebase with a document. In the document, create a field (‘active) and set its value to true or false.

I hope you enjoyed this article and thanks for reading till the end.

Forem: debbsefe

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

How to use change the state of your material switch widget with values from cloud firestore (flutter)

Initial Code

The switch widget maintains no state of its own

Final code