Flutter is a modern UI framework that makes it easy to build mobile, web, and desktop apps. One of the widgets often used for quick interactions is the FloatingActionButton (FAB).
FAB is a circular button that floats above the app content, typically used for primary actions, such as adding an item, creating a new message, or starting an important activity.
In this article, we’ll cover all the FAB attributes, different variations, and practical tips to make your button more functional, stylish, and interactive.
1. What is a FloatingActionButton?
In simple terms, a FloatingActionButton is a circular floating button that stands out above the app content. It is usually positioned at the bottom-right of the screen but can be moved as needed.
Basic FAB example:
Scaffold(
appBar: AppBar(title: const Text('FAB Demo')),
body: const Center(child: Text('Hello, Flutter!')),
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FAB clicked!');
},
child: const Icon(Icons.add),
),
)
This code creates a circular action button with a plus icon in the bottom-right corner.
2. Key FloatingActionButton Attributes
FAB has many attributes that can be configured. Here’s a complete list with explanations:
a. onPressed
This is required and defines the action when the FAB is pressed.
FloatingActionButton(
onPressed: () {
print('Button pressed');
},
child: const Icon(Icons.add),
)
Without onPressed, the button is non-interactive.
b. child
The child typically displays an icon or text inside the FAB.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.edit),
)
Tip: Use an easy-to-recognize icon to represent the primary action.
c. backgroundColor
Sets the background color of the button.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
backgroundColor: Colors.red,
)
Tip: Use a contrasting color so the FAB stands out above the content.
d. foregroundColor
Sets the color of the icon or text inside the FAB.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
backgroundColor: Colors.blue,
foregroundColor: Colors.white,
)
e. tooltip
A short text that appears when the FAB is long-pressed, providing a hint about its function.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
tooltip: 'Add new item',
)
f. elevation and highlightElevation
-
elevation→ the shadow height of the FAB in normal state. -
highlightElevation→ the shadow height when pressed.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
elevation: 4,
highlightElevation: 8,
)
g. shape
Determines the shape of the FAB. By default, it is circular, but it can be customized into stadium, rectangle, or custom shapes.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
)
Tip: Use custom shapes for a unique and modern look.
h. mini
If true, the FAB becomes smaller, suitable for secondary or additional actions.
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.edit),
mini: true,
)
i. isExtended
If true, the FAB can expand to show text along with an icon, called an Extended FAB.
FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text('Add Item'),
)
Extended FABs are useful to provide more context than just an icon.
3. FloatingActionButton Position
By default, FAB appears at the bottom-right. You can change its position using Scaffold attribute floatingActionButtonLocation.
Popular positions:
Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
)
Other options:
-
FloatingActionButtonLocation.endFloat→ default, bottom-right -
FloatingActionButtonLocation.centerFloat→ bottom-center -
FloatingActionButtonLocation.startFloat→ bottom-left
Tip: Choose a location that doesn’t block important content.
4. Complete FloatingActionButton Example
Example Scaffold with multiple FAB types:
Scaffold(
appBar: AppBar(title: const Text('FAB Example')),
body: const Center(child: Text('FloatingActionButton Demo')),
floatingActionButton: Column(
mainAxisSize: MainAxisSize.min,
children: [
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
tooltip: 'Add',
),
const SizedBox(height: 10),
FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.edit),
label: const Text('Edit'),
),
const SizedBox(height: 10),
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.share),
mini: true,
),
],
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
)
This code gives us:
-
Main FAB with plus icon
-
Extended FAB with text and icon
-
Mini FAB for secondary actions
5. Practical Tips for Using FloatingActionButton
-
Use FAB for primary actions
Don’t use FAB for all buttons; its main purpose is important, easily accessible actions. -
Pay attention to color contrast
Make sure the button stands out above the content for user visibility. -
Use tooltips for context
Always add a tooltip so users know the function, especially if using an icon only. -
Consider Extended FAB for clarity
If the FAB’s action is not obvious from the icon, useFloatingActionButton.extended. -
Use mini FABs for secondary actions
For example, an additional FAB for sharing or editing that isn’t the main action.
FloatingActionButton is an essential interactive widget in Flutter that helps users perform primary actions quickly. By understanding its attributes, we can create FABs that are:
-
Stylish with color, shape, and shadow
-
Functional with
onPressed, tooltip, and extended FAB -
Flexible with position, size, and mini FAB
Flutter makes it easy to build modern UIs, but mastering FloatingActionButton is key to creating apps that are professional, interactive, and user-friendly.
Experiment with combinations of FAB: extended + mini + custom shapes + gradient background to make your app unique and visually appealing. Users will enjoy not only the functionality but also the visual experience.
0 Comments:
Post a Comment