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

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

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

flutter_floaty 是一个用于在Flutter中创建可自定义、可拖动和动画浮动按钮的插件。本文将介绍如何使用这个插件，并提供一些示例代码。

特性

  • 可自定义的浮动按钮
  • 拖动时平滑动画
  • 不同形状和大小
  • 可更改背景颜色
  • 可选阴影效果
  • 辅助功能支持
  • 使用 isVisible 属性控制可见性
  • 鼠标悬停功能
  • 固有边界

示例

基本浮动按钮

这是一个简单的带有文本和圆角的浮动按钮。

// 设置小部件可拖动的确切边界
final boundaries = Rect.fromLTWH(
  0, 
  0, 
  MediaQuery.of(context).size.width, 
  MediaQuery.of(context).size.height * 0.75,
);

FlutterFloaty(
  intrinsicBoundaries: boundaries,
  width: 200,
  height: 50,
  builder: (context) => const Text(
    'Flutter Floaty 🎉',
    style: TextStyle(color: Colors.white),
  ),
  backgroundColor: Colors.blue,
  onDragBackgroundColor: Colors.blueAccent,
  borderRadius: 10,
  growingFactor: 1.3,
)

带图标的圆形浮动按钮

一个带有图标在中心的圆形按钮。

FlutterFloaty(
  width: 60,
  height: 60,
  initialX: 100,
  initialY: 300,
  builder: (context) => const Icon(
    Icons.add,
    color: Colors.white,
  ),
  backgroundColor: Colors.green,
  onDragBackgroundColor: Colors.greenAccent,
  borderRadius: 30,
  growingFactor: 1.3,
)

带文本的方形浮动按钮

一个方形按钮，中间带有文本。

FlutterFloaty(
  width: 100,
  height: 100,
  initialX: 200,
  initialY: 200,
  builder: (context) => const Center(
    child: Text(
      'Square',
      style: TextStyle(color: Colors.white),
    ),
  ),
  backgroundColor: Colors.red,
  onDragBackgroundColor: Colors.redAccent,
  borderRadius: 0,
)

带表情符号的圆形浮动按钮

一个显示表情符号的圆形按钮。

FlutterFloaty(
  width: 80,
  height: 80,
  initialX: 250,
  initialY: 400,
  builder: (context) => const Center(
    child: Text(
      '😊',
      style: TextStyle(fontSize: 32),
    ),
  ),
  backgroundColor: Colors.purple,
  onDragBackgroundColor: Colors.purpleAccent,
  borderRadius: 40,
)

带阴影的浮动按钮

一个带有阴影效果的按钮。

FlutterFloaty(
  width: 150,
  height: 50,
  initialX: 50,
  initialY: 500,
  builder: (context) => const Text(
    'Shadow Floaty',
    style: TextStyle(color: Colors.white),
  ),
  backgroundColor: Colors.orange,
  onDragBackgroundColor: Colors.orangeAccent,
  borderRadius: 25,
  shadow: BoxShadow(
    color: Colors.black.withOpacity(0.5),
    spreadRadius: 5,
    blurRadius: 10,
    offset: const Offset(0, 3),
  ),
)

复杂示例

以下是一个更复杂的示例，展示了多个浮动按钮的组合。

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static const backgroundColor = Color(0xFFF1EFE7);
  bool isPlaying = false;
  double progress = 0;
  Duration elapsed = Duration.zero;
  final Duration totalDuration = const Duration(minutes: 3);

  void togglePlayPause() {
    setState(() {
      isPlaying = !isPlaying;
    });
    if (isPlaying) {
      _startProgress();
    } else {
      _stopProgress();
    }
  }

  void _startProgress() {
    Future.doWhile(() async {
      await Future<void>.delayed(const Duration(seconds: 1));
      if (!isPlaying) return false;
      setState(() {
        elapsed += const Duration(seconds: 1);
        progress = elapsed.inSeconds / totalDuration.inSeconds;
      });
      return elapsed < totalDuration;
    });
  }

  void _stopProgress() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: backgroundColor,
      appBar: AppBar(
        centerTitle: true,
        title: const Text('FlutterFloaty Example'),
        backgroundColor: backgroundColor,
      ),
      body: Stack(
        children: [
          // Music Player Control with Progress Bar
          FlutterFloaty(
            width: 300,
            height: 150,
            initialX: 50,
            initialY: 150,
            builder: (context) => Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    IconButton(
                      icon: Icon(
                        isPlaying ? Icons.pause : Icons.play_arrow,
                        color: Colors.white,
                        size: 36,
                      ),
                      onPressed: togglePlayPause,
                    ),
                    const SizedBox(width: 20),
                    const Text(
                      'Now Playing: Flutter Beats',
                      style: TextStyle(color: Colors.white),
                    ),
                  ],
                ),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  child: LinearProgressIndicator(
                    value: progress,
                    color: Colors.red,
                    backgroundColor: Colors.grey,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  '${elapsed.inMinutes}:${(elapsed.inSeconds % 60).toString().padLeft(2, '0')} / ${totalDuration.inMinutes}:${(totalDuration.inSeconds % 60).toString().padLeft(2, '0')}',
                  style: const TextStyle(color: Colors.white),
                ),
              ],
            ),
            onDragBackgroundColor: Colors.black87,
          ),
          // Picture-in-Picture Video
          FlutterFloaty(
            width: 200,
            height: 150,
            initialX: 100,
            initialY: 350,
            builder: (context) => Container(
              decoration: BoxDecoration(
                color: Colors.black,
                borderRadius: BorderRadius.circular(10),
                image: const DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    'https://i3.ytimg.com/vi/erLk59H86ww/maxresdefault.jpg',
                  ),
                ),
              ),
              child: const Center(
                child: Icon(
                  Icons.play_circle_fill,
                  color: Colors.white,
                  size: 50,
                ),
              ),
            ),
            onDragBackgroundColor: Colors.black54,
          ),
          FlutterFloaty(
            width: 70,
            height: 70,
            builder: (context) => Container(
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: NetworkImage(
                    'https://avatars.githubusercontent.com/u/9919?s=280&v=4',
                  ),
                  fit: BoxFit.cover,
                ),
              ),
            ),
            backgroundColor: Colors.transparent,
            onDragBackgroundColor: Colors.transparent,
            borderRadius: 35,
          ),
          FlutterFloaty(
            width: 200,
            height: 50,
            builder: (context) => const Text(
              'Flutter Floaty 🎉',
              style: TextStyle(color: Colors.white),
            ),
            backgroundColor: Colors.blue,
            onDragBackgroundColor: Colors.blueAccent,
          ),
          FlutterFloaty(
            width: 100,
            height: 100,
            initialX: 200,
            initialY: 200,
            builder: (context) => const Center(
              child: Text(
                'Square',
                style: TextStyle(color: Colors.white),
              ),
            ),
            backgroundColor: Colors.red,
            onDragBackgroundColor: Colors.redAccent,
            borderRadius: 0,
          ),
          FlutterFloaty(
            width: 60,
            height: 60,
            initialX: 100,
            initialY: 300,
            builder: (context) => const Icon(
              Icons.add,
              color: Colors.white,
            ),
            backgroundColor: Colors.green,
            onDragBackgroundColor: Colors.greenAccent,
            borderRadius: 30,
          ),
          FlutterFloaty(
            width: 70,
            height: 70,
            builder: (context) => const Icon(
              Icons.person,
              size: 55,
            ),
            backgroundColor: Colors.transparent,
            onDragBackgroundColor: Colors.transparent,
            borderRadius: 35,
          ),
        ],
      ),
    );
  }
}

参数说明

以下是 FlutterFloaty 小部件使用的参数：

  • builder: WidgetBuilder - 显示在可拖动区域内的内容生成器函数。
  • initialX: double - 小部件的初始水平位置。
  • initialY: double - 小部件的初始垂直位置。
  • width: double - 小部件的初始宽度。
  • height: double - 小部件的初始高度。
  • backgroundColor: Color - 小部件的初始颜色。
  • onDragBackgroundColor: Color - 小部件被拖动时的背景颜色。
  • borderRadius: BorderRadius - 容器的边框半径。
  • growingFactor: double - 拖动时小部件增长的比例因子。
  • margin: EdgeInsetsGeometry? - 容器的外边距。
  • padding: EdgeInsetsGeometry? - 容器的内边距。
  • shape: BoxShape? - 容器的形状。
  • shadow: BoxShadow? - 容器的阴影。
  • scale: double - Transform.scale 小部件的比例。
  • onTap: VoidCallback? - 点击小部件时的回调。
  • onHover: VoidCallback? - 用户鼠标悬停时的回调。
  • isVisible: bool? - 根据状态隐藏或显示小部件。
  • intrinsicBoundaries: Rect? - 确定小部件可拖动的边界。
  • enableAnimation: bool? - 启用拖动时的小部件增长效果。
  • onPausePlaceHolder: Widget? - 拖动结束时显示的占位符小部件生成器。

开始使用

  1. 克隆仓库：
    git clone https://github.com/jordyhers/flutter_floaty.git
  2. 导航到项目目录：
    cd flutter_floaty
  3. 安装依赖：
    flutter pub get
  4. 运行项目：
    flutter run

贡献

欢迎贡献！请随时提交拉取请求或打开问题。

许可证

该项目采用 MIT 许可证。详见 LICENSE 文件。

集成测试

非常优秀的 Flutter 插件使用 [fluttium][fluttium_link] 进行集成测试。这些测试位于面向前端的包 flutter_floaty 示例中。

要运行集成测试，请从项目的根目录执行以下命令：

cd flutter_floaty/example
fluttium test flows/test_platform_name.yaml


以上内容详细介绍了 `flutter_floaty` 插件的使用方法，并提供了完整的示例代码和参数说明。希望对你有所帮助！

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用flutter_floaty插件来实现浮动操作按钮（FAB）的代码示例。flutter_floaty插件允许你创建具有多个操作项的浮动按钮菜单。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_floaty: ^latest_version  # 请替换为最新的版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤来使用flutter_floaty：

1. 导入包

在你的Dart文件中导入flutter_floaty包：

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

2. 定义FloatyAction和FloatyMenu

你需要定义一些FloatyAction（浮动操作项）和一个FloatyMenu（浮动菜单）。

List<FloatyAction> floatyActions = [
  FloatyAction(
    iconData: Icons.add,
    title: 'Add',
    onPressed: () {
      // 执行添加操作
      print('Add Pressed');
    },
  ),
  FloatyAction(
    iconData: Icons.edit,
    title: 'Edit',
    onPressed: () {
      // 执行编辑操作
      print('Edit Pressed');
    },
  ),
  FloatyAction(
    iconData: Icons.delete,
    title: 'Delete',
    onPressed: () {
      // 执行删除操作
      print('Delete Pressed');
    },
  ),
];

3. 将FloatyMenu添加到你的Scaffold中

在你的Scaffold的floatingActionButton属性中使用FloatyMenu。

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

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Floaty Demo'),
      ),
      body: Center(
        child: Text('Tap the floating action button below'),
      ),
      floatingActionButton: FloatyMenu(
        data: [
          FloatyItem(
            title: 'Main FAB',
            child: FloatyButton(
              iconData: Icons.add,
              onPressed: () {
                print('Main FAB Pressed');
              },
            ),
            items: floatyActions,
          ),
        ],
        anchor: FloatyAnchor.bottomRight,
        align: FloatyAlign.start,
        menuWidth: 200,
        menuRadius: 15,
        itemCount: 3,
        openDuration: Duration(milliseconds: 300),
        closeDuration: Duration(milliseconds: 300),
      ),
    );
  }
}

4. 运行你的应用

保存所有文件并运行你的Flutter应用。你应该会看到一个带有浮动操作按钮的界面，当你点击主FAB按钮时，会显示一个包含多个操作项的菜单。

这个示例展示了如何使用flutter_floaty插件在Flutter应用中实现一个具有多个操作项的浮动操作按钮菜单。你可以根据需要进一步自定义和扩展这个示例。

回到顶部