How many types of buttons and clickable widgets in the Flutter?

MorUde Frrr - (Fly Or Not)

A beautiful Flutter game in iOS and Android 

Hello people, We can not imagine any language that has not click event because without click it's very hard to trigger any actions. So here in Flutter we are talking about some buttons and clickable widgets very quickly in the Flutter. Here we are not going to explain deeply because it's enough to understanding about new widgets. Deeply and clear explanation already you will be found on official document of Flutter. 



1) FlatButton

-> Simple button that has not much highlighted decoration, Mostly use on toolbar, dialog and etc. For more info to usage, check out official document.
-> FlatButton has two required property child and onPressed() Lets look at below example.

        FlatButton(
          child: Text('I am FlatButton'),
          onPressed: (){
            print('You tapped on FlatButton');
          },
        ),

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

Below are more property of FlatButton widget.

    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,

You can play with above properties. You can also 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.

2) RaisedButton

-> It's material button same like flatButton but it has elevation that will increase when it pressed.

-> Do not used with Widgets that has already raise-content like dialog, card etc. Use with flat content like long list, wide range of widget

-> For more info to usage, check out official document.

        RaisedButton(
          child: Text('I am RaisedButton'),
          onPressed: (){
            print('You tapped on RaisedButton');
          },
        ),

For know more property of RaisedButton you can see by above short-cut that I mentioned above.

If you want to display icon+text with FlatButton and RaisedButton you can do it by FlatButton.icon() and RaisedButton.icon()






3) FloatingActionButton

-> Simple circular icon with hover, mostly single per screen.
-> Display on screen for trigger positive action like, add, share or navigate to screen and etc.
-> Use child as Icon widget, not any rule you can also use whatever
-> Mostly use with Scaffold widget that has property name is floatingActionButton 
-> For more info to usage, check out official document.

        FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: (){
            print('You tapped on FloatingActionButton');
          },
        ),

-> If you want to change default behaviour of FloatingActionButton means icon+text simply use FloatingActionButton.extended() it has two require property label and icon here child will removed which help you to display icon with text by FloatingActionButton. Look at below example 

        FloatingActionButton.extended(
          icon: Icon(Icons.add),        
         label: Text('I am Extended'),
          onPressed: (){
print('You tapped on FloatingActionButton');
          },
        ),







For know more property of FloatingActionButton you can see by above short-cut that I mentioned above.

4) IconButton

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

-> For more info to usage, check out official document.

IconButton(
    icon: Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () { print('Volume button clicked');},
);

About it's properties you can same like other buttons. Also you can find BackButton and CloseButton is type of IconButton you can find out more information by check-out links.
I'm thinking that's enough for button's and click. I know about DropdownButton and PopupMenuButton but I'll explain it later.


But apart of buttons there are some widgets that uses for trigger click event. For example If you have some text and you want this text should be worked as clickable text. You may have seen clickable text in so many applications or websites that has clickable text. For clickable text use InkWell widget and there is no any rules like InkWell widget only use in case of clickable text but you can make any widget as clickable by InkWell widget.

     Another Widget is also trigger clickable event, name is GestureDetector, It is very powerful widget there are so many clickable event like, singleTap, doubleTap, tapUp, tapDown and etc. Let's look.






5) InkWell

-> A rectangle area of the material that response on touch.-> Simply you can wrap it to any material widget so that will be clickable.
-> Below Ex. we made simple text work as link.

  InkWell(
   onTap: () {
     print('Clicked on URL by InkWell Widget');
   },
   child: Text("https://quickstartflutterdart.blogspot.in/",
       style: TextStyle(
         color: Colors.blue,
         fontSize: 13,
         decoration: TextDecoration.underline)),
    );

Just copy and pasted above code on your editor. You can see in console when click on url link.

-> Simple and short when any material widget that you want to make it as clickable at that time use InkWell widget that's it.

-> For more information you can check official document.

6) GestureDetector

-> It's work same like InkWell widget but it has more powerful click events.
-> It has many click/drag and other events.
-> Look at below Ex. We used same code as above just change widget InkWell to GestureDetector.

GestureDetector(
      onTap: () {
        print('Clicked on URL by GestureDetector Widget');
      },
      child: Text("https://quickstartflutterdart.blogspot.in/", 
        style: TextStyle(
        color: Colors.blue, 
        fontSize: 13,
        decoration: TextDecoration.underline)
      ),
    );

-> It works same. But instead of onTap() it has so many other event.

this.child,
this.onTapDown,
this.onTapUp,
this.onTap,
this.onTapCancel,
this.onDoubleTap,
this.onLongPress,
this.onLongPressUp,
this.onVerticalDragDown,
this.onVerticalDragStart,
this.onVerticalDragUpdate,
this.onVerticalDragEnd,
this.onVerticalDragCancel,
this.onHorizontalDragDown,
this.onHorizontalDragStart,
this.onHorizontalDragUpdate,
this.onHorizontalDragEnd,
this.onHorizontalDragCancel,
this.onForcePressStart,
this.onForcePressPeak,
this.onForcePressUpdate,
this.onForcePressEnd,
this.onPanDown,
this.onPanStart,
this.onPanUpdate,
this.onPanEnd,
this.onPanCancel,
this.onScaleStart,
this.onScaleUpdate,
this.onScaleEnd,
this.behavior,
this.excludeFromSemantics = false

You can check it by trick that I mentioned before. If you want more info about this widget simple check it out official document.


That's it! I think, this is enough for quick learning bout button and other clickable widget.

Thank's for reading/support.