Elevated and Material Buttons in Flutter

Buttons are crucial in interactive user interfaces. Flutter provides various button types, among which ElevatedButton and MaterialButton are widely used. This guide will help beginners understand these buttons in detail, with examples and best practices.

1. ElevatedButton

Overview

ElevatedButton is a material design button that adds elevation (a shadow effect) by default, making it stand out against flat UI elements. It’s ideal for primary actions requiring user attention.

Key Features

• Raised appearance with elevation.
• Automatically adjusts for light and dark themes.
• Highly customizable for style and behavior.

Basic Syntax

ElevatedButton(
  onPressed: () {
    print('Button Pressed');
  },
  child: Text('Click Me'),
)

Properties

• onPressed: Specifies the callback when the button is tapped. If null, the button is disabled.
• child: The content inside the button, usually a Text or Icon.
• style: Allows customization of the button’s appearance, such as background color, text style, shape, and padding.

Example: Custom ElevatedButton

ElevatedButton(
  onPressed: () {
    print('Custom ElevatedButton Pressed');
  },
  child: Text('Submit'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // Button background color
    onPrimary: Colors.white, // Text color
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12), // Rounded edges
    ),
  ),
)

2. MaterialButton

Overview

MaterialButton is a more generic and flexible button in Flutter. Unlike ElevatedButton, it does not have a predefined appearance, making it suitable for custom designs. However, it's less commonly used since newer widgets like ElevatedButton offer better support for Material Design guidelines.

Key Features

• Highly customizable, from its layout to behavior.
• No default style or elevation.
• Requires more manual styling compared to ElevatedButton.

Basic Syntax

MaterialButton(
  onPressed: () {
    print('MaterialButton Pressed');
  },
  child: Text('Click Me'),
  color: Colors.blue, // Button background color
  textColor: Colors.white, // Button text color
  padding: EdgeInsets.all(16), // Padding inside the button
)

Properties

• onPressed: Action triggered on button tap.
• child: The widget displayed inside the button.
• color: Background color of the button.
• textColor: Text color of the button.
• elevation: Adds shadow effect (optional).
• shape: Defines the shape of the button (e.g., rounded corners).

Example: Custom MaterialButton

MaterialButton(
  onPressed: () {
    print('Custom MaterialButton Pressed');
  },
  child: Text('Custom Button'),
  color: Colors.green,
  textColor: Colors.white,
  padding: EdgeInsets.symmetric(horizontal: 30, vertical: 10),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8),
  ),
)

ElevatedButton vs. MaterialButton

When to Use

• Use ElevatedButton:
  • For primary actions that need prominence.
  • When adhering to Material Design guidelines.
  • When you need a quick, pre-styled button.
• Use MaterialButton:
  • For custom button designs.
  • When you need more control over the appearance.
  • For creative or unique UI requirements.

Best Practices

1. Purpose: Choose ElevatedButton for standard actions and MaterialButton for custom designs.
2. Accessibility: Ensure buttons are easy to tap and have clear labels.
3. Feedback: Use visual cues (e.g., change color or add animation) to indicate button interaction.
4. Consistency: Maintain a uniform button style throughout your app.

By mastering ElevatedButton and MaterialButton, you can build interactive and visually appealing Flutter apps. Experiment with these widgets to find the perfect fit for your design and user experience goals!