Flutter Button Widgets

Button
Flutter contains following buttons

  • Raised Bbutton
  • FloatingActionButton
  • FlatButton
  • IconButton
  • DropdownButton
  • PopupMenuButton
  • Buttonbar

RaisedButton
A raised button is based on a Material widget  whose Material.elevation increases when the button is pressed

new RaisedButton(
              child: new Text('Raised Button'),
              onPressed: _createAccountPressed,

                color: Colors.black,
                shape: new BeveledRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(5))
                )
            )

DropdownButton
DropDown Button is using to show list of data as dropdown.
We can say it is similar to spinner button.

            var selected_values;
            Listlist=[];
            list.add('A');
            list.add('B');
            list.add('C');
            DropdownButton(
                   value: selected_values,
                   hint: Text("Select a value"),
                   items:list == null ? null : list.map((String s){

                     return DropdownMenuItem(
                       value: s,
                       child: Text(s,
                       textAlign: TextAlign.center, style: TextStyle(
                           color: Colors.red
                         ),),
                     );
                   }).toList(),
                   onChanged: (String s){

                     setState(() {
                       print("Select ${s}");
                       selected_values=s;
                     });

                   },

                 ),
    
DropdownButton having the properties like
Items: Which is the list of data which we are going to show as list.
Which is returns the DropdownMenuItems with Value and child properties.
onChanged: Which will trigger when we are selecting the items for dropdown list.
Here we can handled the selected data and change the state to apply UI updates.
Hint: Which will show the default text as hint.

In the abova example just pasing the list of String type data.
We can also pass the Object type(Generic type) data.


            Data selected_values;
            Listlist=[];
            list.add(new Data("A",1));
            list.add(new Data("B",2));
            list.add(new Data("C",3));
            DropdownButton(
                   value: selected_values,
                   hint: Text("Select a value"),
                   items:list == null ? null : list.map((Data s){

                     return DropdownMenuItem(
                       value: s,
                       child: Text(s.name,
                       textAlign: TextAlign.center, style: TextStyle(
                           color: Colors.red
                         ),),
                     );
                   }).toList(),
                   onChanged: (String s){

                     setState(() {
                       print("Select ${s.name}");
                       selected_values=s;
                     });

                   },

                 ),
                 
    class Data{
    final String name;
    final int id;
    Data(this.name,this.id);
    }
    
    In the above we are pasing the Data type class object into list.
    
    Some times we may get crash While selecting the value from drop down, because of mismatching the Object.
    
    To avaiod that we need to make boolean type validation in class Data on properties.
    
    Now the Data class will become like
    
    class Data{
    final String name;
    final int id;
    Data(this.name,this.id);
     bool operator ==(o) => o is Data && o.name == name;   //New
    int get hashCode => name.hashCode;
    }




Related Questions View All