×
×

Spread the love

Flutter Buttons

Buttons are material components in flutter which are used to trigger actions like submitting forms, making selections, etc in applications. Buttons are one of the most used components while designing an application. Flutter provides different types of buttons for different instances. For example text button for displaying text and an icon button for displaying an icon that is clickable. In addition to different buttons flutter also provides a wide range of features for styling and shaping the buttons.

In flutter, buttons are one of the most used flutter widgets in developing an application. In this tutorial, we will learn different types of buttons in flutter and how to use them.

Types of Flutter Buttons

Different types of buttons in flutter are:

  • Flat Button
  • Raised Button
  • Outline Button
  • Text Button
  • Elevated Button
  • Outlined Button
  • Floating Action Button
  • Icon Button
  • Drop Down Button
  • Popup Menu Button

Lets see the buttons individually

Flutter FlatButton

In flutter, we will use FlatButton widget to display a simple button. FlatButton is just a text button, because it has no style and border. It has no elevation, button color and text color like raised button. The text color is black with no background by default.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Flat Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:FlatButton(
              child:Text("Button"),
              onPressed: () {
              },
            )
        ),
      )
    );
  }
}

Output:

flutter flatbutton example

Futter RaisedButton

Flutter RaisedButton is a material widget. It has an elevation which is a material property.By default the elevation value for RaisedButton is 2. Use raised buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces.

Note: Avoid using raised buttons on already-raised content such as dialogs or cards.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Raised Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:RaisedButton(
              child:Text("Button"),
              onPressed: () {},
            )
        ),
      )
    );
  }
}

Output:

flutter raisedbutton example

Flutter OutlineButton

In flutter, we will use OutlineButton to display a simple button. It is nothing but a FlatButton with outline border. An OutlineButton is a label (child) displayed on a (zero elevation) Material widget.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Raised Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:OutlineButton(
              child:Text("Button"),
              onPressed: () {},
            )
        ),
      )
    );
  }
}

Output:

flutter outline button example

Note : The FlatButton, RaisedButton and Outlinebutton are going to depricate. The new widgets to use instead of those buttons are TextButton, ElevatedButton and OutlinedButton respectively. To use these new widget in our projects we have to use latest flutter sdk release.

I’m using sdk version 1.22.1 at the time of writing this article.

Flutter TextButton

In flutter, we will use TextButton widget to display a simple button. A text button is a label (child) displayed on a (zero elevation) Material widget. We can style the label’s Text and Icon widgets using the style property of the individual widgets. The button reacts to touches by filling with the style’s ButtonStyle.backgroundColor.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Text Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:TextButton(
              child: Text("Button"),
              onPressed:() {

              },
            )
        ),
      )
    );
  }
}

Output:

flutter text button example

Flutter ElevatedButton

An elevated button is a label child displayed on a Material widget whose Material.elevation increases when the button is pressed. We can style the label’s Text and Icon widgets using the style property of the individual widgets.

Use elevated buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using elevated buttons on already-elevated content such as dialogs or cards.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Elevated Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:ElevatedButton(
              child: Text("Button"),
              onPressed:() {

              },
            )
        ),
      )
    );
  }
}

Output:

flutter elevated button example

Flutter OutlinedButton

An OutlinedButton is a label (child) displayed on a (zero elevation) Material widget. It is nothing but a TextButton with outline border.

We can style the label’s Text and Icon widgets using the style property of the individual widgets. The outline’s weight and color are defined by ButtonStyle.side. The button reacts to touches by filling with the style’s ButtonStyle.backgroundColor.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but they aren’t the primary action in an app.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Outlined Button"),
        ),
        body: Container(
            width:double.infinity ,
            padding: EdgeInsets.all(20),
            alignment: Alignment.topCenter,
            child:OutlinedButton(
              child: Text("Button"),
              onPressed:() {

              },
            )
        ),
      )
    );
  }
}

Output:

flutter outlined button example

Flutter FloatingActionButton

A floating action button is a circular icon button that hovers over content to promote a primary action in the application. We will use floating action buttons in the Scaffold.floatingActionButton field. The default position will be bottom right corner of the screen.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Floating Action Button"),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.save),
          backgroundColor: Colors.deepPurple,
          foregroundColor: Colors.white,
          onPressed: () {
            setState(() {

            });
          },
        ),
      )
    );
  }
}

Output:

flutter floating action button example

Flutter IconButton

An icon button is a picture printed on a Material widget that reacts to touches by filling with color (ink).

Generally we will use IconButtons in the AppBar.actions field, but we can use them in many other places as well.

If the onPressed callback is null, then the button will be disabled and will not react to touch.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.deepPurple,
          title: Text("Flutter Icon Button"),
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          alignment: Alignment.center,
          height: 50,
          child:IconButton(
            icon: Icon(Icons.play_arrow),
            onPressed: () {

            },
          ),
        ),
      )
    );
  }
}

Output:

flutter icon button example

Flutter DropdownButton

In flutter, dropdown button lets the user select from a number of items. The button shows the currently selected item as well as an arrow that opens a menu for selecting another item.

It is nothing but a dropdown list. We will use this to display a list of items to the user when clicked on it.

We have to use Stateful widget as dropdown button will have change in state based on the user selection.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
 
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() => _MyState();
}
class _MyState extends State<MyApp>
{
  int _value = 1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.green,
          title: Text("Flutter Dropdown Button Tutorial"),
        ),
        body:Container(
          padding: EdgeInsets.all(20),
          child:DropdownButton(
            value: _value,
            items: [
              DropdownMenuItem(
                child: Text("First Item"),
                value: 1,
              ),
              DropdownMenuItem(
                child: Text("Second Item"),
                value: 2,
              )
            ],
             
            onChanged: (int value) {
              setState(() {
                _value = value;
              });
            },
            hint:Text("Select item")
            ),
          )
        )
    );
  }
}

Output:

flutter dropdown button example

After Clicking

flutter dropdown button menu

Flutter Popup Menu Button

In flutter, popup menu button widget displays a menu when clicked/pressed. When we select an item the onSelected callback will invoke and the menu will dismiss. The value passed to onSelected is the value of the selected menu item.

The itemBuilder property is required which means without using it will throw an error.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.deepPurple,
            title: Text("Flutter Popup Menu Button"),
            actions: [
              PopupMenuButton(
                  itemBuilder: (context) => [
                    PopupMenuItem(
                      child: Text("First"),
                      value: 1,
                    ),
                    PopupMenuItem(
                      child: Text("Second"),
                      value: 2,
                    )
                  ]
              )
            ],
          ),
        )
    );
  }
}

Output:

flutter popup menu button example

After clicking the popup menu button

flutter popup menu

Flutter ButtonBar

In flutter, ButtonBar places the buttons horizontally according to the buttonPadding. The children are laid out in a Row with MainAxisAlignment.end. When the Directionality is TextDirection.ltr, the button bar’s children are right justified and the last child becomes the rightmost child. When the Directionality is TextDirection.rtl the children are left justified and the last child becomes the leftmost child.

Example:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}
class _MyState extends State<MyApp>
{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.deepPurple,
            title: Text("Flutter ButtonBar "),
          ),
          body: ButtonBar(
            children: [
              RaisedButton(
                child: Text("Yes"),
                textColor: Colors.white,
                color: Colors.deepPurple,
                onPressed: (){},
              ),
              RaisedButton(
                child: Text("No"),
                textColor: Colors.white,
                color: Colors.deepPurple,
                onPressed: (){},
              ),
            ],
          ),
        )
    );
  }
}

Output:

flutter buttonbar example

That’s all about different types of flutter buttons in detail. Let’s catch up with some other flutter tutorial. Have a great day!!

Do share, subscribe and like my facebook page if you find this post helpful. Thank you!!

Reference: Flutter Official Documentation


Spread the love

AUTHOR

Naresh Pradeep

Hey there! I am the founder of CodesInsider and android developer.I love to code and build apps.


Related Posts

Leave a Reply

Your email address will not be published.