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

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

特性

  • 🚀 跨平台：适用于移动设备、桌面和浏览器
  • ❤️ 简单易用
  • 🎈 不依赖原生组件

开始使用

你可以通过调用 AnimatedFloatingButton 来使用 AnimatedFloatingButton。

为了避免阴影填充问题，请设置 floatingActionButtonLocation：

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

示例代码

import 'package:animated_floating_button_pro/floating_action_button.dart';
import 'package:animated_floating_button_pro/floating_button_props.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个小部件是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: AnimatedFloatingButton(
        shape: const CircleBorder(), // 设置浮动按钮的形状为圆形
        padding: const EdgeInsets.all(16), // 设置浮动按钮周围的内边距
        childrenProps: [
          FloatingButtonProps(
            label: "First", // 第一个浮动按钮的标签
            icon: Icons.one_x_mobiledata, // 第一个浮动按钮的图标
            action: () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("First"))), // 按钮点击事件
          ),
          FloatingButtonProps(
            label: "Second", // 第二个浮动按钮的标签
            customIcon: const Text('2'), // 自定义图标
            labelDecoration: BoxDecoration(
              color: Colors.green, // 标签背景颜色
              borderRadius: BorderRadius.circular(8), // 标签圆角
            ),
            labelStyle: const TextStyle(color: Colors.white), // 标签文字样式
            action: () => ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text("Second"))), // 按钮点击事件
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 animated_floating_button_pro 插件的示例代码。这个插件允许你创建带有动画效果的浮动按钮（FAB）。

首先，确保你已经在 pubspec.yaml 文件中添加了 animated_floating_button_pro 依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_floating_button_pro: ^x.y.z  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

以下是一个完整的 Flutter 应用示例，展示了如何使用 animated_floating_button_pro：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final List<IconData> icons = [Icons.add, Icons.edit, Icons.delete];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Floating Button Pro Demo'),
      ),
      body: Center(
        child: Text('Selected Index: $selectedIndex'),
      ),
      floatingActionButton: AnimatedFloatingActionButtonPro(
        mainButton: FloatingActionButton(
          backgroundColor: Colors.blue,
          onPressed: () {},
          child: Icon(icons[selectedIndex]),
        ),
        floatingActionButtons: List.generate(
          icons.length,
          (index) => FloatingActionButton(
            heroTag: 'button_$index',
            backgroundColor: Colors.blueAccent,
            onPressed: () {
              setState(() {
                selectedIndex = index;
              });
            },
            child: Icon(icons[index]),
          ),
        ),
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.end,
        mainButtonAnimationDuration: Duration(milliseconds: 300),
        otherButtonsAnimationDuration: Duration(milliseconds: 300),
      ),
    );
  }
}

代码解释

  1. 依赖引入：

    import 'package:animated_floating_button_pro/animated_floating_button_pro.dart';

  2. 创建主应用：

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

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

  3. 主页面：

    • 创建一个 StatefulWidget，用于管理FAB的状态。
    • 使用 AnimatedFloatingActionButtonPro 创建一个带有动画效果的FAB。
    • 使用 List.generate 方法生成多个浮动按钮。

  4. FAB配置：

    • mainButton：主按钮，点击时不会触发任何操作（可以自定义）。
    • floatingActionButtons：其他按钮，点击时会改变 selectedIndex，从而改变主按钮的图标。
    • 动画持续时间通过 mainButtonAnimationDuration 和 otherButtonsAnimationDuration 设置。

这个示例展示了如何使用 animated_floating_button_pro 插件来创建一个带有动画效果的浮动按钮，并根据用户的选择改变主按钮的图标。你可以根据需要进一步自定义按钮的样式和行为。

回到顶部