在flutter中如何更改FAB(Floating Action Button)自定义动画图标

Question

我是 flutter 的新手，现在我不得不更改 FAB animation.Actually 我正在尝试在我按下 FAB 之前尝试添加图标，然后在按下 FAB 之后它更改图标关闭 insted 添加图标。我提供了一个动画 gif 文件 link 以加深理解，如果有人知道解决方案，请建议我解决这个问题。

这里是linkhttps://miro.medium.com/max/468/1*qGa6VU4grjqEwAOScRm9BA.gif

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

喜欢 add_close 不是 menu_close animationIcon。

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

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';

我希望它能满足您的所有类型的要求，并在您的项目中发挥良好作用。

在flutter中如何更改FAB(Floating Action Button)自定义动画图标

In flutter How to change FAB (Floating Action Button) custom animation Icon

flutter

flutter-layout

flutter-animation