Flutter动画效果插件flutter_animator_widgets的使用

Flutter动画效果插件flutter_animator_widgets的使用

flutter_animator_widgets 提供了各种炫酷可自定义样式的动画组件。目前只有一个主要组件 FlyOutMenu，但未来将会有更多的动画组件加入。

零安全支持

• 对于零安全版本，请使用 flutter_animator_widgets: ^1.0.2
• 对于非零安全版本，请使用 flutter_animator_widgets: 1.0.1

本项目使用了 flutter_animator 项目来实现动画效果。强烈建议你查看 flutter_animator 的文档。

入门指南

FlyOutMenu

FlyOutMenu 是一个可以展开和收起的菜单组件。

基本示例

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Text(pressedItem != null
          ? "Last pressed: $pressedItem"
          : "No items pressed"),
    ),
    floatingActionButton: FlyOutMenu(
      key: _flyoutMenuKey,
      /// 使用全局键以便在按钮点击时调用 _flyoutMenuKey.currentState.close()
      buttons: buttons,
      /// List<Widget>，你可以添加自己的组件并自行处理点击事件
      animation: FlyOutAnimation.flipperCard,
      /// 多种炫酷的动画可供选择
      defaultIcon: Icons.add,
      /// 标准（关闭）状态的图标
      activeIcon: Icons.close,
      /// 激活（打开）状态的图标
    ),
  );
}

完整示例代码

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

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

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个全局键以管理 FlyOutMenu 状态
  GlobalKey<FlyOutMenuState> _flyoutMenuKey = GlobalKey<FlyOutMenuState>();

  // 初始化按钮标签列表
  List<String> buttonLabels = List<String>.generate(4, (index) => "Button ${index + 1}");

  // 存储按钮列表
  List<Widget> buttons = [];

  // 存储最后点击的按钮标签
  String? pressedItem;

  [@override](/user/override)
  void initState() {
    // 在框架绘制后设置按钮列表
    WidgetsBinding.instance!.addPostFrameCallback((_) {
      setState(() {
        buttons = buttonLabels
            .map((label) => ElevatedButton(
                  style: ButtonStyle(
                      backgroundColor: MaterialStateColor.resolveWith(
                          (states) => Theme.of(context).buttonColor)),
                  onPressed: () {
                    setState(() {
                      pressedItem = label;
                    });
                    _flyoutMenuKey.currentState!.close();
                  },
                  child: Text(label),
                ))
            .toList();
      });
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Text(pressedItem != null
            ? "Last pressed: $pressedItem"
            : "No items pressed"),
      ),
      floatingActionButton: FlyOutMenu(
        key: _flyoutMenuKey,
        buttons: buttons,
        animation: FlyOutAnimation.flipperCard,
        defaultIcon: Icons.add,
        activeIcon: Icons.close,
      ),
    );
  }
}