Types of Buttons In Flutter

Flutter Buttons

Flutter has various types of buttons. Buttons are the Flutter widgets, which are a part of the material design library.So, here We are going to discuss different types of buttons and they can be placed anywhere in our UI as dialogs, forms, cards, and toolbars, AppBar and in many more places.

Types of Flutter Buttons 

1. TextButton

Text Button is a Material Design button that comes without border or elevation change by default.TextButton is the replacement for FlatButton. We are clicking on TextButton then it is the same as Text and click effect if we want the Shadow, ButtonStyle, alignment, padding, and many more properties we can use as per our requirements. There are two required parameters. Of course, you have to pass a Widget as a child and onPressed.

Taking an example that has text, style, and onPressed properties in style there are many properties we can customize like primary color, background color, surface, shape, and many more. 

For defining a style for a specific button, you can pass ButtonStyle as a style parameter in the constructor of TextButton.Values passed as the parameters of TextButton.style from.

We are discussing more properties of TextButton in the upcoming Blog.

2. Elevated Button

Elevated Button is a Material Design's button that comes with the default elevation that will increases when the button is pressed. Elevated Button is the replacement for Raised Button. There are two required parameters. Of course, you have to pass a Widget as a child and onPressed.

The style of the button can be customized by creating a ButtonStyle. The ButtonStyle can be passed as ThemeData's elevatedButtonTheme or ElevatedButton's style. 

Here in the example we are defining a style for a specific button, you can pass ButtonStyle as a style parameter in the constructor of ElevatedButton.in this you can define a TextStyle specific for the button and pass it as textStyle.

We are discussing more properties of ElevatedButton in the upcoming Blog. 

3. Floating Button

I have already used Floating Button in early blogs here we are discussing more properties of Floating Button how we can customize and use it as per our requirements. The floating Button default showing at the bottom but you can change it as per your design.

Here in the example, there are 2 floating buttons. First, with the Text Widget and another is with the Icon and in that, you can customize all the values. 

Example With Text 

Example With Icon

4. Outline Button

Outline Button as per the widget name it's gives a default outline to the button you can change it and also customize it. 

There are two ways to pass the ButtonStyle. First, we can set the styleform of the Outline Buttonin the style property. Second, you can set it as theme data. You need to create an OutlinedButtonThemeData and pass it as outlinedButtonTheme in the constructor of ThemeData. By setting the style as theme data, it affects all OutlinedButton widgets under the tree.

We have seen the first type of styleform in another button example here we can see the second way which is OutlinedButtonThemeData Let' see the example.

OutlinedButtonThemeData

Example of OutlinedButton 

5. Icon Button

In Flutter IconButton is a widget that prints an icon on top of the Material widget. there are two required parameters: icon and onPressed. the icon is the icon to be displayed it is Widget as an Icon. onPressed is a callback function called when the button is pressed.

 

The icon color can be changed using a color parameter. You can also set the colors when the button is pressed, disabled color, hover color, and many more properties for customization. So, let's see the example where we can see all these properties:- 

6. DropDown Button 

If you have an input field and you want the users to select only from certain values at that time you can use the dropdown button.

We use the Dropdown Button to display any Dropdown List item as we can change its style according to it. Which shows the list item we have selected. The Dropdown Button has DropDownMenuItem.

 

Let's take an example in which I have taken the list of language in String data type with the use of items property you can pass your list of items that you want to show in DropDownMenuItem. 

7. PopupMenu Button

PopUpMenu as per the given name popup means how they popup on our screen to show us various options on the click. You can execute a different function on the press of a popup menu as per our need.

In this, we are defining a list of values for that we are using itemBuilder which provides us an index to keep track of our buttons. There are two ways we can use this First, Here is the example we can use basic PopupMenuButton and properties:- 

Second, We can set this in AppBar with the use of action property. So, here we are creating PopUpItem in which we have to declare the index and its values and that we will pass in the popUpMenuButton:- 

PopupItem Class:-

Example of PopMenuButton:-