Button
Buttons are material components that provide the user a single tap facility for
taking actions, making choices, submitting forms, saving data, opening a new
page, etc. Buttons are triggered when the user taps on them. They are the most
commonly used feature provided in almost all the flutter apps. For using buttons
you need to import the Material Components package for flutter i.e.
“package:flutter/[Link]“. Based on their classification, buttons are
divided into two categories – deprecated and un-deprecated. The button works
on material apps only.
Special features of a button:
· Easy addition of different child widgets for different purposes
· Easy theming of the buttons
· Easy addition of themed text and icons
· Provide action functionalities
Types of Buttons
Buttons are classified broadly into the following categories:
1. Elevated Button
1. Floating Action Button
1. Outlined Button
1. Icon Button
1. Text Button
1. Dropdown Button
1. PopUp Menu Button
Flat Button & Raised Button classes have been deprecated in the flutter.
Instead, we can use Text Button and Elevated Button classes to achieve the
same result.
Elevated Button
This button has a special feature of increased elevation. When an elevated
button is pressed its elevation is increased to a certain value. They do not offer
straightforward styling like the rest of the buttons, but you can use a styleFrom
method to style an elevated button explicitly.
Example:
ElevatedButton(
child: const Text(
'Raised Button',
),
onPressed: () {},
),
Floating Action Button
These are small circular buttons that hang on the screen of the application. You
can set the position of your action button by using but by default, it is placed at
the center of the screen. They create a hovering effect when tapped.
FloatingActionButton(
child: Icon([Link]),
backgroundColor: [Link],
foregroundColor: [Link],
onPressed: () {},
),
Outlined Button
These are simple buttons with text in the center enclosed by a thin border. You
can modify the styling of these buttons by using properties provided in the
material package. They have a slight elevation.
Example:
OutlinedButton(
child: Text(
"Outlined Button",
style: TextStyle(
color: [Link],
),
),
onPressed: () {},
),
Icon Button
These are picturized buttons with colors filled inside them. Icon Buttons
represent a cartoonish image of the category defined inside. These are used to
create profile screens, option tabs, etc.
Example:
IconButton(
splashColor: [Link],
icon: Icon([Link]),
color: [Link],
onPressed: () {},
),
Text Button
The simplest of all the buttons is a text button. They are regular text without any
outline or boundary.
Example:
TextButton(
child: Text(
"Text Button",
style: TextStyle(
color: [Link],
),
),
onPressed: () {},
),
Drop Down button: These buttons provide an option to be chosen to form a
list of available options. It is a drop-down list.
Example:
String dropdownvalue = 'Profile';
var items = [
'Profile',
'Settings',
'Account',
'Go Premium',
'Logout',
];
DropdownButton(
focusColor: [Link],
value: dropdownvalue,
icon: const Icon(Icons.keyboard_arrow_down),
items: [Link]((String items) {
return DropdownMenuItem(
value: items,
child: Text(
items,
style: TextStyle(
color: [Link],
),
),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
),
Pop Up Menu Button
It is represented by three vertical dots. It displays a menu bar from which the
user selects his chosen option.
PopupMenuButton(
itemBuilder: (context) => [
PopupMenuItem(
child: Text("Profile"),
value: 1,
),
PopupMenuItem(
child: Text("Account"),
value: 2,
),
PopupMenuItem(
child: Text("Settings"),
value: 1,
),
PopupMenuItem(
child: Text("About GFG"),
value: 1,
),
PopupMenuItem(
child: Text("Go Premium"),
value: 1,
),
PopupMenuItem(
child: Text("Logout"),
value: 1,
),
],
),