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{

    @override

    State<StatefulWidget> createState() {

        // TODO: implement createState

        return ButtonsWidgetState();

    }

}


class ButtonsWidgetState extends State<ButtonWidget>{

    var selected_item="Please choose a location";

    List<String>list=[

            "Please choose a location",

            "Item One",

            "Item Two",

            "Item Three",

            "Item Four",

            ];

    @override

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


        DropdownButton(


                items:list.map((value){

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

                 }).toList(),

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

                value: selected_item,

                onChanged: (value){

                selected_item=value;

        setState(() {

        });

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

                 },

               )

        BackButton(onPressed: (){

            debugPrint('Button Clicked ');

        },color: Colors.pink,),

        CloseButton(),

                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

 

Advertisements