Flutter Button Widget | RRTutors

Flutter Buttons

We can’t imagine a programming language without click events. Similarly other languages flutter provided buttons to handle click events.

We have different types of buttons in flutter

  • FlatButton
  • RaisedButton
  • IconButton
  • OutlineButton
  • DropdownButton
  • BackButton
  • CloseButton
  • FloatingActionButton
  • MaterialButton


All these buttons click event is handled by onPressed()


onPressed: (){



FlatButton : This type of button doesn't have any border, When we click on it it will show press effect 

RaisedButton : When we need to show some decoration we can use this button

IconButton : It is a material button, Flashes background circle when clicked on

OutlineButton : A bordered button whose elevation increases and

whose background becomes opaque when the

button is pressed

DropDownButton : It is a Material widget, Which is used for selecting from a list of items

It similar to Spinner in Android

CloseButton : An IconButton setup for use as a close button to

close modals (or any other closeable content).

Flashes background circle when clicked on

FloatingActionButton: It is a Material widget button, A button that hovers in a layer above content


Button Examples


class ButtonWidget extends StatefulWidget{


    State<StatefulWidget> createState() {

        // TODO: implement createState

        return ButtonsWidgetState();



class ButtonsWidgetState extends State<ButtonWidget>{

    var selected_item="Please choose a location";


            "Please choose a location",

            "Item One",

            "Item Two",

            "Item Three",

            "Item Four",



    Widget build(BuildContext context) {

        // TODO: implement build

        return MaterialApp(

                home: SafeArea(child: Scaffold(

                appBar: AppBar(title: Text("Buttons"),backgroundColor: Colors.pink,),

        body: Container(

                child: Center(

                child: Column(

                children: <Widget>[

        FlatButton(onPressed: (){

            debugPrint('Button Clicked ');

        }, child: Text("Flat Button")),

        RaisedButton(onPressed: (){

            debugPrint('Button Clicked ');

        },child: Text("Raised Button"),),

        OutlineButton(onPressed: (){

            debugPrint('Button Clicked ');

        },child: Text("Outline Button"),highlightedBorderColor: Colors.pink,),

        IconButton(onPressed: (){

            debugPrint('Button Clicked ');

        },icon: Icon(Icons.add),color: Colors.pink,),



        return DropdownMenuItem(child: Text(value),value: value);


                hint: Text("Please choose a location"),

                value: selected_item,

                onChanged: (value){


        setState(() {


        debugPrint('Changed: ${value}');



        BackButton(onPressed: (){

            debugPrint('Button Clicked ');

        },color: Colors.pink,),


                FloatingActionButton(onPressed: (){

            debugPrint('Button Clicked ');

        }, child: Icon(Icons.search),backgroundColor: Colors.pink,)









Flutter Buttons


Flutter Custom Buttons - How to create Custom Buttons

Flutter Radio Button - How to create Group radio Buttons in Flutter?

Flutter - How to remove back button from appbar