loading_progressbar 0.1.1

Flutter LoadingProgressbar Widget. You can pull out the progressbar Widget Whenever you want.

LoadingProgressbar Widget

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	✔️	Widget
controller	✔️	LoadingProgressbarController
alignment	❌	AlignmentGeometry	Alignment.center
barrierColor	❌	Color	Colors.black54
barrierDismissible	❌	bool	true
transitionDuration	❌	Duration	Duration(milliseconds: 650)
reverseDuration	❌	Duration	transitionDuration
child	✔️	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()