GitLocker: The Coding Marketplace

Description:

flutter expandable fab

flutter_expandable_fab #

English, 日本語
flutter_expandable_fab is a speed dial FAB (Floating Action Button) that can animate the display and hiding of multiple action buttons.
It can be configured to display vertically, horizontally, or in a fan-shaped manner, on either side. It allows for fine-grained customization.
Migration from 1.x to 2.x #
In version 2.x, I have made changes to enable free customization of the open/close buttons by setting builders.
Code before migration: #
ExpandableFab(
child: const Icon(Icons.account_box),
foregroundColor: Colors.amber,
backgroundColor: Colors.green,
closeButtonStyle: const ExpandableFabCloseButtonStyle(
child: Icon(Icons.abc),
foregroundColor: Colors.deepOrangeAccent,
backgroundColor: Colors.lightGreen,
)
expandedFabSize: ExpandedFabSize.small,
collapsedFabSize: ExpandableFabSize.regular,
expandedFabShape: const CircleBorder(),
collapsedFabShape: const CircleBorder(),
)
copied to clipboard
Code after migration: #
ExpandableFab(
openButtonBuilder: RotateFloatingActionButtonBuilder(
child: const Icon(Icons.account_box),
fabSize: ExpandableFabSize.regular,
foregroundColor: Colors.amber,
backgroundColor: Colors.green,
shape: const CircleBorder(),
),
closeButtonBuilder: DefaultFloatingActionButtonBuilder(
child: const Icon(Icons.close),
fabSize: ExpandableFabSize.small,
foregroundColor: Colors.deepOrangeAccent,
backgroundColor: Colors.lightGreen,
shape: const CircleBorder(),
),
)
copied to clipboard
Showcase #
Fan style & Blur overlay #

Vertical style & Color overlay #

Horizontal style & Custom buttons #

Center Fan style #

floatingActionButton: ExpandableFab(
type: ExpandableFabType.fan,
pos: ExpandableFabPos.center,
fanAngle: 180,
copied to clipboard
Getting started #
import 'package:flutter_expandable_fab/flutter_expandable_fab.dart';

Scaffold(
floatingActionButtonLocation: ExpandableFab.location,
floatingActionButton: ExpandableFab(
children: [
FloatingActionButton.small(
heroTag: null,
child: const Icon(Icons.edit),
onPressed: () {},
),
FloatingActionButton.small(
heroTag: null,
child: const Icon(Icons.search),
onPressed: () {},
),
],
),
),

copied to clipboard
Open/Close programmatically #
class _FirstPageState extends State<FirstPage> {
final _key = GlobalKey<ExpandableFabState>();

@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButtonLocation: ExpandableFab.location,
floatingActionButton: ExpandableFab(
key: _key,
children: [
FloatingActionButton.small(
child: const Icon(Icons.edit),
onPressed: () {
final state = _key.currentState;
if (state != null) {
debugPrint('isOpen:${state.isOpen}');
state.toggle();
}
},
),
],
),
);
}
}
copied to clipboard
Customize #
You can customize the open/close buttons with your preferred Widget using FloatingActionButtonBuilder.
By using DefaultFloatingActionButtonBuilder, you can easily set up the FloatingActionButton.
RotateFloatingActionButtonBuilder provides a FloatingActionButton with a rotating animation.
Also, the items specified in children don't necessarily have to be FloatingActionButton; you can set any Widget freely.
ExpandableFab(
openButtonBuilder: RotateFloatingActionButtonBuilder(
child: const Icon(Icons.account_box),
fabSize: ExpandableFabSize.regular,
foregroundColor: Colors.amber,
backgroundColor: Colors.green,
shape: const CircleBorder(),
),
closeButtonBuilder: FloatingActionButtonBuilder(
size: 56,
builder: (BuildContext context, void Function()? onPressed,
Animation<double> progress) {
return IconButton(
onPressed: onPressed,
icon: const Icon(
Icons.check_circle_outline,
size: 40,
),
);
},
),
children: [
FloatingActionButton.large(
heroTag: null,
child: const Icon(Icons.edit),
onPressed: () {},
),
IconButton(
onPressed: () {
final state = _key.currentState;
if (state != null) {
debugPrint('isOpen:${state.isOpen}');
state.toggle();
}
},
icon: const Icon(
Icons.share,
size: 30,
),
),
],
)
copied to clipboard
Since children is an array of widgets, you can place any widget you like, not limited to FloatingActionButton.
You can also create buttons with labels as shown below.

floatingActionButton: ExpandableFab(
key: _key,
type: ExpandableFabType.up,
childrenAnimation: ExpandableFabAnimation.none,
distance: 70,
overlayStyle: ExpandableFabOverlayStyle(
color: Colors.white.withOpacity(0.9),
),
children: const [
Row(
children: [
Text('Remind'),
SizedBox(width: 20),
FloatingActionButton.small(
heroTag: null,
onPressed: null,
child: Icon(Icons.notifications),
),
],
),
Row(
children: [
Text('Email'),
SizedBox(width: 20),
FloatingActionButton.small(
heroTag: null,
onPressed: null,
child: Icon(Icons.email),
),
],
),
Row(
children: [
Text('Star'),
SizedBox(width: 20),
FloatingActionButton.small(
heroTag: null,
onPressed: null,
child: Icon(Icons.star),
),
],
),
FloatingActionButton.small(
heroTag: null,
onPressed: null,
child: Icon(Icons.add),
),
],
),
copied to clipboard
Properties #
ExpandableFab #

Property
Description
Default

distance
Distance from children
100

duration
Animation duration
250ms

fanAngle
Angle of opening when fan type
90

initialOpen
Open at initial display
false

type
The type of behavior of this widget
fan

pos
Position for displaying the widget
right

closeButtonBuilder
Builder for the close button

openButtonBuilder
Builder for the open button

childrenOffset
For positioning of children widgets

childrenAnimation
Types of animations for Children
rotate

children
The widgets below this widget in the tree

onOpen
Will be called before opening the menu

afterOpen
Will be called after opening the menu

onClose
Will be called before the menu closes

afterClose
Will be called after the menu closes

overlayStyle
Provides the style for overlay. No overlay when null.

openCloseStackAlignment
Defines how [openButtonBuilder] and [closeButtonBuilder] are aligned in a [Stack]
Alignment.center

FloatingActionButtonBuilder #

Property
Description
Default

builder
Callback to build the Widget

size
Size of the Widget

DefaultFloatingActionButtonBuilder #

Property
Description
Default

fabSize
Size of the button
regular

foregroundColor
Foreground color of the button

backgroundColor
Background color of the button

shape
Shape of the close button

heroTag
Tag to apply to the [Hero] widget of the button

child
Child widget of the button

RotateFloatingActionButtonBuilder #

Property
Description
Default

angle
Angle of rotation (in radians)
math.pi / 2

...
Same as DefaultFloatingActionButtonBuilder

Thanks #
I referred to the code from this article:
https://docs.flutter.dev/cookbook/effects/expandable-fab