flutter - 下拉浮动操作按钮
问题描述
我有这个 floatingActionButton ,它具有以下代码动画。但是我应该怎么做才能让它下降呢?我的意思是我希望按钮从上方打开,项目在主浮动操作按钮下方打开。
import 'package:flutter/material.dart';
class FancyFab extends StatefulWidget {
final Function() onPressed;
final String tooltip;
final IconData icon;
FancyFab({this.onPressed, this.tooltip, this.icon});
@override
_FancyFabState createState() => _FancyFabState();
}
class _FancyFabState extends State<FancyFab>
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: Colors.blue,
end: Colors.red,
).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 add() {
return Container(
child: FloatingActionButton(
onPressed: null,
tooltip: 'Add',
child: Icon(Icons.add),
),
);
}
Widget image() {
return Container(
child: FloatingActionButton(
onPressed: null,
tooltip: 'Image',
child: Icon(Icons.image),
),
);
}
Widget inbox() {
return Container(
child: FloatingActionButton(
onPressed: null,
tooltip: 'Inbox',
child: Icon(Icons.inbox),
),
);
}
Widget toggle() {
return Container(
child: FloatingActionButton(
backgroundColor: _buttonColor.value,
onPressed: animate,
tooltip: 'Toggle',
child: AnimatedIcon(
icon: AnimatedIcons.menu_close,
progress: _animateIcon,
),
),
);
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value * 3.0,
0.0,
),
child: add(),
),
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value * 2.0,
0.0,
),
child: image(),
),
Transform(
transform: Matrix4.translationValues(
0.0,
_translateButton.value,
0.0,
),
child: inbox(),
),
toggle(),
],
);
}
}
你可以在这里看到实现: https ://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc
或者有没有为此目的的替代方案?
解决方案
这就是你要找的:https ://pub.dev/packages/speed_dial
或者,您甚至可以使用这些 FAB 设计:
推荐阅读
- apache-spark - 性能火花:2 个 m5.2xlarge 节点与 1 个 m5.4xlarge 节点
- c# - 在 C# 中创建登录表单
- android - Android - 将 Java-Native-Interface (JNI) 方法转换为 Renderscript
- leaflet - 使用传单进行搜索的自定义控件
- python - 如何在 Python 脚本中包含多个查找、替换条件
- python - 如何在 tkinter 中设置文本样式
- php - Laravel 7 - 请求的资源上没有“Access-Control-Allow-Origin”标头
- mysql - 如何在不正确的主机的mysql中删除用户。?
- python - 从函数内部的函数更改局部变量的值
- python - 数组的 Python 副本也会更改普通数组