Flutter-如何制作像gmail一样的浮动动作按钮动画?

我能够像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')));
  }
}

回答

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

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


以上是Flutter-如何制作像gmail一样的浮动动作按钮动画?的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>