Elevated Button Flutter: What It Is and How to Use It

In Flutter, an ElevatedButton is a clickable button widget that appears raised above the surface, giving a sense of depth. It is used to trigger actions and stands out visually by casting a shadow, making it easy for users to identify as tappable.

How It Works

The ElevatedButton widget in Flutter works like a physical button that is lifted above the screen surface. This raised effect is created by a shadow, which helps users recognize it as something they can tap or click. When you press the button, it shows a ripple effect to give feedback that the tap was registered.

Think of it like a real button on a keyboard or a doorbell that sticks out so you can easily find and press it. Flutter handles the look and feel automatically, so you just need to tell it what text or icon to show and what to do when the button is pressed.

Example

This example shows a simple ElevatedButton with a label and a print action when pressed.

dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('ElevatedButton Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button pressed!');
            },
            child: const Text('Press Me'),
          ),
        ),
      ),
    );
  }
}

Output

A screen with an app bar titled 'ElevatedButton Example' and a centered raised button labeled 'Press Me'. When tapped, 'Button pressed!' is printed in the console.

When to Use

Use ElevatedButton when you want a button that stands out on the screen and clearly invites the user to take an action. It is perfect for primary actions like submitting a form, confirming a choice, or starting a process.

For example, in a shopping app, you might use an ElevatedButton for the 'Buy Now' button because it needs to catch the user's attention. It works well on light or dark backgrounds because of its shadow and elevation.

Key Points

• ElevatedButton shows a raised button with shadow.
• It provides visual feedback when pressed.
• Use it for important or primary actions.
• Customizable with text, icons, colors, and styles.
• Part of Flutter's Material Design widgets.

Key Takeaways

ElevatedButton is a raised clickable button widget in Flutter that stands out with shadow.

It provides clear visual feedback when tapped, improving user experience.

Use ElevatedButton for primary actions that need user attention.

It is easy to customize with text, icons, and colors.

ElevatedButton follows Material Design principles for consistent UI.