Flutter浮动菜单插件fan_floating_menu的使用

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

Flutter浮动菜单插件fan_floating_menu的使用

fan_floating_menu 是一个可自定义的浮动操作按钮菜单插件，可以弹出带有特殊动画的浮动按钮。

示例图

安装

在你的 Flutter 项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk:
  fan_floating_menu: any

然后导入 fan_floating_menu 包：

import 'package:fan_floating_menu/fan_floating_menu.dart';

使用

创建一个 FanFloatingMenu 小部件，并传递所需的参数：

FanFloatingMenu(
  menuItems: [
    FanMenuItem(onTap: () {}, icon: Icons.edit_rounded, title: 'Edit Texts'),
    FanMenuItem(onTap: () {}, icon: Icons.save_rounded, title: 'Save Notes'),
    FanMenuItem(onTap: () {}, icon: Icons.send_rounded, title: 'Send Images'),
  ],
)

自定义

你可以通过以下参数来自定义 FanFloatingMenu 小部件：

/// 定义整个浮动菜单的方向。
/// 默认为 [FanMenuDirection.ltr]
final FanMenuDirection fanMenuDirection;

/// 定义菜单项，类型为 [FanMenuItem]。
final List<FanMenuItem> menuItems;

/// 定义所有动画使用的曲线。
/// 默认为 [Curves.easeInOutBack]
final Curve expandItemsCurve;

/// 定义切换按钮的小部件。
/// 如果为 null，则显示加号图标。
final Widget? toggleButtonWidget;

/// 定义切换按钮图标的颜色。
/// 默认为 [Colors.white]
final Color toggleButtonIconColor;

/// 定义切换按钮背景的颜色。
/// 默认为 [Colors.pink]
final Color toggleButtonColor;

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 fan_floating_menu 插件：

import 'package:fan_floating_menu/fan_floating_menu.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: 'FanFloatingMenu',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(50),
        child: FanFloatingMenu(
          menuItems: [
            FanMenuItem(onTap: () {}, icon: Icons.edit_rounded, title: 'Edit Texts'),
            FanMenuItem(onTap: () {}, icon: Icons.save_rounded, title: 'Save Notes'),
            FanMenuItem(onTap: () {}, icon: Icons.send_rounded, title: 'Send Images'),
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用fan_floating_menu插件的示例代码。这个插件允许你创建一个浮动菜单，非常适合在应用中实现快捷操作功能。

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

dependencies:
  flutter:
    sdk: flutter
  fan_floating_menu: ^最新版本号  # 请替换为实际发布的最新版本号

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

接下来，你可以在你的Flutter应用中实现浮动菜单。以下是一个完整的示例代码：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey _floatingActionButtonKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Floating Menu Demo'),
      ),
      body: Center(
        child: Text('Scroll down to see the floating action button'),
      ),
      floatingActionButton: FanFloatingActionButton(
        key: _floatingActionButtonKey,
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
        menuButtons: [
          FanFloatingActionButtonItem(
            icon: Icon(Icons.directions_car),
            backgroundColor: Colors.red,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Car Icon Pressed'),
              ));
            },
          ),
          FanFloatingActionButtonItem(
            icon: Icon(Icons.directions_bike),
            backgroundColor: Colors.green,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Bike Icon Pressed'),
              ));
            },
          ),
          FanFloatingActionButtonItem(
            icon: Icon(Icons.directions_walk),
            backgroundColor: Colors.purple,
            onPressed: () {
              ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                content: Text('Walk Icon Pressed'),
              ));
            },
          ),
        ],
        onPressed: () {
          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
            content: Text('Main FAB Pressed'),
          ));
        },
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: 0,
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包括一个FanFloatingActionButton（浮动操作按钮）。这个按钮有三个子项，每个子项都是一个FanFloatingActionButtonItem。当用户点击主按钮或任何一个子按钮时，会显示一个SnackBar消息。

注意几点：

  1. FanFloatingActionButton的key属性用于唯一标识这个按钮，这在某些情况下（如动画处理）可能会用到。
  2. menuButtons列表包含了所有的子菜单项，每个子菜单项都包含一个图标、背景颜色和点击事件处理函数。
  3. onPressed属性是主按钮的点击事件处理函数。

你可以根据需要自定义图标、颜色和行为。希望这个示例能帮你快速上手fan_floating_menu插件的使用！

回到顶部