作者:HIGO | 来源:互联网 | 2023-08-04 13:03
我能够像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 {
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),
)