Mastering Flutter Buttons: A Complete Guide to Interactive UI Elements

In Flutter, buttons are essential widgets for making your app interactive. Whether you need to trigger actions, submit forms, or navigate between pages, buttons are versatile and customizable. Flutter provides several types of buttons, each with its own purpose and styling. In this guide, we’ll explore the main button types available in Flutter, their parameters, and code examples.

1. ElevatedButton

The ElevatedButton is a button with a 3D effect, which gives the appearance of being raised. This button is commonly used for primary actions in an app.

ElevatedButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.blue, // background color
    onPrimary: Colors.white, // text color
    elevation: 5, // shadow effect
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10), // rounded corners
    ),
  ),
  child: Text('Elevated Button'),
)

Parameters:

• onPressed: Callback triggered when the button is tapped.
• style: Used to customize the button’s appearance.
• child: The content of the button, usually a Text widget.

2. TextButton

TextButton is a simple, flat button without elevation. It’s useful for secondary actions, such as “Cancel” or “Skip” buttons.

TextButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  style: TextButton.styleFrom(
    primary: Colors.blue, // text color
    padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
  ),
  child: Text('Text Button'),
)

Parameters:

• onPressed: Triggered when the button is tapped.
• style: For customizations like color, padding, etc.
• child: Typically a Text widget representing the button’s label.

3. OutlinedButton

OutlinedButton is a button with a border but without background color. It’s ideal for actions that need emphasis without appearing too bold.

OutlinedButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  style: OutlinedButton.styleFrom(
    primary: Colors.blue, // text and border color
    side: BorderSide(color: Colors.blue, width: 2), // border color and width
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Outlined Button'),
)

Parameters:

• onPressed: Action performed on tap.
• style: Customize the appearance, including border color and width.
• child: Usually contains a Text widget.

4. IconButton

IconButton displays an icon rather than text. It’s useful for actions like navigating back, searching, or refreshing.

IconButton(
  icon: Icon(Icons.thumb_up),
  color: Colors.blue,
  iconSize: 30.0,
  tooltip: 'Like',
  onPressed: () {
    // Add your onPressed logic here
  },
)

Parameters:

• icon: Icon displayed on the button.
• onPressed: Action triggered when tapped.
• color: Icon color.
• iconSize: Size of the icon.
• tooltip: Text displayed when the user hovers over or long-presses the button.

5. FloatingActionButton

The FloatingActionButton (FAB) is a circular button used primarily for the main action on a screen, such as adding a new item.

FloatingActionButton(
  onPressed: () {
    // Add your onPressed logic here
  },
  backgroundColor: Colors.pink,
  child: Icon(Icons.add),
  tooltip: 'Add',
)

Parameters:

• onPressed: Action on tap.
• backgroundColor: Button background color.
• child: Typically an icon.
• tooltip: Descriptive text shown on long press.

6. DropdownButton

The DropdownButton is used to display a list of options that a user can select from. It’s ideal for choices like selecting a category or country.

DropdownButton<String>(
  value: dropdownValue,
  icon: Icon(Icons.arrow_downward),
  iconSize: 24,
  elevation: 16,
  style: TextStyle(color: Colors.blue),
  onChanged: (String? newValue) {
    setState(() {
      dropdownValue = newValue!;
    });
  },
  items: <String>['One', 'Two', 'Three', 'Four']
      .map<DropdownMenuItem<String>>((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

Parameters:

• value: The selected value.
• icon: The dropdown icon.
• onChanged: Callback when the selected value changes.
• items: List of options.

7. PopupMenuButton

The PopupMenuButton displays a menu when tapped, ideal for additional options or settings.

PopupMenuButton<String>(
  onSelected: (String value) {
    // Do something with the selected value
  },
  itemBuilder: (BuildContext context) {
    return <String>['Option 1', 'Option 2', 'Option 3']
        .map((String choice) {
      return PopupMenuItem<String>(
        value: choice,
        child: Text(choice),
      );
    }).toList();
  },
)

Parameters:

• onSelected: Action when an item is selected.
• itemBuilder: Creates the list of menu items.

8. InkWell and GestureDetector

InkWell and GestureDetector aren’t technically buttons, but they’re used to detect taps on any widget, making any widget act like a button.

InkWell(
  onTap: () {
    // Add your onTap logic here
  },
  child: Container(
    padding: EdgeInsets.all(16.0),
    decoration: BoxDecoration(
      color: Colors.lightBlue,
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Text(
      'InkWell Button',
      style: TextStyle(color: Colors.white, fontSize: 18),
    ),
  ),
)

Parameters for InkWell:

• onTap: Triggered on tap.
• child: The widget wrapped by InkWell.
• GestureDetector provides even more control for gestures like onDoubleTap, onLongPress, etc.

Conclusion

Buttons in Flutter offer flexibility to match the design and functionality of any app. Whether you need a raised button for primary actions, a floating button for adding items, or a dropdown for selections, Flutter has you covered.

Summary of Buttons:

• ElevatedButton: Raised with shadow.
• TextButton: Flat with text only.
• OutlinedButton: Border without background.
• IconButton: Displays an icon.
• FloatingActionButton: Circular button for primary actions.
• DropdownButton: For selection lists.
• PopupMenuButton: For overflow menus.
• InkWell/GestureDetector: Make any widget clickable.

Experiment with each type and see how you can combine them to make your app more interactive and user-friendly. Happy coding!