Working with ElevatedButton in Flutter (2021)

Most mobile and web applications have buttons that allow users to press to interact with. In Flutter, you can use the ElevatedButton widget to create elevated buttons.

ElevatedButton is the replacement for RaisedButton which is obsolete.

Note: To use ElevatedButton without warnings or errors, you should update to Flutter 1.22.0 or a higher version. The simplest way to do that is to run this command: flutter upgrade. The code snippets in this article were recently updated to work properly with the latest version of Flutter (2.5.2+). That’s why you will notice a lot of const keywords.

This tutorial will guide you through implementing elevated buttons as well as styling them.

What is an ElevatedButton in Flutter?

An ElevatedButton is a labeled child displayed on a Material widget whose Material.elevation increases when the button is pressed. The label’s Text and Icon widgets are displayed in style’s ButtonStyle.foregroundColor and the button’s filled background is the ButtonStyle.backgroundColor.

Constructors

ElevatedButton:

ElevatedButton({
  Key? key, 
  required VoidCallback? onPressed, 
  VoidCallback? onLongPress, 
  ButtonStyle? style, 
  FocusNode? focusNode, 
  bool autofocus = false, 
  Clip clipBehavior = Clip.none, 
  required Widget? child
})

ElevatedButton with icon:

ElevatedButton.icon({
  Key key, 
  @required VoidCallback onPressed, 
  VoidCallback onLongPress, 
  ButtonStyle style, 
  FocusNode focusNode, 
  bool autofocus, 
  Clip clipBehavior, 
  @required Widget icon, 
  @required Widget label
})

Basic example:

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Kindacode.com'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(children: [
            ElevatedButton(onPressed: () {}, child: const Text('I gotta pee')),
            ElevatedButton.icon(
              onPressed: () {},
              label: const Text('Plus One'),
              icon: const Icon(Icons.plus_one),
            )
          ]),
        ));
  }
}

Output:

Enable/Disable

To disable an ElevatedButton, just set the onPressed parameter to null. To enable an ElevatedButton, set the onPressed parameter to a void function.

Example:

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            // An enabled button
            ElevatedButton(
              child: const Text('Enabled Button'),
              onPressed: () {},
            ),

            // A disabled button
            const ElevatedButton(
                onPressed: null, child: Text('Disabled Button'))
          ],
        ),
      ),
    );
  }
}

Output:

Style (Color, Border, Elevation…)

You can style ElevatedButton by using the styleFrom static method or the ButtonStyle class. The first one is more convenient than the second one.

Using styleFrom to style an ElevatedButton:

ElevatedButton(
      child: Text('Button'),
      onPressed: () {},
      styleFrom({
          Color? primary, // Use this to set the background color
          Color? onPrimary, 
          Color? onSurface, 
          Color? shadowColor, 
          double? elevation, 
          TextStyle? textStyle, 
          EdgeInsetsGeometry? padding, 
          Size? minimumSize, 
          Size? fixedSize, // Use this for sizing the button
          BorderSide? side, 
          OutlinedBorder? shape, // Button shape
          MouseCursor? enabledMouseCursor, 
          MouseCursor? disabledMouseCursor, 
          VisualDensity? visualDensity, 
          MaterialTapTargetSize? tapTargetSize, 
          Duration? animationDuration, 
          bool? enableFeedback, 
          AlignmentGeometry? alignment, 
          InteractiveInkFeatureFactory? splashFactory
      })
),

Example:

ElevatedButton(
          child: const Text('Button'),
          onPressed: () {},
          style: ElevatedButton.styleFrom(
              primary: Colors.purple,
              padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
              textStyle:
                  const TextStyle(fontSize: 30, fontWeight: FontWeight.bold)),
        ),

Output:

Using ButtonStyle to style an ElevatedButton:

ButtonStyle({
  MaterialStateProperty<TextStyle?>? textStyle, 
  MaterialStateProperty<Color?>? backgroundColor, 
  MaterialStateProperty<Color?>? foregroundColor, 
  MaterialStateProperty<Color?>? overlayColor, 
  MaterialStateProperty<Color?>? shadowColor, 
  MaterialStateProperty<double?>? elevation, 
  MaterialStateProperty<EdgeInsetsGeometry?>? padding, 
  MaterialStateProperty<Size?>? minimumSize, 
  MaterialStateProperty<Size?>? fixedSize, 
  MaterialStateProperty<BorderSide?>? side, 
  MaterialStateProperty<OutlinedBorder?>? shape, 
  MaterialStateProperty<MouseCursor?>? mouseCursor, 
  VisualDensity? visualDensity, 
  MaterialTapTargetSize? tapTargetSize, 
  Duration? animationDuration, 
  bool? enableFeedback, 
  AlignmentGeometry? alignment, 
  InteractiveInkFeatureFactory? splashFactory
})

Example:

ElevatedButton(
          child: const Text('Button'),
          onPressed: () {},
          style: ButtonStyle(
              backgroundColor: MaterialStateProperty.all(Colors.red),
              padding: MaterialStateProperty.all(const EdgeInsets.all(50)),
              textStyle:
                  MaterialStateProperty.all(const TextStyle(fontSize: 30))),
        ),

Output:

Width & Height

There are several ways to size an elevated button.

1. You can set the width and height for an elevated button exactly as you want by using the fixedSize parameter of the styleFrom static method like this:

 style: ElevatedButton.styleFrom(fixedSize: Size([width], [height])),

This code creates an elevated button with a width of 240 and a height of 80:

ElevatedButton(
          onPressed: () {},
          child: const Text('240 x 80'),
          style: ElevatedButton.styleFrom(
              fixedSize: const Size(240, 80), primary: Colors.deepOrange),
        ),

Output:

2. You can also set the width and height for an elevated button by wrapping it inside a ConstrainedBox widget.

The following sample code shows you how to make an elevated button with the size of 300 x 200:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('KindaCode.com'),
      ),
      body: Center(
        child: ConstrainedBox(
          constraints: const BoxConstraints.tightFor(width: 300, height: 200),
          child: ElevatedButton(
            child: const Text('300 x 200'),
            onPressed: () {},
          ),
        ),
      ),
    );
  }

Output:

You can learn more about ConstrainedBox in this article: Flutter ConstrainedBox – Tutorial and Examples.

Button Shape

You can custom the shape of an elevated button by using the shape parameter of the styleFrom method.

Example:

ElevatedButton(
          onPressed: () {},
          child: const Text('Kindacode.com'),
          style: ElevatedButton.styleFrom(
              primary: Colors.pink,
              fixedSize: const Size(300, 100),
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(50))),
        ),

Output:

You can find more details about shaping a button in Flutter by having a glance at the following guides:

• How to make Circular Buttons in Flutter
• Implementing rounded buttons in Flutter

ElevatedButton Theme

You can use ElevatedButtonTheme classes to set the look and behavior of descendant elevated buttons. This helps you set the look and behavior of multiple elevated buttons at a time.

Example:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // Remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'Kindacode.com',
        theme: ThemeData(
            primarySwatch: Colors.green,
            elevatedButtonTheme: ElevatedButtonThemeData(
                style: ElevatedButton.styleFrom(
                    primary: Colors.red,
                    padding: const EdgeInsets.symmetric(
                        vertical: 10, horizontal: 30),
                    textStyle: const TextStyle(
                      fontStyle: FontStyle.italic,
                      fontSize: 24,
                    )))),
        home: const HomePage());
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ElevatedButton(onPressed: () {}, child: const Text('Button 1')),
            const SizedBox(
              height: 30,
            ),
            ElevatedButton.icon(
                onPressed: () {},
                icon: const Icon(Icons.play_arrow),
                label: const Text('Play Video'))
          ],
        ),
      ),
    );
  }
}

Output:

Note that these settings can be overridden if you style each button individually as we did in the above sections.

Another Example

Preview:

Only ElevatedButton code:

ElevatedButton(
            style: ElevatedButton.styleFrom(
              // background color
              primary: Colors.orange,
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
              textStyle: const TextStyle(fontSize: 20),
            ),
            child: const Text('I am a button'),
            onPressed: () {
              debugPrint('Button clicked!');
            },
          ),

Full code in ./lib/main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Hide the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Example'),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: Column(children: [
          /// Here's the button
          ElevatedButton(
            style: ElevatedButton.styleFrom(
              // background color
              primary: Colors.orange,
              padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 15),
              textStyle: const TextStyle(fontSize: 20),
            ),
            child: const Text('I am a button'),
            onPressed: () {
              debugPrint('Button clicked!');
            },
          ),
        ]),
      ),
    );
  }
}

Conclusion

This tutorial went over the basics of working with the ElevatedButton class in Flutter. You also explored several examples of how to implement, style, set background color, change text color, set width and height, etc, for an ElevatedButton.

Continue learning more about Flutter by taking a look at the following tutorials:

• Examples of using ClipRRect in Flutter
• Flutter & SQLite: CRUD Example
• Using GetX (Get) for Navigation and Routing in Flutter
• Flutter and Firestore Database: CRUD example (null safety)
• Flutter StreamBuilder examples (null safety)
• Working with TextButton in Flutter
• Example of sortable DataTable in Flutter
• Write a simple BMI Calculator with Flutter.

You can also check out our Flutter topic page or Dart topic page for the latest tutorials and examples.