Flutter加载进度条插件loading_progressbar的使用

Flutter加载进度条插件loading_progressbar的使用

你可以在进度条中随时调用你定义的小部件。你只需要用LoadingProgressbar包裹它即可。

开始使用 🌱

添加依赖

在pubspec.yaml文件中添加：

dependencies:
  loading_progressbar: ^最新版本号

然后运行：

flutter pub get

导入库

在你的 Dart 文件中导入：

import 'package:loading_progressbar/loading_progressbar.dart';

更新 🎁

我最近新增了MultiLoadingProgressbar。你可以设置多个进度条，并在需要时调用它们。我参考了loading_animation_widget包。

final MultiLoadingProgressbarController controller = MultiLoadingProgressbarController(itemCount: 3);

[@override](/user/override)
Widget build(BuildContext context) {
  return MultiLoadingProgressbar(
    controller: controller,
    progressbar: (context, progress) => [
      LoadingAnimationWidget.staggeredDotsWave(color: Colors.blueGrey, size: 36.0),
      LoadingAnimationWidget.hexagonDots(color: Colors.blueGrey, size: 36.0),
      LoadingAnimationWidget.beat(color: Colors.blueGrey, size: 36.0)
    ],
    child: Scaffold(
      // 其他组件...
    ),
  );
}

你想要的进度条小部件的索引：

final MultiLoadingProgressbarController controller = MultiLoadingProgressbarController(itemCount: 3);

// 默认索引
onPressed: () {
  controller.show();
},
// 索引为1
onPressed: () {
  controller.show(index: 1);
},
// 索引为2
onPressed: () {
  controller.show(index: 2);
},

示例 🎈

final LoadingProgressbarController controller = LoadingProgressbarController();

[@override](/user/override)
Widget build(BuildContext context) {
  return LoadingProgressbar(
    controller: controller,
    progressbar: (context, progress) {
      return CircularProgressIndicator(value: progress / 100);
    },
    
    // 非必需，默认值
    alignment: Alignment.center,
    barrierColor: Colors.black54,
    barrierDismissible: true,
    transitionDuration: const Duration(milliseconds: 650),
    reverseDuration: const Duration(milliseconds: 650),
    
    child: Scaffold(
      body: Column(
        children: [
          ElevatedButton(
            onPressed: () {
              // 显示进度条
              controller.show();
            },
            child: Text("显示"),
          ),
          ElevatedButton(
            onPressed: () {
              // 隐藏进度条
              controller.hide();
            },
            child: Text("隐藏"),
          ),
        ]
      ),
    )
  );
}

使用方法 🚀

参数 是否必须 类型 默认值
progressbar ✔️ Widget
controller ✔️ LoadingProgressbarController
alignment ❌ AlignmentGeometry Alignment.center
barrierColor ❌ Color Colors.black54
barrierDismissible ❌ bool true
transitionDuration ❌ Duration Duration(milliseconds: 650)
reverseDuration ❌ Duration transitionDuration
child ✔️ Widget

监听事件

  • 函数事件（显示、隐藏、更改进度）
  • 动画结束事件：在使用显示或隐藏功能后，动画完成时触发。
final LoadingProgressbarController controller = LoadingProgressbarController();

[@override](/user/override)
void initState() {
  super.initState();

  controller
    ..addEventListener((event, visible, progress) {
      print("addEventListener.. event:$event, visible:$visible, progress:$progress");
    },)
    ..addAnimatedEndListener((visible, progress) {
      print("addAnimatedEndListener.. visible:$visible, progress:$progress");
      if (visible) {
        controller.hide();
      }
    },);
}

[@override](/user/override)
void dispose() {
  controller.dispose();
  // ..removeEventListener(eventListener)
  // ..removeAnimatedEndEventListener(eventListener)

  super.dispose();
}

LoadingProgressbarController的关键函数

  • show()：显示进度条
  • hide()：隐藏进度条
  • isShowing：检查是否正在显示进度条
  • setProgress(int progress)：设置进度
  • getProgress()：获取当前进度
  • addEventListener(...)：添加事件监听器
  • addAnimatedEndListener(...)：添加动画结束监听器
  • clearEventListener()：清除事件监听器
  • clearAnimatedEndEventListener()：清除动画结束监听器
  • dispose()：释放资源

完整示例

单个进度条示例

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_logcat/flutter_logcat.dart';
import 'package:loading_animation_widget/loading_animation_widget.dart';
import 'package:loading_progressbar/loading_progressbar.dart';

void main() {
  Log.configure(visible: kDebugMode, tag: "Neander");

  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
      useMaterial3: true,
    ),
    home: Builder(
      builder: (context) => Scaffold(
        appBar: AppBar(
          title: const Text('Flutter LoadingProgressbar Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => const LoadingProgressbarExample(),));
                },
                child: const Text("LoadingProgressbar Widget Example"),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(context, MaterialPageRoute(builder: (context) => const MultiLoadingProgressbarExample(),));
                },
                child: const Text("MultiLoadingProgressbar Widget Example"),
              )
            ],
          ),
        ),
      ),
    ),
  ));
}

/// 单个进度条
///
/// [LoadingProgressbar] Widget Example :)
class LoadingProgressbarExample extends StatefulWidget {
  const LoadingProgressbarExample({super.key});

  [@override](/user/override)
  State<LoadingProgressbarExample> createState() => _LoadingProgressbarExampleState();
}

class _LoadingProgressbarExampleState extends State<LoadingProgressbarExample> {
  final LoadingProgressbarController controller = LoadingProgressbarController();

  [@override](/user/override)
  void initState() {
    super.initState();

    controller
      ..addEventListener((event, visible, progress) {
        Log.i("addEventListener.. event:$event, visible:$visible, progress:$progress");
      },)
      ..addAnimatedEndListener((visible, progress) {
        Log.d("addAnimatedEndListener.. visible:$visible, progress:$progress");
        if (visible) {
          controller.hide();
        }
      },);
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    // ..removeEventListener(eventListener)
    // ..removeAnimatedEndEventListener(eventListener)

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LoadingProgressbar(
      controller: controller,
      progressbar: (context, progress) {
        return const CircularProgressIndicator();
      },
      transitionDuration: const Duration(seconds: 2),
      child: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('LoadingProgressbar \nSingle Example',
                style: TextStyle(
                  color: Colors.white60,
                  fontSize: 28.0,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          heroTag: null,
          onPressed: () {
            Log.d("LoadingProgressbar show()");
            controller.show();
          },
          tooltip: 'Default LoadingProgressbar',
          child: const Icon(Icons.play_arrow_outlined),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

多个进度条示例

class MultiLoadingProgressbarExample extends StatefulWidget {
  const MultiLoadingProgressbarExample({super.key});

  [@override](/user/override)
  State<MultiLoadingProgressbarExample> createState() => _MultiLoadingProgressbarExampleState();
}

class _MultiLoadingProgressbarExampleState extends State<MultiLoadingProgressbarExample> {
  final MultiLoadingProgressbarController controller = MultiLoadingProgressbarController(itemCount: 3);

  [@override](/user/override)
  void initState() {
    super.initState();

    controller
      ..addEventListener((index, event, visible, progress) {
        Log.i("addEventListener.. index:$index, event:$event, visible:$visible, progress:$progress");

      },)
      ..addAnimatedEndListener((index, visible, progress) {
        Log.d("addAnimatedEndListener.. index:$index, visible:$visible, progress:$progress");
        if (visible) {
          controller.hide();
        }
      },);
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    // ..removeEventListener(eventListener)
    // ..removeAnimatedEndEventListener(eventListener)

    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MultiLoadingProgressbar(
      controller: controller,
      progressbar: (context, progress) => [
        LoadingAnimationWidget.staggeredDotsWave(color: Colors.blueGrey, size: 36.0),
        LoadingAnimationWidget.hexagonDots(color: Colors.blueGrey, size: 36.0),
        LoadingAnimationWidget.beat(color: Colors.blueGrey, size: 36.0)
      ],
      transitionDuration: const Duration(seconds: 2),
      child: Scaffold(
        backgroundColor: Colors.blueGrey,
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('LoadingProgressbar\nMulti Example',
                style: TextStyle(
                  color: Colors.white60,
                  fontSize: 28.0,
                ),
              ),
            ],
          ),
        ),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              heroTag: null,
              onPressed: () {
                Log.d("MultiLoadingProgressbar show()");
                controller.show();
              },
              tooltip: 'MultiLoadingProgressbar',
              child: const Text("Wave"),
            ),
            const SizedBox(height: 9.0,),
            FloatingActionButton(
              heroTag: null,
              onPressed: () {
                Log.d("MultiLoadingProgressbar show(index: 1)");
                controller.show(index: 1);
              },
              tooltip: 'MultiLoadingProgressbar',
              child: const Text("Dots"),
            ),
            const SizedBox(height: 9.0,),
            FloatingActionButton(
              heroTag: null,
              onPressed: () {
                Log.d("MultiLoadingProgressbar show(index: 2)");
                controller.show(index: 2);
              },
              tooltip: 'MultiLoadingProgressbar',
              child: const Text("Beat"),
            ),
          ],
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}

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

1 回复

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


loading_progressbar 是一个用于在 Flutter 应用中显示加载进度条的插件。它提供了简单易用的 API，可以方便地在应用中集成加载动画。以下是如何使用 loading_progressbar 插件的步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  loading_progressbar: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 loading_progressbar 包：

import 'package:loading_progressbar/loading_progressbar.dart';

3. 使用 LoadingProgressBar 组件

LoadingProgressBar 是一个简单的组件，可以在需要显示加载进度条的地方使用它。以下是一个基本示例：

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

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

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

4. 自定义 LoadingProgressBar

LoadingProgressBar 提供了一些可选的参数来自定义加载进度条的外观和行为。以下是一些常用的参数：

  • color: 设置进度条的颜色。
  • backgroundColor: 设置进度条的背景颜色。
  • strokeWidth: 设置进度条的宽度。
  • value: 设置进度条的当前值（0.0 到 1.0 之间）。
  • circular: 设置为 true 时，显示圆形进度条；设置为 false 时，显示线性进度条。
LoadingProgressBar(
  color: Colors.blue,
  backgroundColor: Colors.grey[200],
  strokeWidth: 4.0,
  value: 0.5,  // 50% 的进度
  circular: true,
)

5. 动态更新进度条

你可以通过动态更新 value 参数来显示进度条的进度变化。例如：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double _progress = 0.0;

  void _updateProgress() {
    setState(() {
      _progress += 0.1;
      if (_progress > 1.0) {
        _progress = 0.0;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading ProgressBar Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              LoadingProgressBar(
                value: _progress,
                color: Colors.green,
                backgroundColor: Colors.grey[200],
                strokeWidth: 4.0,
                circular: true,
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _updateProgress,
                child: Text('Update Progress'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

6. 处理加载完成

当加载完成后，你可以隐藏或移除进度条，并显示其他内容。

if (_progress >= 1.0) {
  return Text('Loading Complete!');
} else {
  return LoadingProgressBar(
    value: _progress,
    color: Colors.green,
    backgroundColor: Colors.grey[200],
    strokeWidth: 4.0,
    circular: true,
  );
}
回到顶部