1. Flutter
  2. Button Widgets
  3. Overview of Button Widgets

Overview of Button Widgets in Flutter

Buttons are an essential part of any user interface, allowing users to interact with your application. In Flutter, buttons come in various types and styles to suit different design needs. Here's a beginner-friendly overview of the most commonly used button widgets in Flutter.

1. ElevatedButton

Overview:

The ElevatedButton widget is a material design button that provides a 3D effect by default. It’s suitable for important actions that require user attention.

Key Features:

  • Has a raised appearance.
  • Provides elevation to enhance prominence.
  • Automatically adapts to light and dark themes.

Syntax:

ElevatedButton(
  onPressed: () {
    // Your onPressed code here
  },
  child: Text('Click Me'),
)

Properties:

  • onPressed: Callback triggered when the button is tapped.
  • onLongPress: Callback for long press.
  • style: Customizes the appearance (e.g., color, size, shape).

2. TextButton

Overview:

The TextButton is a simple, flat button without elevation, commonly used for secondary actions.

Key Features:

  • Minimalistic design.
  • Ideal for inline or less prominent actions.

Syntax:

TextButton(
  onPressed: () {
    // Your onPressed code here
  },
  child: Text('Learn More'),
)

Properties:

  • onPressed: Defines the button's action.
  • style: Allows customization like text color or padding.

3. OutlinedButton

Overview:

The OutlinedButton has a transparent background with a border around it, making it ideal for medium-emphasis actions.

Key Features:

  • Border highlights the button's boundaries.
  • Great for actions requiring user confirmation.

Syntax:

OutlinedButton(
  onPressed: () {
    // Your onPressed code here
  },
  child: Text('Sign Up'),
)

Properties:

  • onPressed: Defines the callback for user interaction.
  • style: Customizes the border, text, and padding.

4. IconButton

Overview:

The IconButton is used for buttons that consist solely of an icon. It’s perfect for actions like navigation or toggling features.

Key Features:

  • Icon-based action button.
  • Highly customizable.

Syntax:

IconButton(
  onPressed: () {
    // Your onPressed code here
  },
  icon: Icon(Icons.add),
)

Properties:

  • icon: The icon displayed inside the button.
  • tooltip: Displays a label when long-pressed.
  • onPressed: Triggers the action.

5. FloatingActionButton

Overview:

The FloatingActionButton (FAB) is a circular button floating above the content. It’s typically used for primary actions in a screen.

Key Features:

  • Circular and eye-catching.
  • Commonly used for core actions (e.g., adding items).

Syntax:

FloatingActionButton(
  onPressed: () {
    // Your onPressed code here
  },
  child: Icon(Icons.add),
)

Properties:

  • onPressed: Defines the main action.
  • child: Accepts an icon or widget.
  • backgroundColor: Sets the background color.

6. Customizing Buttons

Flutter provides the ButtonStyle class to customize the appearance of buttons. Here’s an example of customizing an ElevatedButton:

ElevatedButton(
  onPressed: () {
    // Your action here
  },
  child: Text('Custom Button'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // Background color
    onPrimary: Colors.white, // Text color
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
)

7. ButtonBar

Overview:

ButtonBar is a widget that arranges multiple buttons horizontally.

Syntax:

ButtonBar(
  alignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(onPressed: () {}, child: Text('Save')),
    TextButton(onPressed: () {}, child: Text('Cancel')),
  ],
)

Best Practices for Using Buttons:

  1. Purpose: Choose the button type that aligns with the action's importance.
  2. Accessibility: Ensure buttons are large enough and easy to tap.
  3. Feedback: Provide visual feedback (e.g., color change on tap).
  4. Readability: Use concise, descriptive text or icons.

With these button widgets, you can build interactive and visually appealing applications. Experiment with the different types and styles to find the best fit for your app's design!

Previous
Next