Flutter浮动操作按钮动画插件animated_fab的使用

Flutter浮动操作按钮动画插件animated_fab的使用

Animated_FAB

一个包含动画浮动操作按钮的Flutter包。

Demo

如何使用

以下是使用animated_fab插件的完整示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated FAB 示例'),
      ),
      body: Center(
        child: Text(
          '点击浮动按钮查看动画效果！',
          style: TextStyle(fontSize: 20),
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.settings), label: ""),
        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: AnimatedFAB(
        // 动画框的子部件（当浮动按钮被按下时显示的动作框）
        animatedBox: Container(
          color: Colors.blue.withOpacity(0.5), // 设置背景颜色
          width: 200, // 动作框宽度
          height: 200, // 动作框高度
          child: Center(
            child: Text(
              '点击这里',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
          ),
        ),

        // 其他可选参数
        actionBoxHeight: 200, // 动作框的高度
        actionBoxWidth: 200, // 动作框的宽度
        buttonColor: Colors.red, // 按钮的颜色
        buttonHeight: 56, // 按钮的高度
        buttonWidth: 56, // 按钮的宽度
        durationInMilliseconds: 500, // 动画持续时间（毫秒）
        buttonDistanceFromButton: 40, // 按钮与主按钮的距离
        buttonBorderRadius: BorderRadius.circular(28), // 按钮的圆角半径
      ),
    );
  }
}

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

1 回复

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


animated_fab 是一个用于在 Flutter 中创建带有动画效果的浮动操作按钮（Floating Action Button, FAB）的插件。它允许你为 FAB 添加各种动画效果，如缩放、旋转、平移等，以增强用户体验。

安装插件

首先，你需要在 pubspec.yaml 文件中添加 animated_fab 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_fab: ^1.0.0  # 请检查最新版本

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

使用 animated_fab

以下是一个简单的示例，展示了如何使用 animated_fab 插件创建一个带有动画效果的浮动操作按钮。

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  bool _isFabVisible = true;

  void _toggleFabVisibility() {
    setState(() {
      _isFabVisible = !_isFabVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated FAB Demo'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _toggleFabVisibility,
          child: Text(_isFabVisible ? 'Hide FAB' : 'Show FAB'),
        ),
      ),
      floatingActionButton: AnimatedFAB(
        visible: _isFabVisible,
        onPressed: () {
          // 你的 FAB 点击逻辑
          print('FAB Pressed!');
        },
        child: Icon(Icons.add),
        animationDuration: Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        scale: 1.0,
        rotate: 0.0,
        translate: Offset(0, 0),
      ),
    );
  }
}

参数说明

  • visible: 控制 FAB 的可见性。
  • onPressed: 点击 FAB 时触发的回调函数。
  • child: FAB 的内容，通常是一个 Icon。
  • animationDuration: 动画的持续时间。
  • curve: 动画的曲线，默认是 Curves.easeInOut。
  • scale: FAB 的缩放比例，默认是 1.0。
  • rotate: FAB 的旋转角度，默认是 0.0。
  • translate: FAB 的平移偏移量，默认是 Offset(0, 0)。

自定义动画

你可以通过调整 scale、rotate 和 translate 参数来自定义 FAB 的动画效果。例如，你可以让 FAB 在显示时放大，或者在隐藏时旋转。

floatingActionButton: AnimatedFAB(
  visible: _isFabVisible,
  onPressed: () {
    print('FAB Pressed!');
  },
  child: Icon(Icons.add),
  animationDuration: Duration(milliseconds: 500),
  curve: Curves.easeInOut,
  scale: _isFabVisible ? 1.0 : 0.0,
  rotate: _isFabVisible ? 0.0 : 180.0,
  translate: Offset(0, _isFabVisible ? 0 : 100),
),
回到顶部