Flutter滑动按钮组件插件slider_button_lite的使用

slider_button_lite 是一个轻量级且易于使用的 Flutter 库，它提供了一个可自定义的滑动按钮，并内置了进度条功能。它可以简化实现带有自动进度跟踪的交互式滑动按钮的过程，并确保支持空安全。

特性

该库旨在通过简洁且功能强大的滑动按钮增强您的应用界面。此包提供了多种功能，以简化开发过程。

• 简单且轻量：设计时注重简约，slider_button 既轻量又高效，确保它能够无缝集成到您的应用中而不影响性能。
• 易于实现：您可以轻松地将滑动按钮集成到您的 Flutter 项目中，遵循简单的实施指南。
• 带进度条：该库包括一个内置的进度条，可以直观地表示任何异步函数的完成状态，增强操作期间的用户反馈。
• 易于定制：您可以根据应用的设计需求灵活地调整滑动按钮的外观和行为。
• 自动进度跟踪：进度条会根据异步函数的状态自动更新，简化后台任务的处理并提供流畅的用户体验。
• 支持空安全：slider_button 在设计时就考虑到了空安全，确保在现代 Dart 环境中的稳定和无错误集成。

开始使用

要使用此插件，需要在 pubspec.yaml 文件中添加 slider_button_lite 作为依赖项。

dependencies:
  slider_button_lite: ^x.x.x

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

使用示例

以下是一个使用 slider_button_lite 的完整示例：

import 'package:flutter/material.dart';
import 'package:slider_button_lite/slider_button.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Slider Button Lite Demo')),
        body: Center(
          child: SliderButtonDemo(),
        ),
      ),
    );
  }
}

class SliderButtonDemo extends StatefulWidget {
  [@override](/user/override)
  _SliderButtonDemoState createState() => _SliderButtonDemoState();
}

class _SliderButtonDemoState extends State<SliderButtonDemo> {
  bool _isCompleted = false;

  void _onComplete() {
    setState(() {
      _isCompleted = true;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return SliderButton(
      action: () async {
        debugPrint('Action completed');
        // Any task
        // 异步任务以更新进度条
        await Future.delayed(const Duration(seconds: 3), () => debugPrint('Large Latte'));
        _onComplete();
        return false;
      },
      label: const Text(
        'Slide to confirm',
        style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
      ),
      dismissThresholds: 0.8,
      buttonSize: 60,
      backgroundColor: Colors.yellow,
      icon: ClipOval(
        child: Material(
          color: Colors.black, // 按钮颜色
          child: SizedBox(
            width: 60,
            height: 60,
            child: Icon(Icons.arrow_forward_ios_outlined, color: Colors.white),
          ),
        ),
      ),
      properties: SliderButtonProperties(
        disable: false,
        isLoading: false,
        disableButtonColor: const Color(0xFFCCCCDD),
        width: MediaQuery.of(context).size.width - (16 * 2),
        alignLabel: Alignment.center,
      ),
    );
  }
}