Flutter - Extended Floating Action Button
Last Updated :
24 Apr, 2025
In Flutter, the Floating Action Button (FAB) is a common UI Widget. There are scenarios where you might need to extend the functionality of the FAB to offer additional options or actions. In this article we are going to create a Floating Action Button by clicking it will show 2 more options we can add more options to it according to your requirements. A sample video is given below to get an idea about what we are going to do in this article.
Basic Syntax of Extended FAB
FloatingActionButton.extended(
onPressed: () {
// Add your main action here
},
label: Text('Extended FAB'),
icon: Icon(Icons.add),
backgroundColor: Colors.blue,
);
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() {
runApp(MyApp());
}
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ExtendedFAB(),
);
}
}
Step 5: Create ExtendedFAB Class
In this class, we manage the visibility of additional options using the showOptions variable and a function toggleOptions().Inside the build method, we return a Column widget containing the main FAB and, if showOptions is true, a set of additional FABs representing different options that we are defined on the code. It contains a toggleOptions() method which is responsible for toggling the value of the boolean showOptions varriable. Comments are added for better understanding.
FloatingActionButton.extended(
onPressed: () {
toggleOptions(); // When the main FAB is pressed, toggleOptions is called
},
label: Text('Extended FAB'),
icon: Icon(Icons.add),
backgroundColor: Colors.blue,
),
SizedBox(height: 16.0),
Visibility(
visible:
showOptions, // Show the options only if showOptions is true
child: Column(
children: [
FloatingActionButton(
onPressed: () {
// Add your action for Option 1
},
tooltip: 'Option 1',
child: Icon(Icons.add),
),
SizedBox(height: 16.0),
FloatingActionButton(
onPressed: () {
// Add your action for Option 2
},
tooltip: 'Option 2',
child: Icon(Icons.delete),
),
],
),
),
Dart
class ExtendedFAB extends StatefulWidget {
@override
_ExtendedFABState createState() => _ExtendedFABState();
}
class _ExtendedFABState extends State<ExtendedFAB> {
bool showOptions = false;
void toggleOptions() {
setState(() {
showOptions =
!showOptions; // Toggling the visibility of additional options
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Extended FAB Example'),
),
body: Center(
child: Text(
'GFG Extended FAB',
style: TextStyle(fontSize: 24),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton.extended(
onPressed: () {
// When the main FAB is pressed,
// toggleOptions is called
toggleOptions();
},
label: Text('Extended FAB'),
icon: Icon(Icons.add),
backgroundColor: Colors.blue,
),
SizedBox(height: 16.0),
Visibility(
visible:
showOptions, // Show the options only if showOptions is true
child: Column(
children: [
FloatingActionButton(
onPressed: () {
// Add your action for Option 1
},
tooltip: 'Option 1',
child: Icon(Icons.add),
),
SizedBox(height: 16.0),
FloatingActionButton(
onPressed: () {
// Add your action for Option 2
},
tooltip: 'Option 2',
child: Icon(Icons.delete),
),
],
),
),
],
),
);
}
}
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, // Set the app's primary theme color
),
debugShowCheckedModeBanner: false,
home: ExtendedFAB(),
);
}
}
class ExtendedFAB extends StatefulWidget {
@override
_ExtendedFABState createState() => _ExtendedFABState();
}
class _ExtendedFABState extends State<ExtendedFAB> {
bool showOptions = false;
void toggleOptions() {
setState(() {
showOptions =
!showOptions; // Toggling the visibility of additional options
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Extended FAB Example'),
),
body: Center(
child: Text(
'GFG Extended FAB',
style: TextStyle(fontSize: 24),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton.extended(
onPressed: () {
toggleOptions(); // When the main FAB is pressed, toggleOptions is called
},
label: Text('Extended FAB'),
icon: Icon(Icons.add),
backgroundColor: Colors.blue,
),
SizedBox(height: 16.0),
Visibility(
visible:
showOptions, // Show the options only if showOptions is true
child: Column(
children: [
FloatingActionButton(
onPressed: () {
// Add your action for Option 1
},
tooltip: 'Option 1',
child: Icon(Icons.add),
),
SizedBox(height: 16.0),
FloatingActionButton(
onPressed: () {
// Add your action for Option 2
},
tooltip: 'Option 2',
child: Icon(Icons.delete),
),
],
),
),
],
),
);
}
}
Output:
Similar Reads
Flutter - Draggable Floating Action Button
In Flutter, Floating Action Buttons are considered modern UI Widgets, in most applications the position of the FAB is fixed but In this article, we are going to explore how can we make a Draggable Floating Action Button and change its position with the help of a Draggable widget in Flutter. A sample
4 min read
How to Change Floating Action Button Color in Flutter?
Every Android application has the floatingActionButton in it. There is a possibility that there are multiple screens in the application and have floatingActionButton on that screens, then we need to give the colors property to every floatingActionButton. But Flutter resolves this by changing the the
2 min read
Flutter - Extended Icon Button
In Flutter there are many prebuilt Button - Material Button, Text Button, Elevated Button, etc. In this article, we are going to implement the Extended Icon Button, which can be customized as per user need. We can give color to the button. A sample video is given below to get an idea about what we a
2 min read
Flutter - FloatingActionButton
A FloatingActionButton is a circular icon button that hovers over content to promote a primary action in the application. Floating action buttons are most commonly used in the Scaffold.floatingActionButton field.ConstructorFloatingActionButton FloatingActionButton({ Key? key, Widget? child, String?
4 min read
How to create custom FAB(Floating Action Button) in React Native?
React Native doesn't come with any FAB component built in. A floating action button (FAB) is used whenever you want to display a button on top of everything. If you have used ScrollView and the user can scroll up and down, this FAB button will always stay at the same position and doesn't move with t
7 min read
Flutter - Add Quick Actions Button
Quick actions for your launcher screen so that your users can access commonly used functions, such as opening a particular screen, transferring records or using a template in the mobile app, etc. Also called as App Shortcuts(in Android) and Home Screen Actions(in iOS) which allow users to perform ce
7 min read
How to Implement Circular Animated Floating Action Button in Flutter?
The Floating Action Button is the circular button that floats on the bottom of the  Application screen, It may perform many tasks like showing the menu bar, capturing images, opening the gallery anything you want. In this article, we are creating the Circular Animated Floating Action Button. Step By
3 min read
Flutter - Assigning Actions to Buttons
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter provides several prebuilt widgets to use. Different types of Button widgets are provided by the Flutter SDK. In this article, we are going to see how we
3 min read
Photo Editing Application in Flutter
With the introduction of the powerful image_editor_plus package, editing images directly within your Flutter app has become significantly more accessible. In this article, we'll dive deep into building a user-friendly image editor app. Users will have the ability to select an image from their camera
7 min read
Alert Dialog box in Flutter
Alert Dialog box informs the user about the situation that requires acknowledgment. Alert Box is a prompt that takes user confirmation. The very basic use of the alert box is used when we close the app, usually, we are notified with a prompt whether we want to exit or not. That's an alert box.The be
2 min read