Button

.....................................................................................................................................................................................................................................
Example:#1

As per Material Components Widgets Document below are the types of Button.

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

.....................................................................................................................................................................................................................................
Example:#2[FlatButton, RaisedButton]

Raised button have a little bit shadow, there is no difference between each others

1.  FlatButton

Simple button that has not much highlighted decoration.

- Mostly use on toolbar, dialog and etc.

- FlatButton has two required property child and onPressed() Lets look at below example.

- it is a text label button that does not have much decoration and displayed without any elevation.

        FlatButton(

          child: Text('I am FlatButton'),

          onPressed: (){

            print('You tapped on FlatButton');

          },

        )

  

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
          child: FlatButton.icon(
            onPressed: (){},
            textColor: Colors.white,
            color: Colors.orange,
            icon: Icon(Icons.payment),
            label: Text('Make Payment'),
          ),
        )

    );
  }
}

.....................................................................................................................................................................................................................................
Example:#3[Button Bar]

import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
       children: <Widget>[
         SizedBox(height: 100),
         Container(
           child: ButtonBar(
             children: <Widget>[
               FlatButton(
                 onPressed: (){},
                 color: Colors.red,
                 child: Row(
                   children: <Widget>[
                     Text('Hello'),
                     Icon(Icons.dashboard)
                   ],
                 ),
               )
             ],
           ),
         )
       ],
      ),
    );
  }
}

.....................................................................................................................................................................................................................................
Example:#4 [inkWell]

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.

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)),

    );

.....................................................................................................................................................................................................................................
Example:#5 [GestureDector]

1. It’s work same like InkWell widget but it has more powerful click events.

2. It has many click/drag and other events.

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)

      ),

    );

.....................................................................................................................................................................................................................................

Example:#5 [ Floating Action Button ]

A FAB button is a circular icon button that triggers the primary action in our application.

There are two types of Floating Action Button 

FloatingActionButton: It creates a simple circular floating button with a child widget inside it. It must have a child parameter to display a widget.

FloatingActionButton.extended: It creates a wide floating button along with an icon and a label inside it. Instead of a child, it uses labels and icon parameters.

      floatingActionButton: FloatingActionButton(  

        child: Icon(Icons.navigation),  

        backgroundColor: Colors.green,  

        foregroundColor: Colors.white,  

        onPressed: () => {},  

      ),  

      floatingActionButton:FloatingActionButton.extended(  

        onPressed: () {},  

        icon: Icon(Icons.save),  

        label: Text("Save"),  

      ), 

    ),  

    );