1. Flutter
  2. Button Widgets
  3. Floating Action Buttons

Floating Action Buttons in Flutter

Floating Action Buttons (FABs) are a core part of Material Design and a powerful tool in Flutter for implementing prominent action buttons. This guide will walk you through what FABs are, how to use them, and how to customize them for your Flutter applications.

1. What is a Floating Action Button (FAB)?

A Floating Action Button (FAB) is a circular button that "floats" above the interface, typically used for primary actions in an app. It is ideal for highlighting an action that the user is expected to perform frequently.

Key Features

  • Circular, iconic button design.
  • Elevated by default to stand out.
  • Positioned using the floatingActionButton property in a Scaffold.

2. Basic Usage of FAB

Adding a FAB to your app is straightforward using the Scaffold widget's floatingActionButton property.

Example: Simple FAB

Scaffold(
  appBar: AppBar(
    title: Text('FAB Example'),
  ),
  body: Center(
    child: Text('Press the FAB!'),
  ),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB Pressed!');
    },
    child: Icon(Icons.add),
    tooltip: 'Add Item',
  ),
);

Explanation

  1. onPressed: Callback triggered when the FAB is tapped.
  2. child: Widget (e.g., Icon or Text) displayed inside the FAB.
  3. tooltip: Provides a message when the user hovers or long-presses the FAB.

3. Customizing Floating Action Buttons

FABs can be styled and positioned to fit your app’s theme and design.

Changing Background and Icon Colors

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.edit, color: Colors.white),
  backgroundColor: Colors.blue,
);

Changing Shape

You can make the FAB rectangular or any custom shape using the shape property.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.check),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // Rounded corners
  ),
);

4. Extended FABs

For actions requiring more context, Flutter provides the FloatingActionButton.extended widget, which includes both text and an icon.

Example: Extended FAB

FloatingActionButton.extended(
  onPressed: () {
    print('Extended FAB Pressed!');
  },
  label: Text('Create'),
  icon: Icon(Icons.add),
  backgroundColor: Colors.green,
);

Key Properties of Extended FAB

  • label: The text displayed on the button.
  • icon: The icon displayed before the label.

5. Positioning the FAB

The FAB is positioned using the floatingActionButtonLocation property in the Scaffold.

Common Positions

  • Default: Bottom-right corner.

  • Center Docked: Positioned in the center, usually paired with a BottomAppBar.

    Scaffold(
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);

6. FAB Animations

FABs can animate their transitions during page navigation or state changes.

Example: Animating FAB Icon

class AnimatedFAB extends StatefulWidget {
  @override
  _AnimatedFABState createState() => _AnimatedFABState();
}

class _AnimatedFABState extends State<AnimatedFAB> {
  bool _isAdd = true;

  void _toggleIcon() {
    setState(() {
      _isAdd = !_isAdd;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated FAB')),
      body: Center(child: Text('Tap the FAB to toggle')),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleIcon,
        child: Icon(_isAdd ? Icons.add : Icons.remove),
      ),
    );
  }
}

7. Best Practices for FABs

  1. Highlight Primary Actions: Use FABs for the most common or important action in your app.
  2. Keep it Minimal: Avoid placing multiple FABs on a single screen.
  3. Provide Feedback: Use visual or sound cues when the FAB is tapped.
  4. Consider Accessibility: Ensure the FAB is reachable and the icon is intuitive.

8. Common Use Cases

  • Adding a new item (e.g., in a to-do app).
  • Navigating to a specific feature (e.g., creating a message).
  • Triggering key actions (e.g., uploading a photo).

By mastering Floating Action Buttons in Flutter, you can create intuitive and visually appealing user interfaces that enhance the app's usability and design. Experiment with different styles and positions to find the best fit for your app!

Previous
Next