Flutter FloatingActionButton: A Complete Tutorial With Examples

What Is the FloatingActionButton?

The FloatingActionButton (FAB) is a Material Design widget that provides a circular icon button hovering over content to promote a primary action in your application. Whether you're building for iOS, Android, or cross-platform deployment, mastering the FAB is essential for creating intuitive user interfaces.

Key characteristics:

• Circular icon button floating above content
• Positioned typically in bottom-right corner
• Used for primary actions like create, share, or navigate
• Supports multiple variants: standard, extended, large, small

Our mobile app development team regularly implements FAB patterns as part of comprehensive Flutter applications, ensuring proper UX across all device types. According to the Flutter API documentation, the FAB serves as the prominent action trigger that users expect to find and use throughout any well-designed application.

FAB Variants and Constructors

Standard FloatingActionButton

The standard FAB creates a compact, circular button displaying an icon that represents the action it triggers. This constructor creates a minimal footprint button appropriate for most use cases while maintaining the recognizable FAB identity that users expect.

FloatingActionButton(
 onPressed: _addItem,
 tooltip: 'Add new item',
 child: Icon(Icons.add),
)

The standard FAB constructor accepts a child widget, typically an Icon, which serves as the button's visual representation. Icon selection should clearly communicate the button's purpose--users should understand what will happen when they tap based solely on its icon.

FloatingActionButton.extended

Extended FAB provides a stadium-shaped button with both an icon and a label for clearer communication when the action's purpose might not be immediately clear from the icon alone.

FloatingActionButton.extended(
 onPressed: _createPost,
 icon: Icon(Icons.edit),
 label: Text('Create Post'),
)

Size Variants

• FloatingActionButton.large - Increased dimensions for extra prominence when emphasizing particularly important actions
• FloatingActionButton.small - Compact size for dense interfaces or expandable FAB patterns

When building cross-platform mobile applications, choosing the right FAB size variant helps maintain visual consistency across iOS and Android platforms. As documented by GeeksforGeeks, these size variants maintain all customization options while adjusting base dimensions for different interface contexts.

Essential Properties

User Interaction

• onPressed - Required callback defining button behavior. When null, the FAB appears disabled with reduced opacity
• tooltip - Accessibility description for screen readers, providing hover text for desktop users

Color Customization

• backgroundColor - Button fill color
• foregroundColor - Icon/text color within button
• focusColor/hoverColor - Keyboard/mouse interaction feedback
• splashColor - Ripple effect color on tap providing tactile confirmation

Elevation Control

The elevation system controls visual depth through shadow effects that communicate the button's position relative to underlying content. Key properties include:

• elevation - Default shadow depth creating the characteristic floating appearance
• highlightElevation - Pressed state elevation that simulates physical contact
• focusElevation/hoverElevation - Interaction state elevations for accessibility
• disabledElevation - Disabled state elevation

Implementing proper elevation and color customization helps create accessible mobile experiences that meet diverse user needs. Our web development services include accessibility audits to ensure your applications work for all users. As outlined in the Flutter API documentation, elevation changes are animated by default, creating smooth visual feedback that helps users understand the button's responsive nature.

Advanced FAB Patterns

Expandable FAB

The expandable FAB pattern displays a primary action while revealing additional actions when activated. This pattern maintains interface cleanliness while offering access to secondary options. According to the Flutter cookbook, this implementation requires careful state management to coordinate expansion animations while ensuring accessibility.

Key implementation considerations:

• State management for expansion/collapse animations
• Unique hero tags for navigation transitions
• Proper touch targets for all action buttons
• Smooth animations (200-300ms recommended) for responsive feel

Hero Animations

The heroTag property enables FAB participation in smooth navigation transitions, maintaining visual continuity when navigating between screens. This proves particularly effective when navigating to screens where the FAB's action will be performed.

FloatingActionButton(
 heroTag: UniqueKey(), // Unique per screen in navigation
 onPressed: _navigateToCreate,
 child: Icon(Icons.add),
)

When implementing hero animations with FABs, ensure each screen uses a unique hero tag to avoid animation conflicts in the navigation hierarchy. For complex navigation patterns, consider consulting our AI automation experts who can help design intuitive user flows that reduce friction and improve engagement.

Best Practices

When to Use FAB

• Use for: Primary actions like create, share, navigate
• Single action per screen - FAB should represent the most important action
• Positive, affirmative actions - Focus on what users should do, not what they shouldn't

Material Design guidelines specify that FABs should be used for actions like "create," "share," or "navigate" rather than secondary or destructive actions. This restriction ensures users develop accurate expectations about the button's purpose.

When NOT to Use FAB

• Multiple equally-important actions (use action sheets instead)
• Destructive actions (use confirmation dialogs)
• Navigation that isn't primary workflow advancement
• Screens primarily for information consumption

Accessibility Guidelines

• Minimum touch target: 48x48 pixels (provided by default)
• Descriptive tooltip text for screen readers describing the action that will occur
• Consider one-handed operation alternatives for users who cannot easily reach bottom-right areas
• Test with VoiceOver/TalkBack screen readers to ensure proper accessibility

Accessibility should be a core consideration in every mobile development project. Avoid disabling FABs without clear indication, as users may not understand why the button doesn't respond to their taps.

Conclusion

The FloatingActionButton remains one of Material Design's most effective patterns for promoting primary actions in mobile applications. Flutter's comprehensive implementation supports all FAB variants and customization options, enabling you to create intuitive interfaces that guide users toward your most important functionality.

By following the guidelines in this tutorial--using appropriate variants, configuring properties correctly, implementing advanced patterns thoughtfully, and adhering to accessibility best practices--you can leverage the FAB to enhance user experience across iOS, Android, and cross-platform deployments using Flutter.

Our team specializes in Flutter development and can help you implement effective navigation patterns, including proper use of FloatingActionButtons and other Material Design components for your mobile applications.

Sources

1. Flutter API - FloatingActionButton Class
2. Flutter Docs - Create an expandable FAB
3. GeeksforGeeks - FloatingActionButton in Flutter