How to hide actions in floatingButton - flutter

Question

I am trying to have a FloatingButton with multiple options and each option triggers an action. I achieve that so far, and also an animated transition when pressed. What I need is to achieve that when the Button is not pressed, only one icon is showing.
This is the code so far:
class _FloatingButtonMultipleOptionState extends State<FloatingButtonMultipleOption> with SingleTickerProviderStateMixin {
bool isOpened = false;
AnimationController _animationController;
Animation<Color> _buttonColor;
Animation<double> _animateIcon;
Animation<double> _translateButton;
Curve _curve = Curves.easeOut;
double _fabHeight = 56.0;
#override
initState() {
_animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 500))
..addListener(() {
setState(() {});
});
_animateIcon = Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
_buttonColor = ColorTween(
begin: TheBaseColors.lightBlue,
end: TheBaseColors.lightRed,
).animate(CurvedAnimation(
parent: _animationController,
curve: Interval(
0.00,
1.00,
curve: Curves.linear,
),
));
_translateButton = Tween<double>(
begin: _fabHeight,
end: -14.0,
).animate(CurvedAnimation(
parent: _animationController,
curve: Interval(
0.0,
0.75,
curve: _curve,
),
));
super.initState();
}
#override
dispose() {
_animationController.dispose();
super.dispose();
}
animate() {
if (!isOpened) {
_animationController.forward();
} else {
_animationController.reverse();
}
isOpened = !isOpened;
}
Widget post() {
return FloatingActionButton.extended(
heroTag: null,
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => CreatePost()));
},
tooltip: 'Post',
label: Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Send a Post'),
),
Icon(
Icons.message,
),
],
),
);
}
Widget activity() {
return FloatingActionButton.extended(
heroTag: null,
onPressed: (){
Navigator.push(context, MaterialPageRoute(builder: (context) => CreateActivity()));
},
tooltip: 'Activiy',
label: Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text('Create activity'),
),
Icon(Icons.event),
],
),
);
}
Widget close() {
return FloatingActionButton(
backgroundColor: _buttonColor.value,
onPressed: animate,
tooltip: 'Close',
child: AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _animateIcon,
),
);
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value * 3.0,
0.0,
),
child: post(),
),
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value * 2.0,
0.0,
),
child: activity(),
),
close(),
],
);
}
}
In the photo attached you can see how when the button is not pressed, the user can see the option 'Create activity' and this should only be seen when the button is pressed.

Answer 1

You could set a boolean "isButtonPressed" that changes state every time you press the FloatingActionButton, and then wrap the other buttons into the Visibility widget like this
Visibility(
visible: isButtonPressed,
child: activity(),
)
This will make your floatingActionButton "Create activity" visible when the button is pressed, and hide it when the button is pressed a second time.