Flutter - Using ElevatedButton Widget Examples

This tutorial gives you examples of how to use ElevatedButton widget in Flutter, from the basic usage, followed by how to customize the button.

Elevated Button is one of Material Design's buttons whose characteristic is the elevation increases when it's being pressed by the user. If you need to create a Material Design's Elevated Button in Flutter, you can use ElevatedButton widget. The widget has been available since Flutter 1.22.

Using ElevatedButton

You can create an ElevatedButton in Flutter by calling its constructor.

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

There are two required parameters. Of course you have to pass a Widget as child, typically a Text or an Icon. You're also required to pass onPressed callback which is called when the user presses the button.

If you want to create an elevated button with both Icon and Text widgets inside, a static factory method ElevatedButton.icon makes it easier for you. Instead of child, you need to pass a Widget for each of icon and label.

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

 

Basic Usage

The most basic usage only requires you to pass the required parameters

  ElevatedButton(
    child: Text('Woolha.com'),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

The example of using ElevatedButton.icon is shown below.

  ElevatedButton.icon(
    label: Text('Woolha.com'),
    icon: Icon(Icons.web),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

To delect when the user does long press on the button, you can pass another callback function as onLongPress.

  ElevatedButton(
    child: Text('Woolha.com'),
    onPressed: () {
      print('Pressed');
    },
    onLongPress: () {
      print('Long press');
    },
  )

You may also need to read about GestureDetector in Flutter in case you want to detect other type of gestures

 

Setting Button Style

The style of the button can be customized by creating a ButtonStyle. The ButtonStyle can be passed as ThemeData's elevatedButtonTheme or ElevatedButton's style.

To pass the ButtonStyle as theme data, you have to create an ElevatedButtonThemeData with the ButtonStyle passed as style parameter in the constructor. Then, pass the ElevatedButtonThemeData as elevatedButtonTheme in the constructor of ThemeData. Setting the style as theme data affects the style of all ElevatedButton widgets under the tree. The best practice for creating a ButtonStyle for an ElevatedButton is by using ElevatedButton.styleFrom.

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _ElevatedButtonExample(),
        theme: ThemeData(
          elevatedButtonTheme: ElevatedButtonThemeData(
            style: ElevatedButton.styleFrom(
              primary: Colors.purple,
            ),
          ),
        ),
      );
    }
  }
  
  class _ElevatedButtonExample extends StatelessWidget {
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Center(
          child: ElevatedButton(
            child: Text('Woolha.com'),
            onPressed: () {
              print('Pressed');
            },
          ),
        ),
      );
    }
  }

Output:

 

For defining a style for a specific button, you can pass ButtonStyle as style parameter in the constructor of ElevatedButton.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

If you define ButtonStyle on both ThemeData's elevatedButtonTheme and ElevatedButton's style, the most specific one which is the one defined as ElevatedButton's style will be chosen by Flutter.

What customizations can be created using ButtonStyle? Below are some of the examples.

Setting Colors

Though ElevatedButton.styleFrom is used to construct ButtonStyle, it doesn't have the same parameters as the constructor of ButtonStyle. ElevatedButton.styleFrom has its own logic to convert the passed properties into ButtonStyle's properties.

For setting the background color, you can pass a Color as primary. When the button is disabled, you can set another Color passed as onSurface. Those parameters are used to construct backgroundColor property of ButtonStyle, with the latter's opacity is set to 0.12.

For setting the color used for Text and Icon widgets inside the button, you can pass a Color as onPrimary. When the button is disabled, you can set another Color passed as onSurface. Those parameters are used to construct foregroundColor property of ButtonStyle, with the latter's opacity is set to 0.38.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      onSurface: Colors.grey,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Text Style

You can define a TextStyle specific for the button and pass it as textStyle. The color property of TextStyle may not affect the text color, but you can set the color of the text by passing primary as the parameter of ElevatedButton.styleFrom.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      textStyle: TextStyle(
          color: Colors.black,
          fontSize: 40,
          fontStyle: FontStyle.italic
      ),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Shadow and Elevation

The characteristic of Elevated Button is the elevation increases when it's on pressed state. It's also possible to set the initial elevation by passing elevation parameter. For this kind of button, the elevation is set to 0 if the button is disabled. An elevation increase of 2 will be applied if the state is hovered or focused, while pressing the button increases the elevation by 6.

When the elevation is above 0, the shadow becomes visible. Changing the shadow color can be done by setting shadowColor property.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      shadowColor: Colors.red,
      elevation: 5,
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Border

This button doesn't come with default border. If you want to show border, you can pass a BorderSide as side parameter.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      side: BorderSide(color: Colors.red, width: 5),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Setting Shape

Changing the button shape can be done by passing an OutlinedBorder as shape parameter. For example, you can pass a BeveledRectangleBorder.

  ElevatedButton(
    child: Text('Woolha.com'),
    style: ElevatedButton.styleFrom(
      primary: Colors.teal,
      onPrimary: Colors.white,
      shape: const BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(5))),
    ),
    onPressed: () {
      print('Pressed');
    },
  )

Output:

 

Below is the list of named parameters you can pass to ElevatedButton.styleFrom static method.

• Color primary: Used to construct ButtonStyle.backgroundColor.
• Color onPrimary: Used to construct ButtonStyle.foregroundColor and ButtonStyle.overlayColor.
• Color onSurface: Used to construct ButtonStyle.backgroundColor and ButtonStyle.foregroundColor when the button is disabled.
• Color shadowColor: The shadow color of the button's Material.
• double elevation: The elevation of the button's Material.
• TextStyle textStyle: The style for Text widget.
• EdgeInsetsGeometry padding: The padding between the button's boundary and its child..
• Size minimumSize: The minimum size of the button.
• BorderSide side:The color and weight of the button's outline.
• OutlinedBorder shape: The shape of the button's underlying Material.
• MouseCursor enabledMouseCursor: Defines the MouseCursor when the button is enabled. Used to construct ButtonStyle.mouseCursor.
• MouseCursor disabledMouseCursor: Defines the MouseCursor when the button is disabled. Used to construct ButtonStyle.mouseCursor.
• VisualDensity visualDensity: How compact the button's layout will be.
• MaterialTapTargetSize tapTargetSize: The minimum size of area where the button may be pressed..
• Duration animationDuration: The duration of animated changes for shape and elevation.
• bool enableFeedback: Whether detected gestures should provide acoustic and/or haptic feedback..

ElevatedButton Properties

• Key key: The widget's key, used to control if it should be replaced.
• VoidCallback onPressed *: The callback to be called when the button is tapped.
• VoidCallback onLongPress: The callback to be called when the button is long pressed.
• ButtonStyle style: Defines the style for the button.
• FocusNode focusNode: Focus node of the widget.
• bool autofocus: Whether this widget will be selected as initial focus. Defaults to false
• Clip clipBehavior: Defines how the content is clipped. Defaults to Clip.none.
• Widget child *: The button's label.

*: required

You can also read about:

• OutlinedButton, a button with an outlined border.
• TextButton, a standard button without outlined border and elevation change.