Creating Buttons in Flutter: ElevatedButton TextButton and IconButton

Buttons are a crucial component of any mobile or web application, serving as the primary way for users to interact with your app. In Flutter, buttons are flexible and customizable, allowing developers to create various styles and functionality depending on the needs of their project.

In this blog, we will explore the three most commonly used button widgets in Flutter: ElevatedButton, TextButton, and IconButton. We’ll also discuss their key properties, usage, and how to customize them to create interactive and visually appealing interfaces.

Overview of Flutter Buttons

Flutter provides a variety of button widgets, each serving different purposes. Let’s take a brief look at the three main types:

ElevatedButton: Used for emphasis, as it has a raised, 3D effect.
TextButton: A flat button without elevation, ideal for less prominent actions.
IconButton: A button with an icon, typically used for compact actions.

All three buttons share some common behavior, such as being responsive to taps and clicks. They can be styled, customized, and configured to execute specific actions when interacted with.

1. ElevatedButton: Raised and Prominent

The ElevatedButton widget is one of the most widely used button types in Flutter. It is a raised button that adds a sense of depth with its 3D effect. This makes it ideal for actions that need more prominence or should stand out on the screen.

Basic Usage of ElevatedButton:

ElevatedButton(
  onPressed: () {
    print('ElevatedButton pressed!');
  },
  child: Text('Press Me'),
)

In this example, the button triggers the action inside the onPressed function when tapped.

Key Properties of ElevatedButton:

onPressed: A callback function that gets executed when the button is pressed. If null, the button becomes disabled.
child: Typically a Text widget, but it can be any widget like an icon or a combination of widgets.
style: Allows customization of the button’s appearance, such as color, shape, padding, and elevation.

Styling ElevatedButton:

The style property lets you fully customize the button’s look and feel. You can adjust its background color, text style, shape, padding, and more.

Example:

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    primary: Colors.green, // Background color
    onPrimary: Colors.white, // Text color
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  child: Text('Styled Button'),
)

In this example, the button has a green background, white text, custom padding, and rounded corners.

Adding an Icon to ElevatedButton:

You can also add an icon to an ElevatedButton using the Icon widget alongside text, typically using Row to arrange them horizontally.

Example:

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.thumb_up),
  label: Text('Like'),
  style: ElevatedButton.styleFrom(primary: Colors.blue),
)

This button includes an icon next to the label text, ideal for actions that benefit from visual cues.

2. TextButton: Simple and Flat

The TextButton widget is a flat button without any elevation or shadow. It’s typically used for less prominent actions, such as “Cancel” buttons, or for actions in dialog boxes. The focus here is on the label (text), and not on creating emphasis through design.

Basic Usage of TextButton:

TextButton(
  onPressed: () {
    print('TextButton pressed!');
  },
  child: Text('Click Me'),
)

The button’s appearance is simple, making it perfect for situations where you want a clean, minimalist design.

Key Properties of TextButton:

onPressed: Similar to ElevatedButton, this function is triggered when the button is pressed.
child: The label for the button, typically a Text widget.
style: Customizes the look and feel of the button, such as text color, padding, and background color.

Styling TextButton:

You can easily customize the appearance of TextButton using the style property. This includes setting background colors, text colors, and padding.

Example:

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    primary: Colors.red, // Text color
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
    backgroundColor: Colors.yellow, // Background color
  ),
  child: Text('Styled TextButton'),
)

Here, we’ve customised the button to have red text, yellow background, and specific padding.

3. IconButton: Interactive Icons

The IconButton widget is a compact button used to display an icon. It’s ideal for actions where a symbol is more intuitive than text, such as navigation controls, toggles, or adding items to a cart.

Basic Usage of IconButton:

IconButton(
  icon: Icon(Icons.volume_up),
  onPressed: () {
    print('IconButton pressed!');
  },
)

In this example, an icon button with a volume-up symbol is used. When pressed, it prints a message to the console.

Key Properties of IconButton:

icon: The icon displayed inside the button, typically an Icon widget.
onPressed: The function executed when the button is pressed.
tooltip: Displays a tooltip when the user hovers over the button (on web or desktop) or taps and holds (on mobile).

Customizing IconButton:

While IconButton is inherently simple, you can still customize its size, color, and padding.

Example:

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.pink,
  iconSize: 40.0,
  onPressed: () {
    print('Favorite pressed!');
  },
  tooltip: 'Mark as favorite',
)

This example creates a larger, pink heart icon with a tooltip that displays “Mark as favorite.”

Combining Buttons for Better UI

You can combine different button types to create more dynamic and interactive UIs. For instance, placing an ElevatedButton and a TextButton next to each other allows you to highlight a primary action while providing secondary options.

Example: Using ElevatedButton and TextButton Together:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {},
      child: Text('Submit'),
    ),
    SizedBox(width: 20),
    TextButton(
      onPressed: () {},
      child: Text('Cancel'),
    ),
  ],
)

In this layout, the ElevatedButton serves as the primary action, while the TextButton offers a secondary, less prominent choice.

Handling Button States: Disabled Buttons

Sometimes, you may want to disable a button based on certain conditions. To disable a button in Flutter, simply set the onPressed property to null.

Example of a Disabled Button:

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

Here, the button is disabled and can’t be interacted with until onPressed is given a valid callback function.

Best Practices for Buttons in Flutter

Use Appropriate Button Types: Choose the button widget that best fits the context. Use ElevatedButton for actions that need prominence, TextButton for secondary actions, and IconButton for compact or icon-only actions.
Accessibility: Always add tooltips to IconButton for accessibility purposes. Tooltips provide additional context to users, especially those who rely on screen readers.
Responsive Design: Use padding and layout strategies to ensure buttons look good across different screen sizes. Combining buttons with layout widgets like Row, Column, and Wrap helps in creating flexible designs.
Button Feedback: Always provide visual feedback when a button is pressed (e.g., by using splash or highlight colors). Flutter does this by default, but you can customize the feedback colors using the style property.

Conclusion

Flutter provides a rich set of button widgets—ElevatedButton, TextButton, and IconButton—to help you build interactive and responsive user interfaces. Whether you’re highlighting primary actions, offering secondary options, or adding intuitive icons, Flutter’s button system offers the flexibility you need.

By mastering these button widgets and customizing their appearance with properties like style, icon, and tooltip, you can create highly polished and user-friendly apps.

Explore Other Flutter Topics…

Tagged Creating Buttons in Flutter: ElevatedButton TextButton and IconButton, Customizing buttons in Flutter, Flutter ElevatedButton, Flutter IconButton, Flutter TextButton

Creating Buttons in Flutter: ElevatedButton TextButton and IconButton