Flutter动画浮动按钮插件animated_floating_buttons的使用

发布于 1周前 作者 phonegap100 来自 Flutter

Flutter动画浮动按钮插件animated_floating_buttons的使用

此包基于Agung Surya的教程。您可以访问他的帖子以获取有关该包的更多技术信息。 [https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc](https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc)

开始使用

该项目是Dart软件包的起点,包含可以在多个Flutter或Dart项目之间轻松共享的代码模块。

要开始使用Flutter,请参阅我们的在线文档,其中提供了教程、示例、移动开发指南和完整的API参考。

截图

演示效果

使用方法

添加依赖

在您的Flutter项目中添加以下依赖:

dependencies:
  ...
  animated_floating_buttons: ^0.0.1

示例代码

首先需要导入包:

import 'package:animated_floating_buttons/animated_floating_buttons.dart';

接下来创建一个GlobalKey实例,用于控制动画按钮的状态:

final GlobalKey<AnimatedFloatingActionButtonState> key = GlobalKey<AnimatedFloatingActionButtonState>();

然后定义您想要显示的浮动按钮:

Widget float1() {
  return Container(
    child: FloatingActionButton(
      onPressed: () {
        // Add your action here for the first button
      },
      heroTag: "btn1",
      tooltip: 'First button',
      child: Icon(Icons.add),
    ),
  );
}

Widget float2() {
  return Container(
    child: FloatingActionButton(
      onPressed: () {
        // Add your action here for the second button
      },
      heroTag: "btn2",
      tooltip: 'Second button',
      child: Icon(Icons.edit),
    ),
  );
}

最后,在Scaffold中使用AnimatedFloatingActionButton组件:

Scaffold(
  appBar: AppBar(
    title: Text("Example"),
  ),
  floatingActionButton: AnimatedFloatingActionButton(
    fabButtons: <Widget>[float1(), float2()],
    key: key,
    colorStartAnimation: Colors.blue,
    colorEndAnimation: Colors.red,
    animatedIconData: AnimatedIcons.menu_close, // 主按钮图标
  ),
  body: Center(
    child: Text('Tap on the buttons!'),
  ),
)

完整示例可以在这里找到:example here

注意事项

请注意,您必须为每个新的FAB传递heroTag参数,否则会抛出异常。

如果您有任何问题或需要进一步的帮助,请随时提问!


更多关于Flutter动画浮动按钮插件animated_floating_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画浮动按钮插件animated_floating_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter项目中使用animated_floating_buttons插件来实现动画浮动按钮的一个代码示例。首先,确保你已经在pubspec.yaml文件中添加了该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  animated_floating_action_button: ^0.5.0  # 请检查最新版本号

然后,运行flutter pub get来安装依赖。

接下来,在你的Flutter应用中,你可以按照以下方式使用AnimatedFloatingActionButton

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Floating Action Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  bool isOpen = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Floating Action Button Demo'),
      ),
      body: Center(
        child: Text('Tap the button below to see the animation!'),
      ),
      floatingActionButton: AnimatedFloatingActionButton(
        icon: AnimatedIcons.menu_close, // 初始图标
        status: isOpen ? AnimatedIconData.close : AnimatedIconData.menu, // 动画状态
        size: 56.0,
        onPressed: () {
          setState(() {
            isOpen = !isOpen;
          });
        },
        builder: (context, anim, child) {
          return FloatingActionButton(
            backgroundColor: Colors.blue,
            child: anim,
            onPressed: () {
              // 这个按钮的点击事件仅在isOpen为false时有效
              if (!isOpen) {
                // 打开子按钮时的事件
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('Main button pressed!'),
                ));
              }
            },
            tooltip: isOpen ? 'Close' : 'Open',
          );
        },
        children: <Widget>[
          FloatingActionButton(
            heroTag: 'button1',
            backgroundColor: Colors.red,
            child: Icon(Icons.add),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Button 1 pressed!'),
              ));
            },
            tooltip: 'Button 1',
          ),
          FloatingActionButton(
            heroTag: 'button2',
            backgroundColor: Colors.green,
            child: Icon(Icons.edit),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Button 2 pressed!'),
              ));
            },
            tooltip: 'Button 2',
          ),
          FloatingActionButton(
            heroTag: 'button3',
            backgroundColor: Colors.yellow,
            child: Icon(Icons.share),
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Button 3 pressed!'),
              ));
            },
            tooltip: 'Button 3',
          ),
        ],
      ),
    );
  }
}

代码说明:

  1. 依赖引入:在pubspec.yaml文件中添加animated_floating_action_button依赖。
  2. 主应用MyApp是一个简单的Material应用,包含一个主页面MyHomePage
  3. 主页面MyHomePage是一个有状态的小部件,用于控制浮动按钮的打开和关闭状态。
  4. 动画浮动按钮:使用AnimatedFloatingActionButton来创建带有动画效果的浮动按钮。
    • iconstatus属性控制动画图标的显示。
    • onPressed属性处理主按钮的点击事件,用于切换按钮的打开和关闭状态。
    • builder属性用于自定义主按钮的外观和行为。
    • children属性包含子按钮列表,当主按钮处于打开状态时显示。

运行这段代码,你将看到一个带有动画效果的浮动按钮,点击主按钮可以展开或收起子按钮,并且每个子按钮都有自己的点击事件。

回到顶部