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,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    MaterialStatesController? statesController
    required Widget? child,
  })

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

Basic Usage

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

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

Output:

Handling Long Press

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? foregroundColor: Foreground color when enabled.
• Color? backgroundColor: Background color when enabled.
• Color? disabledForegroundColor: Foreground color when disabled.
• Color? disabledBackgroundColor: Background color when disabled.
• Color? shadowColor: The shadow color of the button.
• Color? surfaceTintColor: The color of the surface tint.
• double? elevation: The elevation of the button.
• 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.
• Size? fixedSize: The size of the button.
• Size? maximumSize: The maximum size of the button.
• BorderSide? side: The outline of the button.
• OutlinedBorder? shape: The shape of the button.
• MouseCursor? enabledMouseCursor: The mouse cursor when enabled.
• MouseCursor? disabledMouseCursor: The mouse cursor when disabled.
• VisualDensity? visualDensity: How compact is the button's layout.
• MaterialTapTargetSize? tapTargetSize: yyy.
• Duration? animationDuration: The minimum size of the area within which the button can be pressed.
• bool? enableFeedback: Whether to enable acoustic and/or haptic feedback.
• AlignmentGeometry? alignment: The alignment of the child.
• InteractiveInkFeatureFactory? splashFactory: InkWell splash factory for showing ink splashes when tapped.

Using ElevatedButton.icon

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,
    ValueChanged<bool>? onHover,
    ValueChanged<bool>? onFocusChange,
    ButtonStyle? style,
    FocusNode? focusNode,
    bool? autofocus,
    Clip? clipBehavior,
    MaterialStatesController? statesController,
    required Widget icon,
    required Widget label,
  })

The example of using ElevatedButton.icon is shown below.

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

Output:

ElevatedButton Parameters

• 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.
• ValueChanged<bool>? onHover: The callback to be called when a pointer enters or exists the button area.
• ValueChanged<bool>? onFocusChange: The callback to be called when the focus changes.
• 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.
• MaterialStatesController? statesController: Represents the MaterialState of the widget.
• Widget? child: The button content.

ElevatedButton.icon Parameters

• 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.
• ValueChanged<bool>? onHover: The callback to be called when a pointer enters or exists the button area.
• ValueChanged<bool>? onFocusChange: The callback to be called when the focus changes.
• 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.
• MaterialStatesController? statesController: Represents the MaterialState of the widget.
• required Widget icon: Widget to be set as the icon.
• required Widget label: Widget to be set as the label.

You can also read about:

• OutlinedButton, a button with an outlined border.
• TextButton, a standard button without outlined border and elevation change.
• FilledButton, a button used for an important, final action.