Flutter进度加载按钮插件progress_loading_button的使用

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

Flutter进度加载按钮插件progress_loading_button的使用

GitHub repo size GitHub code size in bytes GitHub top language GitHub issues GitHub license

progress_loading_button 是一个免费且开源（MIT 许可证）的 Material Flutter 按钮插件，支持多种按钮样式需求。它设计简单易用且高度可定制。

开始使用

添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  progress_loading_button: '^1.0.0'

安装依赖

你可以在命令行中安装依赖：

$ flutter pub get

或者，你的编辑器可能支持 flutter pub get。

导入库

现在在你的 Dart 代码中可以使用：

import 'package:progress_loading_button/progress_loading_button.dart';

使用方法

将 LoadingButton 添加到你的小部件树中：

LoadingButton(
  defaultWidget: Text('Click Me'),
  width: 196,
  height: 60,
  onPressed: () async {
    await Future.delayed(
      Duration(milliseconds: 3000),
      () {
        print('Button Pressed');
      },
    );
  },
)

更多参数

LoadingButton 支持以下参数：

LoadingButton({
  Key? key,
  required this.defaultWidget,
  this.loadingWidget = const CircularProgressIndicator(),
  required this.onPressed,
  this.type = LoadingButtonType.Raised,
  this.color,
  this.width = double.infinity,
  this.height = 40.0,
  this.borderRadius = 5.0,
  this.borderSide = BorderSide.none,
  this.animate = true,
}) : super(key: key);

支持的按钮类型

LoadingButton 支持三种按钮类型：

enum LoadingButtonType {
  Raised,
  Flat,
  Outline,
}

示例

示例动图

源码

源代码和示例可以在 GitHub 上找到：

$ git clone https://github.com/gairick-saha/progress_loading_button.git

完整示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 progress_loading_button 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        visualDensity: VisualDensity.adaptivePlatformDensity,
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('Progress Loading Button Example'),
        ),
        body: Center(
          child: LoadingButton(
            defaultWidget: const Text('Click Me'),
            width: 196,
            height: 60,
            onPressed: () async {
              await Future.delayed(
                const Duration(milliseconds: 3000),
                () {
                  print('Button Pressed');
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

通过以上步骤，你可以在 Flutter 应用中轻松地使用 progress_loading_button 插件来创建带有进度加载效果的按钮。希望这对你有所帮助！


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter项目中使用progress_loading_button插件的示例代码。这个插件允许你创建一个带有加载指示器的按钮，非常适合在网络请求或其他需要等待的任务中使用。

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

dependencies:
  flutter:
    sdk: flutter
  progress_loading_button: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的Dart文件中使用ProgressLoadingButton。下面是一个完整的示例，包括一个模拟的网络请求：

import 'package:flutter/material.dart';
import 'package:progress_loading_button/progress_loading_button.dart';
import 'dart:async';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  Future<void> simulateNetworkRequest() async {
    setState(() {
      isLoading = true;
    });

    // 模拟网络请求延迟
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      isLoading = false;
    });

    // 可以在这里处理请求成功或失败的逻辑
    print("Network request completed");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Loading Button Demo'),
      ),
      body: Center(
        child: ProgressLoadingButton(
          width: double.infinity,
          child: Text('Load Data'),
          loadingChild: CircularProgressIndicator(
            color: Colors.white,
          ),
          color: Colors.blue,
          loadingColor: Colors.blueAccent,
          onPressed: isLoading ? null : simulateNetworkRequest,
          loading: isLoading,
        ),
      ),
    );
  }
}

代码说明：

  1. 依赖安装：确保在pubspec.yaml文件中添加了progress_loading_button依赖，并运行flutter pub get。

  2. 状态管理：在_MyHomePageState类中，使用isLoading变量来跟踪按钮的加载状态。

  3. 模拟网络请求：simulateNetworkRequest函数模拟了一个网络请求，使用Future.delayed来模拟延迟。

  4. UI构建：

    • 使用Scaffold和AppBar来构建基本的页面结构。
    • 使用Center来居中显示ProgressLoadingButton。
    • ProgressLoadingButton的onPressed属性在isLoading为true时设置为null（禁用按钮），否则设置为simulateNetworkRequest函数。
    • loading属性绑定到isLoading变量，以控制按钮的加载状态。

  5. 自定义样式：通过child、loadingChild、color和loadingColor等属性来自定义按钮的样式。

这个示例展示了如何使用progress_loading_button插件来创建一个具有加载指示器的按钮，并在模拟的网络请求期间显示加载状态。你可以根据实际需求进一步自定义和扩展这个示例。

回到顶部