在颤振中如何改变FAB(Floating Action Button)自定义动画图标

Question

我是 Flutter 的新手，现在我坚持要更改 FAB 动画。实际上，我正在尝试在按 FAB 之前添加图标，然后在按 FAB 后更改图标关闭添加图标。 我提供一个动画 gif 文件链接以更了解如果有人知道解决方案请建议我解决这个问题。

这里是链接https://miro.medium.com/max/468/1*qGa6VU4grjqEwAOScRm9BA.gif

在此链接中提供的动画显示，在按下它之前显示菜单选项图标，按下它之后显示关闭图标，但我想添加选项而不是菜单选项。

就像 add_close 不是 menu_close 动画图标。

希望你能理解我的问题并给我建议

Answer 1

我认为此代码满足您的要求。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter FAB Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Text("FAB"),
      ),
      floatingActionButton: AnimatedIconButton(
      
        size: 30,
        onPressed: () {
        },
        duration: Duration(milliseconds: 200),
        endIcon: Icon(
          Icons.close,
          color: Colors.white,
        ),
        startIcon: Icon(
          Icons.add,
          color: Colors.white,
        ),
        startBackgroundColor: Colors.blue,
        endBackgroundColor: Colors.blue,
      ),
    );
  }
}

这是我使用的命名空间：

import 'package:flutter/material.dart';
import 'package:animated_icon_button/animated_icon_button.dart';

Answer 2

此代码将满足您的所有要求，例如动画、按下时的多个 fab 按钮，还支持将图像作为 fab 图标。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter FAB Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: UniWidget(),
    );
  }
}

class UniWidget extends StatefulWidget {
  @override
  _UniWidgetState createState() => _UniWidgetState();
}

class _UniWidgetState extends State<UniWidget> {
  @override
  Widget build(BuildContext context) {
    var childButtons = List<UnicornButton>();

    childButtons.add(UnicornButton(
        hasLabel: false,
        currentButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          mini: false,
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Image.asset('assets/images/arrow.png'),
          ),
          onPressed: () {
            print('scanbar');
          },
        )));

    childButtons.add(UnicornButton(
        hasLabel: false,
        currentButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          mini: false,
          child: Padding(
            padding: const EdgeInsets.all(15),
            child: Image.asset('assets/images/contact.png'),
          ),
          onPressed: () {
            print('Contact');
          },
        )));

    return Scaffold(
        floatingActionButton: UnicornDialer(
            parentButtonBackground: Colors.blue,
            orientation: UnicornOrientation.VERTICAL,
            childPadding: 10.0,
            parentButton: Icon(Icons.add),
            childButtons: childButtons),
        appBar: AppBar(
          title: Text("Fab demo"),
        ),
        body: Center());
  }
}

这里是命名空间

import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';

我希望它能够满足您的所有类型的要求并在您的项目中运行良好。