loading_progressbar - Dart API docs

You can pull out the widget you defined in the progress bar whenever you want.
You just need to wrap it with LoadingProgressbar!

Getting started 🌱

Add

flutter pub add loading_progressbar

Import

import 'package:loading_progressbar/loading_progressbar.dart';

Update 🎁

I have newly added the MultiLoadingProgressbar.
You can set up multiple progress bars and call them whenever needed.
I referenced the loading_animation_widget package.

  final MultiLoadingProgressbarController controller = MultiLoadingProgressbarController(itemCount: 3);

  @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(
        ...

The index of the progressbar widget you want

  final MultiLoadingProgressbarController controller = MultiLoadingProgressbarController(itemCount: 3);

  ...
  onPressed: () {
    controller.show();    // Called default index
  },
  ...
  onPressed: () {
    controller.show(index: 1);
  },
  ...
  onPressed: () {
    controller.show(index: 2);
  },

Example 🎈

  final LoadingProgressbarController controller = LoadingProgressbarController();

  @override
  Widget build(BuildContext context) {
    return LoadingProgressbar(
      controller: controller,
      progressbar: (context, progress) {
        return CircularProgressIndicator(value: progress / 100);
      },
        
      // Not required, default values
      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: () {
                // ViSIBLE 'progressbar' Widget
                controller.show();
              },
              child: Text("show"),
            ),
            ElevatedButton(
              onPressed: () {
                // INVISIBLE 'progressbar' Widget
                controller.hide();
              },
              child: Text("hide"),
            ),
          ]
        ),
      )
    )
  }

Usage 🚀

parameter	required	type	default
progressbar	:heavy_check_mark:	Widget
controller	:heavy_check_mark:	LoadingProgressbarController
alignment	:x:	AlignmentGeometry	Alignment.center
barrierColor	:x:	Color	Colors.black54
barrierDismissible	:x:	bool	true
transitionDuration	:x:	Duration	Duration(milliseconds: 650)
reverseDuration	:x:	Duration	transitionDuration
child	:heavy_check_mark:	Widget

Listen Event

Function Events (show, hide, change progress)
AnimatedEnd Event : It indicates that the animation has completed after using the show or hide function.

  final LoadingProgressbarController controller = LoadingProgressbarController();
  
  @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");
      },);
  }

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

    super.dispose();
  }

LoadingProgressbarController's the point Functions

show()
hide()
isShowing
setProgress(int progress)
getProgress()
addEventListener(...)
addAnimatedEndListener(...)
clearEventListener()
clearAnimatedEndEventListener()
dispose()

LoadingProgressbar Widget