[英]Flutter - How to Make floating action button animation like gmail?
我可以制作一个非常相似的浮动操作按钮 animation 就像Gmail应用程序一样,但是当我isExpanded
为假时,我得到了一点余量。 有什么解决办法吗?
这是我的代码
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')));
}
}
看起来FloatingActionButton
为图标设置了一些硬编码的填充。 要解决此问题,您可以执行以下操作:
FloatingActionButton.extended(
onPressed: () {},
icon: isExpanded ? Icon(Icons.ac_unit) : null,
label: isExpanded ? Text("Start chat") : Icon(Icons.ac_unit),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.