Bmprogresshud - A lightweight progress HUD for Flutter app

Overview

bmprogresshud

pub package

A lightweight progress HUD for your Flutter app, Inspired by SVProgressHUD.

Showcase

demo演示

Example

local HUD

place ProgressHud to you container, and get with ProgressHud.of(context)

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hud demo"),
      ),
      body: ProgressHud(
        maximumDismissDuration: Duration(seconds: 2),
        child: Center(
          child: Builder(builder: (context) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    _showLoadingHud(context);
                  },
                  child: Text("show loading"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }
  
  _showLoadingHud(BuildContext context) async {
    ProgressHud.of(context)?.show(ProgressHudType.loading, "loading...");
    await Future.delayed(const Duration(seconds: 1));
    ProgressHud.of(context)?.dismiss();
  }
}

you can also use GlobalKey to access ProgressHudState

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  GlobalKey<ProgressHudState> _globalKey = GlobalKey();
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("hud demo"),
      ),
      body: ProgressHud(
        key: _globalKey,
        maximumDismissDuration: Duration(seconds: 2),
        child: Center(
          child: Builder(builder: (context) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  onPressed: () {
                    _showLoadingHud(context);
                  },
                  child: Text("show loading"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  _showLoadingHud(BuildContext context) async {
    _globalKey.currentState?.show(ProgressHudType.loading, "loading...");
    await Future.delayed(const Duration(seconds: 1));
    _globalKey.currentState?.dismiss();
  }
}

other ProgressHudType

// show successHud with text
_showSuccessHud(BuildContext context) {
  ProgressHud.of(context)?.showAndDismiss(ProgressHudType.success, "load success");
}

// show errorHud with text
_showErrorHud(BuildContext context) {
  ProgressHud.of(context)?.showAndDismiss(ProgressHudType.error, "load fail");
}

// show progressHud with progress and text
_showProgressHud(BuildContext context) {
  var hud = ProgressHud.of(context);
  hud?.show(ProgressHudType.progress, "loading");

  double current = 0;
  Timer.periodic(Duration(milliseconds: 1000.0 ~/ 60), (timer) {
    current += 1;
    var progress = current / 100;
    hud?.updateProgress(progress, "loading $current%");
    if (progress == 1) {
      // finished
      hud?.showAndDismiss(ProgressHudType.success, "load success");
      timer.cancel();
    }
  });
}

global HUD

  1. mark global hud with isGlobalHud, there must be only one global hud, it always define before MeterialApp
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ProgressHud(
      // mark hud as global, it should be only one global hud
      isGlobalHud: true,
      child: MaterialApp(
        home: HomePage()
      ),
    );
  }
}
  1. use global hud with static method, similar to hud instance
void example() {
    ProgressHud.showLoading();
    ProgressHud.dismiss();
    
    ProgressHud.showAndDismiss(ProgressHudType.success, "load success");
    ProgressHud.showAndDismiss(ProgressHudType.error, "load fail");
    
    ProgressHud.show(ProgressHudType.progress, "loading");
    ProgressHud.updateProgress(progress, "loading 20%");
    
    ProgressHud.showAndDismiss(ProgressHudType.success, "load success");
}

Getting Started

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

You might also like...

Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight Node.js based Bhagavad Gita API [An open source rest api on indian Vedic Scripture Shrimad Bhagavad Gita].

Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight Node.js based Bhagavad Gita API [An open source rest api on indian Vedic Scripture Shrimad Bhagavad Gita].

Gita Bhagavad Gita flutter app. Download App - Playstore Web Application About Bhagavad Gita app using flutter & Bhagavad-Gita-API is A lightweight No

Apr 5, 2022

A lightweight & effective Todo app made with Flutter

A lightweight & effective Todo app made with Flutter

Blue Diary A lightweight & effective Todo app made with Flutter. Supports English and Korean. Screenshots • Download • Usage • Architecture • Feedback

Dec 6, 2022

Fa-chapter-2 - Lightweight Recipe App Built With Flutter

Recipe App Our app will offer a hard-coded list of recipes and let us use a Slid

Jan 2, 2022

A lightweight and customizable http client that allows you to create offline-first dart app easily.

Enjoyable & customizable offline-first REST API client Unruffled is lightweight and customizable http client that allows you to create offline-first e

May 20, 2022

Flutter component Gradient Progress Indicator

Gradient Progress Indicator Introduction This package shows a circular progress indicator with gradient colors, and it is possible insert texts inside

Dec 5, 2022

A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter.

stylish_dialog A collection of stylish animated dialogs like Normal, Progress, Success, Info, Warning, and Error for flutter. Showcase ⭐ Installing de

Nov 8, 2022

A Flutter Material Button that animates between Progress and Error states

A Flutter Material Button that animates between Progress and Error states

progress_button A Material Flutter Button that supports progress and error visuals Getting Started ProgressButton is designed to be easy to use and cu

Sep 21, 2022

IntervalProgressBar - An interval progress widget for Flutter

IntervalProgressBar - An interval progress widget for Flutter

IntervalProgressBar An interval progress widget for Flutter. Preview v1 v2 Depend on it https://pub.dev/packages/intervalprogressbar Add this to your

Aug 16, 2022

Open source Flutter package, simple circular progress bar.

Open source Flutter package, simple circular progress bar.

Simple circular progress bar Open source Flutter package, simple circular progress bar. Getting Started Installing Basic Examples Colors Start angle L

Dec 23, 2022
Comments
  • Weird yellow underline below text

    Weird yellow underline below text

    Hi there, I'm experiencing weird yellow underlines below the text of a success HUD call.

    @override
      Widget build(BuildContext context) {
        return new StoreConnector<AppState, AppState>(
          converter: (store) => store.state,
          builder: (context, state) {
            return ProgressHud(
              maximumDismissDuration: Duration(seconds: 2),
              child: FutureBuilder<CompanyContact>(
                future: _getContact(state),
                builder: (BuildContext context, AsyncSnapshot<CompanyContact> snapshot) {
                  return Scaffold(
                    extendBodyBehindAppBar: true,
                    resizeToAvoidBottomInset: false,
                    appBar: AppBar(
                      title: null,
                      backgroundColor: Colors.transparent,
                      elevation: 0,
                    ),
                    body: Stack(
                      children: <Widget>[
                        Container(
    
    ...
    
    _showSuccessHud(BuildContext context) {
        ProgressHud.of(context).showAndDismiss(ProgressHudType.success, "Gesendet!");
    }
    

    See: test

    opened by codepushr 2
  • UI freeze after 20+ times of invocations

    UI freeze after 20+ times of invocations

    I use ProgressHud to wrap an asynchronous REST API call, after 20 or more times of query, the UI freezes. My code looks like:

    final GlobalKey _hudKey = GlobalKey(); ... body: ProgressHud( key: _hudKey, child: SingleChildScrollView( child: Column( ... _hudKey.currentState?.show(ProgressHudType.loading, 'Query...'); StationModel m = await findStationByID(stationID); _hudKey.currentState?.dismiss();

    opened by ywdeng 2
Owner
bomo
bomo
A simple modal progress HUD (heads-up display, or progress indicator) for flutter

modal_progress_hud A simple widget wrapper to enable modal progress HUD (a modal progress indicator, HUD = Heads Up Display) Inspired by this article.

Maurice McCabe 157 Nov 22, 2022
Flutter package to diplay progress through a milestone progress widget

milestone_progress Flutter package for IOS and Android to display progress through milestone progress widget. Screenshots ## Usage [Example]https://gi

Harpreet Singh 16 Aug 4, 2020
Wave progress - A custom wave progress widget

wave_progress_widget A customable wave progress widget Preview How to use Add this to your package's pubspec.yaml file: dependencies: wave_progress_

idan ben shimon 41 Jul 18, 2022
A lightweight flutter plugin to check if your app is up-to-date on Google Play Store or Apple App Store

App Version Checker this package is used to check if your app has a new version on playstore or apple app store. or you can even check what is the lat

Iheb Briki 6 Dec 14, 2022
League-of-flutter - A League of Legends App in progress, developed with Flutter.

initial_app A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if t

Harlley Bastos 0 Feb 26, 2022
As a beginner , this is my own side project by using flutter & dart , Firebase . This app still in progress .

helpful_app A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

null 0 Nov 23, 2021
Unsplash Client App written using dart and flutter. (Work in progress)

Upsplash Unofficial Unsplash client written using dart and flutter Sreenshots Architecture The goal of this pattern is to make it easy to separate pre

Arslan 25 Sep 1, 2022
A simple flutter app that downloads a file from the internet, shows a custom-made download progress dialog and saves the file to device's internal storage

http_downloader A simple flutter app that downloads a file from the internet using the http plugin. It has a custom-designed progress dialog which dis

Akora Ing. Debrah Kwesi Buabeng 4 Apr 6, 2021
This is an animated app used to control Tesla Car which is on progress and will be published soon

Animated Tesla App Conect using Flutter Packages we are using: flutter_svg: link We will cover how to use ImplicitlyAnimatedWidge and how to use multi

null 1 Nov 13, 2021