This article walks you through 4 different examples of using FloatingActionButton (FAB) in Flutter. These examples are arranged in order from basic to advanced, from simple to complex. Without any further ado, let’s get started.
Large Circular FloatingActionButton
You can create a big circular floating action button using the FloatingActionButton.large constructor.
Screenshot:
The code:
Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
backgroundColor: Colors.indigo,
),
floatingActionButton: FloatingActionButton.large(
onPressed: () {},
backgroundColor: Colors.deepOrange,
child: const Icon(Icons.waving_hand),
),
floatingActionButtonLocation: FloatingActionButtonLocation.startFloat,
);Pill FloatingActionButton with Text and Icon
You can easily create a pill floating action button with text and an icon by using the FloatingActionButton.extended constructor.
Screenshot:
The code:
Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
backgroundColor: Colors.indigo,
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.play_arrow),
label: const Text('Play Video'),
backgroundColor: Colors.indigoAccent,
),
);FloatingActionButton and notched BottomNavigationBar
This example creates a curved bottom navigation bar with a notch (a semi-circle cut) in the middle. Right there, we place a floating action button.
Screenshot:
The code:
Scaffold(
appBar: AppBar(
title: const Text('KindaCode.com'),
backgroundColor: Colors.pink,
),
// The bottom navigation bar
bottomNavigationBar: BottomAppBar(
color: Colors.pink,
// this creates a notch in the center of the bottom bar
shape: const CircularNotchedRectangle(),
notchMargin: 6,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
icon: const Icon(
Icons.home,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.people,
color: Colors.white,
),
onPressed: () {},
),
const SizedBox(
width: 20,
),
IconButton(
icon: const Icon(
Icons.notifications,
color: Colors.white,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.settings,
color: Colors.white,
),
onPressed: () {},
),
],
),
),
// implement the floating button
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.amber,
child: const Icon(Icons.add)),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);Speed Dial Animated FloatingActionButton
This example is a little bit long and complicated, so please bear with us. The app we will make contains a floating acting button (let’s call it primary FAB or main FAB). When this one gets pressed for the first time, the other three floating action buttons will show up (let’s call them child FABs). When the main FAB is pressed another time, the child FABs will become invisible. One extra thing is that the icon of the main FAB is animated.
Words might be confusing. Let’s see how it works in action:
The full code (with explanations):
// main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
// Remove the debug banner
debugShowCheckedModeBanner: false,
title: 'KindaCode.com',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const HomePage());
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage>
with SingleTickerProviderStateMixin {
// Animation controller
late AnimationController _animationController;
// This is used to animate the icon of the main FAB
late Animation<double> _buttonAnimatedIcon;
// This is used for the child FABs
late Animation<double> _translateButton;
// This variable determnies whether the child FABs are visible or not
bool _isExpanded = false;
@override
initState() {
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 600))
..addListener(() {
setState(() {});
});
_buttonAnimatedIcon =
Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
_translateButton = Tween<double>(
begin: 100,
end: -20,
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
));
super.initState();
}
// dispose the animation controller
@override
dispose() {
_animationController.dispose();
super.dispose();
}
// This function is used to expand/collapse the children floating buttons
// It will be called when the primary FAB (with menu icon) is pressed
_toggle() {
if (_isExpanded) {
_animationController.reverse();
} else {
_animationController.forward();
}
_isExpanded = !_isExpanded;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('KindaCode.com')),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value * 4,
0.0,
),
child: FloatingActionButton(
backgroundColor: Colors.blue,
onPressed: () {/* Do something */},
child: const Icon(
Icons.email,
),
),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 3,
0,
),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: () {/* Do something */},
child: const Icon(
Icons.call,
),
),
),
Transform(
transform: Matrix4.translationValues(
0,
_translateButton.value * 2,
0,
),
child: FloatingActionButton(
backgroundColor: Colors.amber,
onPressed: () {/* Do something */},
child: const Icon(Icons.message),
),
),
// This is the primary FAB
FloatingActionButton(
onPressed: _toggle,
child: AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _buttonAnimatedIcon,
),
),
],
),
);
}
}Wrapping Up
We’ve gone over a couple of floating action button examples. As of now, you have more options to implement this kind of button in your app. If you’d like to explore more new and amazing things about modern Flutter development, take a look at the following articles:
- Flutter: Creating Custom Back Buttons
- Flutter: Text with Read More / Read Less Buttons
- Using Chip widget in Flutter: Tutorial & Examples
- Flutter: Making Beautiful Chat Bubbles (2 Approaches)
- Using GetX (Get) for State Management in Flutter
- Flutter & SQLite: CRUD Example
You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.
