04 Jul 2020
Deep Dive Into Buttons & Clickable Widgets In Flutter

Deep Dive Into Buttons & Clickable Widgets In Flutter

We can not imagine any language that has not to click event because without click it’s very hard to trigger any actions. So here in Flutter, we are talking about buttons and clickable widgets very quickly in the flutter.

In this blog we are going to discuss pre-define buttons and clickable widgets in Flutter as follows :

  1. FlatButton
  2. RaisedButton
  3. FloatingActionButton
  4. IconButton
  5. InkWell
  6. GestureDetector
  7. DropdownButton
  8. MaterialButton
  9. OutlineButton
  10. RadioButton
  11. RadioListTileButton
  12. PopupMenuButton


  1. A simple button that has not much-highlighted decoration, Mostly use on toolbar, dialogue and etc.
  2. FlatButton has two required property child and onPressed()

Here we are using the child as a Text Widget but you can use as you want and suitable for Flutter. onPressed() is a simple voidCallback that is call back with no argument and no return.

Below are more property of FlatButton widget.



You can find all the properties of any widget/method by short-cut Mac User — (Command+ClickOnWidget/Method) for others may be use Ctrl instead of Command.


  1. It’s material button same like flat button but it has an elevation that will increase when it pressed.
  2. Do not used with Widgets that have already raise-content like dialogue, card etc. Use with flat content like a long list, a wide range of widgets.

Below are more property of RaisedButton widget.



  1. Simple circular icon with hover, mostly single per screen.
  2. Display on-screen for triggering positive action like, add, share or navigate to screen and etc.
  3. Use child as Icon widget, not any rule you can also use whatever
  4. Mostly use with Scaffold widget that has property name is floatingActionButton

Below are more property of FloatingActionButton widget.



  1. Simple display touchable icon, Trigger action when clicked.
  2. Mostly use with AppBar widget with actions property.

Below are more property of IconButton widget.



  1. A material design button for selecting from a list of items.
  2. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.
  3. The onChanged callback should update a state variable that defines the dropdown’s value.

Below are more property of DropdownButton widget.


  1. The button’s size will expand to fit the child widget
  2. MaterialButtons whose onPressed and onLongPress callbacks are null will be disabled.

Below are more property of MaterialButton widget.


  1. Similar to a FlatButton with a thin grey rounded rectangle border.
  2. The outline button’s border shape is defined by shape and its appearance is defined by borderSidedisabledBorderColor, and highlightedBorderColor.
  3. By default, the border is a one-pixel wide grey rounded rectangle that does not change when the button is pressed or disabled.
  4. By default the button’s background is transparent.
  5. If the onPressed or onLongPress callbacks are null, then the button will be disabled and by default will resemble a flat button in the disabledColor.

Below are more property of OutlineButton widget.



  1. The radio button itself does not maintain any state.
  2. the radio invokes the onChanged callback, passing the value as a parameter.
  3. Most widgets will respond to onChanged by calling State.setState to update the radio button’s groupValue.

Below are more property of Radio widget.



  1. ListTile with a Radio. In other words, a radio button with a label.
  2. The entire list tile is interactive: tapping anywhere in the tile selects the radio button.
  3. The valuegroupValueonChanged, and activeColor properties of this widget are identical to the similarly-named properties on the Radio widget
  4. The titlesubtitleisThreeLine, and dense properties are like those of the same name on ListTile.

Below are more property of RadioListTile widget.


  1. Displays a menu when pressed and calls onSelected when the menu is dismissed because an item was selected.
  2. The value passed to onSelected is the value of the selected menu item.
  3. One of child or icon may be provided, but not both. If icon is provided, then PopupMenuButton behaves like an IconButton.
  4. If both are null, then a standard overflow icon is created (depending on the platform).

Below are more property of PopupMenuButton widget.

Clickable widget

We can make any widget clickable or you can give any widget capability to detect the gesture.

There are two widgets which helps us in Flutter to give this functionality

  1. InkWell
  2. GestureDetector


  1. A rectangle area of the material that response on touch.
  2. Simply you can wrap it to any material widget so that will be clickable.


  1. It’s work same like InkWell widget but it has more powerful click events.
  2. It has many click/drag and other events.

It works the same. But instead of onTap(), it has so many other events.

About Philomathes Jigyasu

Philomathes (pronounced as fillo-MAY-thus) is a fictional character at VAYUZ (https://www.vayuz.com), who is on a never ending journey called “LEARNING”. In a way, Philomathes embodies VAYUZ - Way of life, which is if you are not learning then you are not breathing. The word Philomathes, comes from the Greek roots philo and philein meaning "to love" and the Greek roots mathos (MAH-thos) and mathesis (muh-THAYSIS) meaning “learning”. Philomathes through his Blogs and Vlogs (Video Blogs) will share his experience, learnings and thoughts. In his tryst to learn and understand, he would also seek answers to questions. So if you would like to join him in this incredible journey called “ life” then feel free to write to him on philomathes.jigyasu@vayuz.com. Always remember, knowledge is all around us, we just need to keep our guards down and senses on.

Leave a Comment