1. Flutter
  2. Button Widgets
  3. Icon and Outlined Buttons

Icon and Outlined Buttons in Flutter

In Flutter, IconButton and OutlinedButton are two widely used button types that help enhance the functionality and design of your app. In this guide, we'll cover everything you need to know about these button types and how to use them effectively in your Flutter applications.

1. What is an Icon Button?

An IconButton is a button that consists of an icon instead of text. It is commonly used for actions where the icon is intuitive enough for users to understand the function. Examples include icons for search, settings, or adding items.

Key Features of IconButton

  • Only an icon (no text) is displayed.
  • It supports customizable icon colors and sizes.
  • Can be easily integrated with any widget tree.

2. Using IconButton in Flutter

You can add an IconButton using the IconButton widget, which is typically placed in app bars, toolbars, or anywhere an icon-based action is needed.

Example: Simple IconButton

IconButton(
  icon: Icon(Icons.search),  
  onPressed: () {
    print('Search icon pressed!');
  },
  tooltip: 'Search',  // Tooltip for the icon
);

Explanation

  1. icon: Defines the icon shown on the button (e.g., Icons.search).
  2. onPressed: The action triggered when the button is tapped.
  3. tooltip: Provides an informational text when the user long-presses the icon.

3. Customizing IconButton

You can modify various properties of the IconButton to adjust its appearance and behavior.

Changing Icon Color and Size

IconButton(
  icon: Icon(Icons.favorite, color: Colors.red, size: 30), 
  onPressed: () {},
);
  • color: Sets the color of the icon.
  • size: Adjusts the size of the icon.

Adding Padding

IconButton(
  icon: Icon(Icons.home),
  padding: EdgeInsets.all(16.0),  // Adds padding around the icon
  onPressed: () {},
);

4. What is an Outlined Button?

An OutlinedButton is a button with a transparent background and a border outline. It is typically used for secondary actions, where you want to show a less prominent action compared to a primary button.

Key Features of OutlinedButton

  • Transparent background.
  • A border is displayed around the button.
  • Often used for actions like "Cancel" or secondary navigation.

5. Using OutlinedButton in Flutter

The OutlinedButton is used similarly to other button widgets in Flutter. It requires an onPressed function to define the action and can hold a child widget like text or icons.

Example: Simple OutlinedButton

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

Explanation

  1. onPressed: Triggered when the button is tapped.
  2. child: The content inside the button, typically text or an icon.

6. Customizing OutlinedButton

You can further customize the OutlinedButton to fit your app's design.

Changing Border and Color

OutlinedButton(
  onPressed: () {},
  child: Text('Outlined Button'),
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.blue, width: 2),  // Custom border color and width
  ),
);

Changing Text Style

OutlinedButton(
  onPressed: () {},
  child: Text('Styled Button', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
);

7. Icon and Outlined Buttons in Action

You can combine IconButton and OutlinedButton to create a more dynamic user interface.

Example: Icon and Text in OutlinedButton

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.access_alarm),
  label: Text('Set Alarm'),
);

The OutlinedButton.icon combines an icon and a label in a single button.

8. Best Practices for Icon and Outlined Buttons

  1. Intuitive Icons: Ensure icons are easily recognizable and intuitive for the user.
  2. Consistent Styling: Maintain a consistent style across your app for buttons to create a cohesive design.
  3. Secondary Actions: Use OutlinedButton for secondary or less important actions to differentiate them from primary actions.
  4. Responsive Design: Make sure buttons are responsive and easily tappable, especially on mobile devices.

9. When to Use IconButton vs OutlinedButton

  • Use IconButton when you want a simple, icon-only button for actions like search, settings, or navigation.
  • Use OutlinedButton for actions that are secondary or need a less prominent style than primary buttons (e.g., "Cancel" or "Clear").

By mastering IconButton and OutlinedButton in Flutter, you can improve your app’s UI with clear, effective actions that users can easily interact with. These button types are simple yet powerful tools for building clean, modern Flutter apps.

Previous
Next