Elevated Button in Flutter

Introduction

ElevatedButton is one of the most commonly used button widgets in Flutter. It is a material design button that is elevated from the surface, making it prominent and visually appealing. Here you will learn how to use elevated buttons with real-world examples.

Example 1: Simple ElevatedButton

In this example below, you will learn to create a simple button with text using the ElevatedButton widget.

ElevatedButton(
  onPressed: () {},
  child: Text('Press Me'),
)

Example 2: ElevatedButton With Icon

In this example below, you will learn to create a button with an icon using the ElevatedButton widget.

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Add Item'),
)

Example 3: Custom Color and TextStyle

In this example below, you will learn to create a button with custom color and text style using the ElevatedButton widget.

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    backgroundColor: MaterialStateProperty.all(Colors.green),
    textStyle: MaterialStateProperty.all(
      TextStyle(fontSize: 20),
    ),
  ),
  child: Text('Custom Style'),
)

Example 4: Rounded Corners ElevatedButton

In this example below, you will learn to create a button with rounded corners using the ElevatedButton widget.

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    shape: MaterialStateProperty.all<RoundedRectangleBorder>(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(18.0),
      ),
    ),
  ),
  child: Text('Rounded Corners'),
)

Example 5: Adjusting Shadow and Elevation

In this example below, you will learn to create a button with shadow and elevation using the ElevatedButton widget.

ElevatedButton(
  onPressed: () {},
  style: ButtonStyle(
    elevation: MaterialStateProperty.all(10),
  ),
  child: Text('Shadow and Elevation'),
)

Example 6: Disabled ElevatedButton

In this example below, you will learn to create a disabled button using the ElevatedButton widget.

ElevatedButton(
  onPressed: null,
  child: Text('Disabled Button'),
)

Challenge

Construct an ElevatedButton that changes its text from “Click Me” to “Clicked” upon being pressed. Additionally, the button should display a snackbar with the message “Button Pressed” when clicked.