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 higher versions. The simplest way to do that is to run this command: flutter upgrade

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

What is an ElevatedButton in Flutter?

An ElevatedButton is a label 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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Kindacode.com'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(25),
          child: Column(children: [
            ElevatedButton(onPressed: () {}, child: Text('I gotta pee')),
            ElevatedButton.icon(
              onPressed: () {},
              label: Text('Plus One'),
              icon: 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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Kindacode.com'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(25),
        child: Column(
          children: [
            // An enabled button
            ElevatedButton(
              child: Text('Enabled Button'),
              onPressed: () {},
            ),

            // A disabled button
            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 convenience than the second one.

Using styleFrom to style an ElevatedButton:

ElevatedButton(
      child: Text('Button'),
      onPressed: () {},
      style: ElevatedButton.styleFrom({
           Color primary, // set the background color 
           Color onPrimary, 
           Color onSurface, 
           Color shadowColor, 
           double elevation, 
           TextStyle textStyle, 
           EdgeInsetsGeometry padding, 
           Size minimumSize, 
           BorderSide side, 
           OutlinedBorder shape, 
           MouseCursor enabledMouseCursor, 
           MouseCursor disabledMouseCursor, 
           VisualDensity visualDensity, 
           MaterialTapTargetSize tapTargetSize, 
           Duration animationDuration, 
           bool enableFeedback
     }),
),

Example:

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

Output:

Using ButtonStyle to style an ElevatedButton:

style: 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<BorderSide> side, 
  MaterialStateProperty<OutlinedBorder> shape, 
  MaterialStateProperty<MouseCursor> mouseCursor,    
  VisualDensity visualDensity, 
  MaterialTapTargetSize tapTargetSize, 
  Duration animationDuration, 
  bool enableFeedback
})

Example:

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

Output:

Width & Height

You can set the width and height for an elevated button exactly as you want 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: Text('Kindacode.com'),
        ),
        body: Center(
          child: ConstrainedBox(
            constraints: BoxConstraints.tightFor(width: 300, height: 200),
            child: ElevatedButton(
              child: Text('300 x 200'),
              onPressed: () {},
            ),
          ),
        ));
  }

Output:

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

Another Example

Preview:

Only ElevatedButton code:

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

Full code in ./lib/main.dart:

import 'package:flutter/material.dart';

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Example'),
        backgroundColor: Colors.black,
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(children: [
          ////////////////////////
          /// Here's the button 
          ElevatedButton(
            style: ElevatedButton.styleFrom(
            // background color
            primary: Colors.orange,
            padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
            textStyle: TextStyle(fontSize: 20),
          ),
            child: Text('I am a button'),
            onPressed: () {
              print('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:

• How to make circle buttons in FLutter
• Examples of using ClipRRect in Flutter
• 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.