Flutter快速操作菜单插件drag_speed_dial的使用

Flutter快速操作菜单插件drag_speed_dial的使用

简介

这个插件提供了一个高度可定制且互动的浮动操作按钮（FAB），不仅响应点击，还提供了动态拖动显示功能。非常适合那些希望在不牺牲美观的情况下增强导航效率和用户参与度的应用程序。

安装

在您的pubspec.yaml文件的依赖项部分添加以下行：

dependencies:
  drag_speed_dial: <最新版本>

使用方法

导入该类：

import 'package:drag_speed_dial/drag_speed_dial.dart';

简单的实现如下：

DragSpeedDial(
    isDraggable: false, // 是否可以拖动
    fabIcon: const Icon(
        Icons.add, // FAB图标
        color: Colors.white,
    ),
    dragSpeedDialChildren: [
        DragSpeedDialChild(
          onPressed: () {
            print("bonjour"); // 按钮点击时的操作
          },
          bgColor: Colors.blue, // 背景颜色
          icon: const Icon(Icons.grade_outlined), // 子按钮图标
        ),
        DragSpeedDialChild(
          onPressed: () {
            print("salut");
          },
          bgColor: Colors.yellow,
          icon: const Icon(Icons.inbox),
        ),
    ],
),

主要属性

完整示例Demo

import 'package:drag_speed_dial/drag_speed_dial.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> {
  bool isDraggable = true;
  DragSpeedDialChildrenAlignment alignment =
      DragSpeedDialChildrenAlignment.vertical;
  DragSpeedDialPosition initialPosition = DragSpeedDialPosition.bottomRight;
  bool snagOnScreen = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Stack(
          children: [
            Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const DefaultTextStyle(
                          style: TextStyle(color: Colors.black),
                          child: Text('isDraggable: ')),
                      Switch(
                          value: isDraggable,
                          onChanged: (value) {
                            setState(() {
                              isDraggable = value;
                            });
                          }),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const DefaultTextStyle(
                          style: TextStyle(color: Colors.black),
                          child: Text('Snag on screen: ')),
                      Switch(
                          value: snagOnScreen,
                          onChanged: (value) {
                            setState(() {
                              snagOnScreen = value;
                            });
                          }),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const DefaultTextStyle(
                          style: TextStyle(color: Colors.black),
                          child: Text('Fab Aligment ')),
                      DropdownButton<DragSpeedDialChildrenAlignment>(
                          value: alignment,
                          items: DragSpeedDialChildrenAlignment.values
                              .map((e) => DropdownMenuItem(
                                    value: e,
                                    child: Text(e.name),
                                  ))
                              .toList(),
                          onChanged: (value) {
                            setState(() {
                              alignment = value!;
                            });
                          }),
                    ],
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      const DefaultTextStyle(
                          style: TextStyle(color: Colors.black),
                          child: Text('Initial Position ')),
                      DropdownButton<DragSpeedDialPosition>(
                          value: initialPosition,
                          items: DragSpeedDialPosition.values
                              .map((e) => DropdownMenuItem(
                                    value: e,
                                    child: Text(e.name),
                                  ))
                              .toList(),
                          onChanged: (value) {
                            setState(() {
                              initialPosition = value!;
                            });
                          }),
                    ],
                  ),
                ],
              ),
            ),
            DragSpeedDial(
              isDraggable: isDraggable, // 是否可以拖动
              alignment: alignment, // 对齐方式
              initialPosition: initialPosition, // 初始位置
              snagOnScreen: snagOnScreen, // 是否贴附在屏幕上
              fabBgColor: Colors.red, // FAB背景颜色
              dragSpeedDialChildren: [
                DragSpeedDialChild(
                  onPressed: () {
                    print("bonjour"); // 点击时的操作
                  },
                  bgColor: Colors.blue, // 子项背景颜色
                  icon: const Icon(Icons.grade_outlined), // 子项图标
                ),
                DragSpeedDialChild(
                  onPressed: () {
                    print("salut");
                  },
                  bgColor: Colors.yellow,
                  icon: const Icon(Icons.inbox),
                ),
                DragSpeedDialChild(
                  onPressed: () {
                    print("salut");
                  },
                  bgColor: Colors.red,
                  icon: const Icon(Icons.headset_rounded),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}