Flutter单次可点击按钮插件single_tapable_buttons的使用

单次可点击按钮插件single_tapable_buttons

Customizable buttons with single tap control

特性

SingleTapableButton 提供多种类型的按钮以供自定义：

ElevatedButton
TextButton
IconButton
OutlinedButton

变更日志

查看变更日志了解新功能和重大更改。

此按钮包允许我们更好地控制按钮的点击状态。

使用示例

以下是一个完整的示例，展示了如何使用 single_tapable_buttons 插件创建不同类型的单次可点击按钮。

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:single_tapable_buttons/single_tapable_buttons.dart';

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

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Single Tapable Button Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Demo 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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          const Text('Loader enabled Examples'),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.elevatedButton,
              width: 400,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.textButton,
              width: 400,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.iconButton,
              width: 40,
              icon: const Icon(Icons.ac_unit),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.listItem,
              width: 40,
              child: const Icon(Icons.ac_unit),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.outlinedButton,
              width: 400,
              backgroundColor: Colors.white,
              borderColor: Colors.black,
              child: const Text('ButtonType.outlinedButton'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const Divider(
            height: 1,
          ),
          const Text('Loader disabled Examples'),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.elevatedButton,
              width: 400,
              isLoaderEnabled: false,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.textButton,
              width: 400,
              isLoaderEnabled: false,
              child: const Text('Tap me now...'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.iconButton,
              width: 40,
              isLoaderEnabled: false,
              icon: const Icon(Icons.ac_unit),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.listItem,
              width: 40,
              isLoaderEnabled: false,
              child: const Icon(Icons.ac_unit),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
          const SizedBox(height: 20),
          Center(
            child: SingleTapableButton(
              buttonType: ButtonType.outlinedButton,
              width: 400,
              backgroundColor: Colors.white,
              borderColor: Colors.black,
              isLoaderEnabled: false,
              child: const Text('ButtonType.outlinedButton'),
              onPressed: (StreamSink<bool> canBePressed) async {
                // Do whatever has to be done

                if (kDebugMode) {
                  print('Button is pressed');
                }

                // 我们正在进行API调用，这需要一些时间

                // 使按钮再次可点击
                Future.delayed(
                  const Duration(milliseconds: 2000),
                  () => canBePressed.add(true),
                );
                // canBePressed.add(true);
              },
            ),
          ),
        ],
      ),
    );
  }
}

更多关于Flutter单次可点击按钮插件single_tapable_buttons的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

yuanlaile 1楼

更多关于Flutter单次可点击按钮插件single_tapable_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

single_tapable_buttons 是一个 Flutter 插件，旨在防止按钮在短时间内被多次点击，从而避免因多次触发事件而导致的问题。这个插件通常用于需要防止用户快速多次点击按钮的场景，比如提交表单、触发网络请求等。

安装

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

dependencies:
  flutter:
    sdk: flutter
  single_tapable_buttons: ^1.0.0  # 请根据最新版本号进行替换

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

使用方法

single_tapable_buttons 插件提供了 SingleTapButton 组件，你可以用它来替换普通的 ElevatedButton、TextButton 或 OutlinedButton 等按钮组件。

基本用法

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Single Tapable Button Example')),
        body: Center(
          child: SingleTapButton(
            onTap: () {
              // 处理按钮点击事件
              print('Button Clicked!');
            },
            child: Text('Click Me'),
          ),
        ),
      ),
    );
  }
}

在这个例子中，SingleTapButton 会防止用户在短时间内多次点击按钮。

自定义间隔时间

你可以通过 cooldownDuration 参数来设置按钮点击的最小间隔时间。默认情况下，间隔时间为 500 毫秒。

SingleTapButton(
  onTap: () {
    print('Button Clicked!');
  },
  cooldownDuration: Duration(seconds: 1),  // 设置间隔时间为 1 秒
  child: Text('Click Me'),
)

使用不同类型的按钮

SingleTapButton 可以与其他类型的按钮组件一起使用，比如 ElevatedButton、TextButton 等。

SingleTapButton(
  onTap: () {
    print('Elevated Button Clicked!');
  },
  child: ElevatedButton(
    onPressed: () {},  // 这里可以留空，因为点击事件由 SingleTapButton 处理
    child: Text('Elevated Button'),
  ),
)