Flutter Buttons Type (Elevated Button, OutlinedButton, TextButton etc)

Flutter development is becoming popular and more popular every day, due to its wide range of customisation, custom widgets, and very easy-to-implement approach. Today we will learn about flutter button types, and how we can make different type of buttons in flutter.

This Flutter different type of buttons example will teach you about the different type of buttons available in flutter, as per our need we can choose from. We will see some customisation and some default settings of every button. In past few months flutter had added some new type and removed some old flutter buttons.

What we will get in output?

flutter-buttons-type-flutter-fumes

Required Dependencies

No thirdparty dependencies needed.

Let’s start step by step implementation so that we can understand what is need to be done to achieve the desired output.

In this class we will create different type of buttons available in flutter, all buttons are the part of flutter own library. We we see all flutter button types implementation one by one. So that you can learn easily.

You can also read about

Flutter Custom Radio Button with Custom Shapes

Elevated Button With Icon

Elevated button is very easy to use, it have a widget type label property where you can set the label of of button, and also have elevation(shadow) by default. It have a property style which is used to styling the button like change the color, change shape, border etc.

If you want to set icon before Title then there is a simple way to do this, ElevatedButton.icon and it will ask to set an icon, pass the icon widget with icondata and your icon button is ready. Have a look.

ElevatedButton.icon(
                icon: const Icon(Icons.thumb_up),
                label: const Text("Like"),
                onPressed: () => Fluttertoast.showToast(
                    msg: 'I am elevated button with icon'),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(32.0),
                  ),
                ),
              ),
2. Elevated Button With Stadium Border

Stadium Border is very use full when you want to make left and right side complete round, it looks similar to Flutter Chip widget. Stadium Border is shape so it can used in any widget that have shape property like, we can user it in Container, OutlineButton etc. It will give a nice and clean look to your widget without setting any radius.

ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am outlined button with stadium border');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
              ),

3. Elevated Button With Border Radius

If you need to set border radius to your widget then you can use this piece of code given below.

ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am circle elevated button with border radius');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12), // <-- Radius
                  ),
                ),
              ),

4. Elevated Circle Button

ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am circle elevated button');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
              ),

5. Outline Button with Stadium Border

OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am outlined button with stadium border');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: const StadiumBorder(),
                ),
              ),

6. Outline Circle Button

OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am circle outlined button');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
              ),

7. Outline Beveled Rectangle Button


OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg:
                          'I am outlined button with Beveled Rectangle Border');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: BeveledRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
8. Outline Button With Icon
OutlinedButton.icon(
                icon: const Icon(Icons.star_outline),
                label: const Text("Outlined Button"),
                onPressed: () => Fluttertoast.showToast(
                    msg: 'I am outlined button with icon'),
                style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 2.0, color: Colors.blue),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(32.0),
                  ),
                ),
              ),

9. Text Button

TextButton(
                child: const Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('Text Button',
                      style: TextStyle(
                          color: Colors.teal,
                          fontSize: 14,
                          fontWeight: FontWeight.w500)),
                ),
                style: TextButton.styleFrom(
                  primary: Colors.teal,
                  onSurface: Colors.yellow,
                  side: const BorderSide(color: Colors.teal, width: 2),
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(25))),
                ),
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am text button');
                },
              ),

10. Flat Button (Deprecated)

FlatButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am old flat button');
                },
                child: const Text('Stadium Border'),
                shape: const StadiumBorder(),
                color: Colors.pink,
                textColor: Colors.white,
              ),

11. Icon Button

IconButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am icon button');
                },
                icon: const Icon(Icons.shopping_cart),
                color: Colors.redAccent,
              ),

12. Floating Action Button

FloatingActionButton(
        onPressed: () {
          Fluttertoast.showToast(msg: 'Hello I am floating action button');
        },
        tooltip: 'Float Action Button',
        child: const Icon(Icons.add),
      )

13. Custom Button

SizedBox(
                height: 50.0,
                child: GestureDetector(
                  onTap: () {
                    Fluttertoast.showToast(msg: 'I am custom button');
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: const Color(0xFFF05A22),
                        style: BorderStyle.solid,
                        width: 1.0,
                      ),
                      color: Colors.transparent,
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const <Widget>[
                        Center(
                          child: Text(
                            "BUTTON",
                            style: TextStyle(
                              color: Color(0xFFF05A22),
                              fontFamily: 'Montserrat',
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                              letterSpacing: 1,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),

Here is the full code in one shot

import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

 
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

// ignore: slash_for_doc_comments
/**
    Deprecated    -->   Recommended

    RaisedButton  -->   ElevatedButton
    OutlineButton -->   OutlinedButton
    FlatButton    -->   TextButton

 **/
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
    
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Center(
       
          child: Column(
            children: [
              const Padding(
                padding: EdgeInsets.all(20.0),
                child: Text(
                  'Here are some commonly used buttons',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              ElevatedButton.icon(
                icon: const Icon(Icons.thumb_up),
                label: const Text("Like"),
                onPressed: () => Fluttertoast.showToast(
                    msg: 'I am elevated button with icon'),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(32.0),
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am outlined button with stadium border');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(shape: const StadiumBorder()),
              ),
              ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am circle elevated button with border radius');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12), // <-- Radius
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am circle elevated button');
                },
                child: const Text('Button'),
                style: ElevatedButton.styleFrom(
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
              ),
              OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg: 'I am outlined button with stadium border');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: const StadiumBorder(),
                ),
              ),
              OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am circle outlined button');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: const CircleBorder(),
                  padding: const EdgeInsets.all(24),
                ),
              ),
              OutlinedButton(
                onPressed: () {
                  Fluttertoast.showToast(
                      msg:
                          'I am outlined button with Beveled Rectangle Border');
                },
                child: const Text('Button'),
                style: OutlinedButton.styleFrom(
                  shape: BeveledRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                ),
              ),
              OutlinedButton.icon(
                icon: const Icon(Icons.star_outline),
                label: const Text("Outlined Button"),
                onPressed: () => Fluttertoast.showToast(
                    msg: 'I am outlined button with icon'),
                style: ElevatedButton.styleFrom(
                  side: const BorderSide(width: 2.0, color: Colors.blue),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(32.0),
                  ),
                ),
              ),
              TextButton(
                child: const Padding(
                  padding: EdgeInsets.only(left: 10.0, right: 10.0),
                  child: Text('Text Button',
                      style: TextStyle(
                          color: Colors.teal,
                          fontSize: 14,
                          fontWeight: FontWeight.w500)),
                ),
                style: TextButton.styleFrom(
                  primary: Colors.teal,
                  onSurface: Colors.yellow,
                  side: const BorderSide(color: Colors.teal, width: 2),
                  shape: const RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(Radius.circular(25))),
                ),
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am text button');
                },
              ),
              FlatButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am old flat button');
                },
                child: const Text('Stadium Border'),
                shape: const StadiumBorder(),
                color: Colors.pink,
                textColor: Colors.white,
              ),
              SizedBox(
                height: 50.0,
                child: GestureDetector(
                  onTap: () {
                    Fluttertoast.showToast(msg: 'I am custom button');
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: const Color(0xFFF05A22),
                        style: BorderStyle.solid,
                        width: 1.0,
                      ),
                      color: Colors.transparent,
                      borderRadius: BorderRadius.circular(30.0),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: const <Widget>[
                        Center(
                          child: Text(
                            "BUTTON",
                            style: TextStyle(
                              color: Color(0xFFF05A22),
                              fontFamily: 'Montserrat',
                              fontSize: 16,
                              fontWeight: FontWeight.w600,
                              letterSpacing: 1,
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              IconButton(
                onPressed: () {
                  Fluttertoast.showToast(msg: 'I am icon button');
                },
                icon: const Icon(Icons.shopping_cart),
                color: Colors.redAccent,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Fluttertoast.showToast(msg: 'Hello I am floating action button');
        },
        tooltip: 'Float Action Button',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

If you have any query feel free to ask.

Also, check out the

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates