Question

我是新手，现在我不得不更改FAB动画。实际上，我在尝试按FAB之前已添加图标，然后按FAB更改了图标的关闭。我提供了一个动画gif文件链接，以进一步了解是否有人知道该解决方案，请建议我解决此问题。

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

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

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

我希望它能满足您所有类型的要求并在您的项目中正常工作。

在颤抖中如何更改FAB（浮动操作按钮）自定义动画图标

2 个答案: