Источник: https://github.com/letsdoit07/flutter_animated_fab_menu
Сначала вы должны определить animationController, и причина, по которой кнопки не работают, заключается в том, что вы не добавили IngnorePointer.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Edit As If You want',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
AnimationController animationController;
Animation degOneTranslationAnimation,
degTwoTranslationAnimation,
degThreeTranslationAnimation;
Animation rotationAnimation;
double getRadiansFromDegree(double degree) {
double unitRadian = 57.295779513;
return degree / unitRadian;
}
@override
void initState() {
animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 250));
degOneTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.2), weight: 75.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.2, end: 1.0), weight: 25.0),
]).animate(animationController);
degTwoTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.4), weight: 55.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.4, end: 1.0), weight: 45.0),
]).animate(animationController);
degThreeTranslationAnimation = TweenSequence([
TweenSequenceItem<double>(
tween: Tween<double>(begin: 0.0, end: 1.75), weight: 35.0),
TweenSequenceItem<double>(
tween: Tween<double>(begin: 1.75, end: 1.0), weight: 65.0),
]).animate(animationController);
rotationAnimation = Tween<double>(begin: 180.0, end: 0.0).animate(
CurvedAnimation(parent: animationController, curve: Curves.easeOut));
super.initState();
animationController.addListener(() {
setState(() {});
});
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Container(
width: size.width,
height: size.height,
child: Stack(
children: <Widget>[
Positioned(
right: 23,
bottom: 23,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
IgnorePointer(
child: Container(
color: Colors.black.withOpacity(
0.0), // comment or change to transparent color
height: 150.0,
width: 150.0,
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(270),
degOneTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degOneTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors
.yellow, //Provider.of<UserData>(context,listen: false).getPrimaryColor(),
width: 50,
height: 50,
icon: Icon(
Icons.note,
color: Colors.white,
),
onClick: () {
print('Noted clicked'); // *Can't Detect*
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(225),
degTwoTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degTwoTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors
.purple, //Provider.of<UserData>(context,listen: false).getPrimaryColor(),
width: 50,
height: 50,
icon: Icon(
Icons.camera_alt,
color: Colors.white,
),
onClick: () {
print('Second button'); // *Can't Detect*
},
),
),
),
Transform.translate(
offset: Offset.fromDirection(getRadiansFromDegree(180),
degThreeTranslationAnimation.value * 100),
child: Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value))
..scale(degThreeTranslationAnimation.value),
alignment: Alignment.center,
child: CircularButton(
color: Colors
.blue, //Provider.of<UserData>(context,listen: false).getPrimaryColor(),
width: 50,
height: 50,
icon: Icon(
Icons.report_problem,
color: Colors.white,
),
onClick: () {
//TODO
print('Three clicked'); // *Can't Detect*
},
),
),
),
Transform(
transform: Matrix4.rotationZ(
getRadiansFromDegree(rotationAnimation.value)),
alignment: Alignment.center,
child: CircularButton(
color: Colors
.red, //Provider.of<UserData>(context,listen: false).getSecondryColor(),
width: 60,
height: 60,
icon: Icon(
Icons.menu,
color: Colors.white,
),
onClick: () {
print('clicked'); // WORKS FINE
if (animationController.isCompleted) {
animationController.reverse();
} else {
animationController.forward();
}
},
),
)
],
))
],
),
));
}
}
class CircularButton extends StatelessWidget {
final double width;
final double height;
final Color color;
final Icon icon;
final Function onClick;
CircularButton(
{this.color, this.width, this.height, this.icon, this.onClick});
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(color: color, shape: BoxShape.circle),
width: width,
height: height,
child: IconButton(icon: icon, enableFeedback: true, onPressed: onClick),
);
}
}