Flutter Button Widgets | RRTutors

Last updated Sep 27, 2021

Flutter is actually a widget that offers different elements, one of them is essential in any interface since it is the element to process actions par excellence, such as the button. Flutter, like any emerging technology, offers a framework that contains a large number of buttons that we can use in our applications; and the buttons are not far behind

Buttons are the graphical control element which provides the users to make an event such as click actions, making choices, and many more. Buttons can be placed anywhere in our UI like dialogs, forms, cards, toolbars, etc.

Buttons are the Flutter widgets, which is a part of the material design library. Flutter provides several types of buttons that have different shapes, styles, and features

We can also create custom buttons in flutter with adding extra customization.

Flutter contains following buttons

Raised Button
MaterialButton
FloatingActionButton
FlatButton
IconButton
DropdownButton
PopupMenuButton
Buttonbar

Learn More About Buttons Here

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 passing 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 avoid 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;
   }

Conclusion: In this flutter button example we cover what is button and different types of flutter buttons

Article Contributed By :

1454 Views