In the modern app design, user experience plays a pivotal role. One common UI element used to enhance user interaction is the Floating Action Button (FAB). In this tutorial, we’ll delve into an advanced version of the FAB known as the Expandable Floating Action Button in the context of Flutter.

An Expandable Floating Action Button (FAB) is a dynamic user interface element that extends the capabilities of the traditional Floating Action Button in mobile and web applications. It provides an intuitive and space-efficient way to offer multiple actions or options to users within a single button, thereby enhancing user experience and interaction.

The standard Floating Action Button (FAB) is a circular button with a prominent placement, often positioned at the bottom right corner of the screen. It typically represents the primary action of the application, such as adding a new item or initiating a key action. The Expandable FAB takes this concept a step further by allowing the main button to expand into a set of smaller buttons, each representing a secondary action related to the main action.

Adding Expandable Floating Action Button In Flutter

1. Installing Required Dependencies:

In your pubspec.yaml file, add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  animated_floatactionbuttons: ^0.2.0 # Add this line

Run flutter pub get to install the new dependency.

2. Implementing the Expandable Floating Action Button:

1. Creating the FAB Icons:

First, let’s create a few icon widgets that will represent the sub-actions:

class SubActionButton extends StatelessWidget {
  final IconData iconData;
  final String label;
  final Function onPressed;

  SubActionButton({required this.iconData, required this.label, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPressed as void Function()?,
      child: Container(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(iconData, size: 24.0),
            SizedBox(height: 4.0),
            Text(label),
          ],
        ),
      ),
    );
  }
}

In this code, we’ve created a SubActionButton widget that takes an iconData, a label, and an onPressed callback as parameters. It displays the provided icon along with the label text. When the widget is tapped, the onPressed callback is executed. Now you can use this SubActionButton widget in your app’s UI. For example, let’s say you have a list of sub-actions:

List<Map<String, dynamic>> subActions = [
  {
    'icon': MdiIcons.edit, // You can replace this with the desired icon
    'label': 'Edit',
    'onPressed': () {
      // Implement the action when the Edit button is pressed
      print('Edit action pressed');
    },
  },
  {
    'icon': MdiIcons.delete,
    'label': 'Delete',
    'onPressed': () {
      // Implement the action when the Delete button is pressed
      print('Delete action pressed');
    },
  },
  // Add more sub-actions as needed
];

Finally, you can create a row of SubActionButton widgets using the subActions list:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: subActions.map((action) {
    return SubActionButton(
      iconData: action['icon'],
      label: action['label'],
      onPressed: action['onPressed'],
    );
  }).toList(),
)

In this example, we’ve demonstrated how to create a set of sub-action icons using the Material Design Icons library and how to use them within your app’s UI. This approach allows you to create an intuitive and visually appealing Expandable FAB with easily recognizable icons for each sub-action.