Flutter响应式加载按钮插件responsive_loader

Flutter响应式加载按钮插件responsive_loader_button的使用

特性

此包允许构建动态按钮。

开始使用

在你的 pubspec.yaml 文件中添加该包。

使用方法

请参阅下面的示例代码以了解如何使用该包。

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

// 假设你已经安装了GetX库来管理状态
class MyHomePage extends StatelessWidget {
  MyHomePage({super.key, required this.title});
  final String title;

  // 或者你可以将RxBool定义在一个单独的GetX控制器中，以分离业务逻辑
  final RxBool isLoading = false.obs;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: ResponsiveLoaderButton(
              isLoading: isLoading,
              onTap: () async {
                isLoading.value = true; // 设置按钮为加载状态
                await Future.delayed(Duration(seconds: 3)); // 模拟异步操作
                isLoading.value = false; // 操作完成后设置按钮为非加载状态
              },
            ),
          )
        ],
      ),
    );
  }
}

h691938207 1楼

更多关于Flutter响应式加载按钮插件responsive_loader_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

responsive_loader_button 是一个用于 Flutter 的响应式加载按钮插件，它可以帮助你在按钮点击时显示加载动画，并在加载完成后恢复按钮的原始状态。这个插件非常适用于需要异步操作（如网络请求）的场景。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  responsive_loader_button: ^latest_version

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

2. 基本使用

以下是一个简单的示例，展示如何使用 responsive_loader_button 插件：

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isLoading = false;

  Future<void> _simulateNetworkRequest() async {
    // 模拟网络请求
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      _isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Responsive Loader Button Example'),
      ),
      body: Center(
        child: ResponsiveLoaderButton(
          isLoading: _isLoading,
          onPressed: () async {
            setState(() {
              _isLoading = true;
            });
            await _simulateNetworkRequest();
          },
          child: Text('Submit'),
          loader: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
          ),
        ),
      ),
    );
  }
}

3. 参数说明

isLoading: 一个布尔值，用于控制按钮的加载状态。当 true 时，按钮会显示加载动画；当 false 时，按钮恢复正常状态。
onPressed: 按钮点击时触发的回调函数。通常在这里执行异步操作。
child: 按钮的文本或子组件。
loader: 加载动画的组件，通常是一个 CircularProgressIndicator。

4. 自定义样式

你可以通过传递 style 参数来自定义按钮的样式，例如背景颜色、文本颜色等：

ResponsiveLoaderButton(
  isLoading: _isLoading,
  onPressed: () async {
    setState(() {
      _isLoading = true;
    });
    await _simulateNetworkRequest();
  },
  child: Text('Submit'),
  style: ElevatedButton.styleFrom(
    primary: Colors.blue,
    onPrimary: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
  ),
  loader: CircularProgressIndicator(
    valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
  ),
)