Flutter加载状态按钮插件flutter_loading_button的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter加载状态按钮插件flutter_loading_button的使用

本插件是一个围绕现有的Material按钮构建的包装器，用于在按钮的onPressed方法执行异步任务时显示加载小部件。例如，这可以是对API进行HTTP请求以查询某些数据，但基本的计时任务也可以实现。

信息

目前，该插件仅包裹了TextButton小部件。对IconButton、ElevatedButton和OutlinedButton的支持正在开发中。

开始使用

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

dependencies:
    flutter_loading_button: ^0.0.2

或者通过终端添加依赖：

flutter pub add flutter_loading_button

当使用该插件时，导入相应的包：

import 'package:flutter_loading_button/loading_button.dart';

使用方法

在你的widget树中添加一个带有加载小部件的LoadingButton，当此小部件处于加载状态时，会显示一个CircularProgressIndicator：

LoadingButton(
    // 这个方法需要是异步的
    onPressed: () async {
        await Future.delayed(const Duration(seconds: 3), () => print('Task done!'));
    },
    child: const Text('Button'),
    loadingWidget: const CircularProgressIndicator(),
)

你也可以传递一个LinearProgressIndicator，但在尝试渲染它时，它会占用所有可用宽度来显示自身。建议将其包裹在一个Container中：

LoadingButton(
    // 这个方法需要是异步的
    onPressed: () async {
        await Future.delayed(const Duration(seconds: 3), () => print('Task done!'));
    },
    child: const Text('Button'),
    loadingWidget: Container(
        constraints: const BoxConstraints(maxWidth: 200),
        child: const LinearProgressIndicator(),
    ),
)

由于LoadingButton目前只包裹了TextButton，因此也支持调用LoadingButton.icon()：

LoadingButton.icon(
    // 这个方法需要是异步的
    onPressed: () async {
        await Future.delayed(const Duration(seconds: 3), () => print('Task done!'));
    },
    child: const Text('Button'),
    icon: const Icon(Icons.settings),
    loadingWidget: const LinearProgressIndicator(),
)

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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter项目中使用flutter_loading_button插件的一个示例。这个插件允许你创建一个带有加载状态的按钮，非常适合提交表单或执行需要等待的任务。

首先，确保你已经在pubspec.yaml文件中添加了flutter_loading_button依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_loading_button: ^2.0.0  # 请检查最新版本号

然后运行flutter pub get来获取依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用FlutterLoadingButton：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Loading Button Example'),
        ),
        body: Center(
          child: MyLoadingButton(),
        ),
      ),
    );
  }
}

class MyLoadingButton extends StatefulWidget {
  @override
  _MyLoadingButtonState createState() => _MyLoadingButtonState();
}

class _MyLoadingButtonState extends State<MyLoadingButton> {
  bool isLoading = false;

  void _submit() async {
    setState(() {
      isLoading = true;
    });

    // 模拟一个异步操作，比如网络请求
    await Future.delayed(Duration(seconds: 3));

    // 操作完成后重置加载状态
    setState(() {
      isLoading = false;
    });

    // 可以在这里添加操作完成后的逻辑，比如显示SnackBar
    ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('操作完成！')));
  }

  @override
  Widget build(BuildContext context) {
    return FlutterLoadingButton(
      onPressed: isLoading ? null : _submit,
      child: Text('提交'),
      loadingText: '加载中...',
      color: Colors.blue,
      loadingColor: Colors.blueAccent,
      borderColor: Colors.blue[700]!,
      disabledColor: Colors.grey,
      disabledBorderColor: Colors.grey[300]!,
      borderRadius: BorderRadius.circular(25),
      width: 200,
      height: 50,
      autoSize: false,
      type: FlutterLoadingButtonType.circle, // 或者 FlutterLoadingButtonType.normal
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个FlutterLoadingButton。
  2. FlutterLoadingButton的onPressed属性绑定了一个_submit函数，这个函数在按钮被点击时执行。
  3. 当_submit函数被调用时，我们首先将isLoading状态设置为true，这会触发按钮进入加载状态。
  4. 我们模拟了一个异步操作（使用Future.delayed），在3秒后完成。
  5. 操作完成后，我们将isLoading状态重置为false，这会触发按钮恢复到初始状态。
  6. 我们在操作完成后显示了一个SnackBar来通知用户操作已完成。

这个示例展示了如何使用flutter_loading_button插件创建一个具有加载状态的按钮，并在操作完成时给予用户反馈。你可以根据需要调整按钮的样式和行为。

回到顶部