Flutter-如何制作类似gmail的浮动动作按钮动画

Question

我可以制作类似于Gmail应用程序的浮动动作按钮动画，但当我的isExpanded为false时，我会得到一点余量。有什么解决方案吗？

这是我的代码

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool isExpanded = false;
Widget build(context) {
return Scaffold(
floatingActionButton: AnimatedContainer(
width: isExpanded ? 150 : 56,
height: 56,
duration: Duration(milliseconds: 300),
child: FloatingActionButton.extended(
onPressed: () {},
icon: Icon(Icons.ac_unit),
label: isExpanded ? Text("Start chat") : SizedBox(),
),
),
appBar: AppBar(),
body: FlatButton(
onPressed: () {
setState(() {
isExpanded = !isExpanded;
});
},
child: Text('Press here to change FAB')));
}
}

Answer 1

看起来FloatingActionButton为图标设置了一些硬编码填充。要解决此问题，您可以执行以下操作：

FloatingActionButton.extended(
onPressed: () {},
icon: isExpanded ? Icon(Icons.ac_unit) : null,
label: isExpanded ? Text("Start chat") : Icon(Icons.ac_unit),
)

Answer 2

如果你想要一个动画，那么你必须编写自己的自定义fab:

class ScrollingExpandableFab extends StatefulWidget {
const ScrollingExpandableFab({
Key? key,
this.controller,
required this.label,
required this.icon,
this.onPressed,
this.scrollOffset = 50.0,
this.animDuration = const Duration(milliseconds: 500),
}) : super(key: key);
final ScrollController? controller;
final String label;
final Widget icon;
final VoidCallback? onPressed;
final double scrollOffset;
final Duration animDuration;
@override
State<ScrollingExpandableFab> createState() => _ScrollingExpandableFabState();
}
class _ScrollingExpandableFabState extends State<ScrollingExpandableFab>
with TickerProviderStateMixin {
late final AnimationController _controller = AnimationController(
duration: widget.animDuration,
vsync: this,
);
late final Animation<double> _anim = Tween<double>(begin: 0.0, end: 1.0)
.animate(CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
Color get _backgroundColor =>
Theme.of(context).floatingActionButtonTheme.backgroundColor ??
Theme.of(context).colorScheme.secondary;
ScrollController? get _scrollController => widget.controller;
_scrollListener() {
final position = _scrollController!.position;
if (position.pixels > widget.scrollOffset &&
position.userScrollDirection == ScrollDirection.reverse) {
_controller.forward();
} else if (position.pixels <= widget.scrollOffset &&
position.userScrollDirection == ScrollDirection.forward) {
_controller.reverse();
}
}
@override
void initState() {
super.initState();
_scrollController?.addListener(_scrollListener);
}
@override
void dispose() {
_scrollController?.removeListener(_scrollListener);
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ConstrainedBox(
constraints: const BoxConstraints.tightFor(height: 48.0),
child: AnimatedBuilder(
animation: _anim,
builder: (context, child) => Material(
elevation: 4.0,
type: MaterialType.button,
color: _backgroundColor,
shape: const CircleBorder(),
clipBehavior: Clip.antiAlias,
child: InkWell(
onTap: widget.onPressed,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
widget.icon,
ClipRect(
child: Align(
alignment: AlignmentDirectional.centerStart,
widthFactor: 1 - _anim.value,
child: Opacity(
opacity: 1 - _anim.value,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: SimpleclubText.button(widget.label),
),
),
),
),
],
),
),
),
),
),
);
}
}

Answer 3

请遵循以下示例：

FloatingActionButton.extended(
onPressed: () {
setState(() {
expanded = !expanded;
});
},
backgroundColor: context.theme.colorScheme.secondary,
label: expanded ? Text(t.addPlan) : Icon(Icons.add),
icon: expanded ? Icon(Icons.add) : null,
shape: expanded ? null : CircleBorder(),
),
);

重要的是，不要在晶圆厂上设置isExtended，并且在晶圆厂没有扩展时需要设置CircleBorder，以确保晶圆厂仍然具有圆形。

我希望这能有所帮助！