Flutter FloatingActionButton: Customisation and Usage

The FloatingActionButton (FAB) in Flutter is an essential widget for adding a prominent, floating action button on the screen. Frequently used for primary actions like adding items, sending messages, or starting a task, the FAB is often circular and hovers above the content, providing a visually distinct way for users to access a primary function. In this guide, we’ll cover how to implement the FloatingActionButton, customize it to fit your app’s design, and explore advanced techniques for using it effectively.

1. What is a FloatingActionButton?

The FloatingActionButton (FAB) is a circular button that hovers over the content, often associated with the primary action of the screen. The FAB is a staple in mobile UI design, especially for apps that rely on frequent user interaction with a specific task (like adding a new item or creating content). The widget is easy to implement and offers customization options to fit different styles.

Basic FloatingActionButton Example

Let’s start with a basic FloatingActionButton setup:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('FloatingActionButton Example')),
        body: Center(child: Text('Hello, Flutter!')),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Add your action here
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

Explanation

• onPressed: Defines the action performed when the button is tapped.
• child: Contains the icon displayed within the button. Here, Icons.add is used as a plus icon.

2. Types of FloatingActionButtons in Flutter

Flutter offers two types of FABs:

• FloatingActionButton: The standard, circular button.
• FloatingActionButton.extended: A rectangular button that includes an icon and a label, providing a more descriptive button for actions.

FloatingActionButton.extended Example

floatingActionButton: FloatingActionButton.extended(
  onPressed: () {
    // Add your action here
  },
  icon: Icon(Icons.add),
  label: Text("Add Item"),
),

Explanation

• icon: An optional icon shown on the left side.
• label: Text that describes the action, which improves usability.

3. Customizing the FloatingActionButton

The FAB is highly customizable in Flutter. You can alter the button’s color, shape, elevation, and size to align with your app’s theme.

Changing Colors

You can change the background and icon color of the FAB using backgroundColor and foregroundColor.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.teal,
  foregroundColor: Colors.white,
  child: Icon(Icons.thumb_up),
),

Adjusting Size

You can create a mini-sized FAB by setting the mini property to true. This is useful for screens with limited space.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  mini: true,
  child: Icon(Icons.add),
),

Adding Elevation

Customize the FAB’s elevation to adjust the shadow effect. This adds depth, making the button appear raised.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  elevation: 10.0,
  child: Icon(Icons.add),
),

Changing Shape

The FAB’s shape can be customized to fit different design needs.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
  child: Icon(Icons.send),
),

4. Advanced Techniques for Using FloatingActionButton

FAB with Floating Action Menu

If you have multiple actions, consider using packages like flutter_speed_dial to create a speed dial menu.

floatingActionButton: SpeedDial(
  animatedIcon: AnimatedIcons.menu_close,
  children: [
    SpeedDialChild(
      child: Icon(Icons.share),
      label: "Share",
      onTap: () => print("Share Tapped"),
    ),
    SpeedDialChild(
      child: Icon(Icons.copy),
      label: "Copy",
      onTap: () => print("Copy Tapped"),
    ),
  ],
),

FAB Visibility Animation

You can hide or show the FAB based on user interactions by using the Visibility widget or AnimatedOpacity.

Visibility(
  visible: _isVisible,
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
);

In this example, _isVisible is a boolean that toggles the FAB’s visibility.

5. FloatingActionButton Placement Options

FloatingActionButton Location

The FAB can be positioned using floatingActionButtonLocation in the Scaffold. Common options include:

• FloatingActionButtonLocation.centerDocked: Places the FAB in the center at the bottom.
• FloatingActionButtonLocation.endDocked: Positions the FAB at the end of the bottom dock.
• FloatingActionButtonLocation.startFloat: Places the FAB on the left in a floating position.

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

6. Best Practices for FloatingActionButton

To make the FAB as effective as possible, consider these best practices:

• Primary Action Only: Use the FAB for the main action of the screen, avoiding multiple FABs on the same screen.
• Keep Icons Clear and Simple: Ensure that the icon clearly represents the action.
• Limit to One FAB per Screen: Stick to one FAB to keep interactions simple and prevent user confusion.
• Use Extended FABs for Clarity: If the action isn’t immediately obvious, use FloatingActionButton.extended to add text to the button.

7. Complete Example of a Customized FloatingActionButton

Here’s a full example with a FloatingActionButton that becomes visible or hidden when scrolling, has a unique color scheme, and uses FloatingActionButton.extended for clarity.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Customized FAB")),
        body: ContentList(),
      ),
    );
  }
}

class ContentList extends StatefulWidget {
  @override
  _ContentListState createState() => _ContentListState();
}

class _ContentListState extends State<ContentList> {
  bool _isVisible = true;
  ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      if (_scrollController.position.userScrollDirection == ScrollDirection.reverse) {
        setState(() {
          _isVisible = false;
        });
      } else if (_scrollController.position.userScrollDirection == ScrollDirection.forward) {
        setState(() {
          _isVisible = true;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        controller: _scrollController,
        itemCount: 20,
        itemBuilder: (context, index) {
          return ListTile(
            leading: Icon(Icons.list),
            title: Text('Item $index'),
          );
        },
      ),
      floatingActionButton: Visibility(
        visible: _isVisible,
        child: FloatingActionButton.extended(
          onPressed: () {},
          backgroundColor: Colors.deepPurple,
          icon: Icon(Icons.add),
          label: Text("Add Item"),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
    );
  }
}

Explanation

• ScrollController toggles FAB visibility based on scroll direction.
• FloatingActionButton.extended is used for clarity, with a label and icon.

Conclusion

Flutter’s FloatingActionButton is a powerful, flexible widget for directing user focus to key actions. With its wide range of customization options, the FAB can be adapted to fit the design and usability needs of your Flutter application. By following best practices and experimenting with advanced techniques like custom shapes and animated menus, you can create a user-friendly and visually appealing app.

This blog is optimized with keywords like “Flutter FloatingActionButton,” “FloatingActionButton customization,” and “FloatingActionButton extended in Flutter” to reach developers looking for in-depth guidance on customizing and using the FAB widget effectively.

Explore Other Flutter Topics…

1. Introduction to Flutter and Dart
2. Why choose Flutter
3. Installing Flutter On Your Windows Mac And Linux System
4. Your first Flutter app
5. Flutter project structure
6. Building blocks of Flutter
7. Stateful vs. Stateless Widgets Explained
8. Flutter layout system
9. Flutter text widget
10. Creating Buttons in Flutter: ElevatedButton, TextButton, and IconButton
11. Handling User Input with Flutter Forms
12. Container class in Flutter
13. Flutter Navigation
14. Flutter – Pass Data One Screen To Another Screen
15. Managing Device Orientation in Flutter
16. Stateful widget lifecycle in Flutter
17. Future of Flutter
18. Flutter Themes
19. Flutter Animations
20. Flutter AppBar Customization
21. ListView in Flutter
22. Flutter GridView
23. Flutter Expanded Widget
24. Flutter BottomNavigation Bar
25. Floating Action Button
26. Drawer Widgets in Flutter
27. Form Validation in Flutter
28. Flutter TextField
29. Adding AdMob ads to a Flutter app
30. Building Flutter Web & Desktop Applications
31. What is Async and Await in Flutter
32. HTTP requests in Flutter
33. Parsing JSON in Flutter
34. Tinder-Style Swipe Cards in Flutter
35. Flutter Tic Tac Toe Game Tutorial
36. Flutter Login UI Tutorial
37. Flutter Card Widget Tutorial
38. Flutter music player app tutorial
39. Flutter introduction screens
40. Shared Preferences in Flutter
41. SQLite Database in Flutter
42. Firebase Authentication in Flutter
43. Firebase Firestore in Flutter
44. Push Notifications in Flutter
45. Handling File Uploads in Flutter
46. Responsive Design in Flutter
47. Provider in Flutter
48. Riverpod in Flutter
49. Flutter BLoC Pattern Tutorial