Flutter可长按按钮插件holdable_button的使用

介绍

Holdable Button 是一个Flutter插件，允许您创建带有独特动画的交互式按钮。它使用户能够按住按钮，在其边界显示加载动画，并在动画完成后触发回调。

动画演示 🎥

边缘加载类型：

填充加载类型：

特点 🚀

• 交互式动画：通过响应长按操作的按钮吸引用户，提供互动且视觉上吸引人的体验。
• 可定制：通过调整按钮颜色、加载颜色、圆角半径、子部件、动画持续时间和起始位置等参数来匹配您的应用程序设计。
• 用户参与度：通过引入一种新颖的方式来触发操作，鼓励用户与您的应用进行互动。

如何使用 🛠️

1. 在 pubspec.yaml 文件中添加 Holdable Button 插件：

   dependencies:
     holdable_button: any
   

2. 运行以下命令安装插件：

   flutter pub get
   

3. 在 Dart 代码中导入包：

   import 'package:holdable_button/holdable_button.dart';
   

4. 实现 HoldableButton 小部件：

   HoldableButton(
     loadingType: LoadingType.edgeLoading,
     width: 300,
     height: 200,
     buttonColor: Colors.blue,
     loadingColor: Colors.white,
     radius: 15.0,
     child: Text('Hold Me'),
     duration: 5,
     startPoint: 0.25,
     hasVibrate: true,
     onConfirm: () {
       // 动画完成后的回调函数
       print("Button held successfully!");
     },
   )
   

自定义选项 ⚙️

HoldableButton 小部件支持以下参数：

• loadingType: 加载类型：edgeLoading 或 fillingLoading。
• buttonColor: 按钮的颜色。
• loadingColor: 加载动画的颜色。
• radius: 按钮的圆角半径。
• child: 按钮内部的小部件。
• duration: 动画持续时间（秒）。
• startPoint: edgeLoading 类型的起始位置。
• hasVibrate: 加载完成后是否启用震动。
• onConfirm: 动画完成后的回调函数。

您可以自由尝试这些参数以实现所需的外观和行为。

示例 Demo

下面是一个完整的示例 demo，展示了如何使用 holdable_button 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Holdable Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Holdable Button Example'),
        ),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: HoldableButton(
              loadingType: LoadingType.edgeLoading,
              width: 200,
              height: 100,
              buttonColor: Colors.blue,
              loadingColor: Colors.white,
              radius: 15.0,
              child: Text('Hold Me', style: TextStyle(color: Colors.white)),
              duration: 5,
              startPoint: 0.25,
              hasVibrate: true,
              onConfirm: () {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Button held successfully!')),
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}