progress_dialog 1.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 98

progress_dialog #

A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically.

Sponsor!   LinkedIn   Follow   Fork   Star   Watches

Get the library   Example

Supported Dart Versions #

Dart SDK version >= 2.1.0

Demo #

Normal dialog Demo Download dialog Demo

Installation #

Pub

Add the Package

dependencies:
  progress_dialog: ^1.2.0

How to use #

Import the package in your dart file

import 'package:progress_dialog/progress_dialog.dart';

Create an instance of ProgressDialog

ProgressDialog pr;

Initialise the pr object inside the build() method passing context to it

  1. Initialize the ProgressDialog object
    pr = new ProgressDialog(context);
    
  2. By default it is a normal dialog to show some message, if you would like to use it to show percentage of progress done, specify the optional type parameter and specify if you want your dialog to dismiss when back button is pressed isDismissible parameter (Optional)
    //For normal dialog
    pr = new ProgressDialog(context,type: ProgressDialogType.Normal, isDismissible: true/false, showLogs: true/false);
        
    //For showing progress percentage
    pr = new ProgressDialog(context,type: ProgressDialogType.Download, isDismissible: true/false, showLogs: true/false);
    
  3. Style the progress dialog (Optional)
    pr.style(
      message: 'Downloading file...',
      borderRadius: 10.0,
      backgroundColor: Colors.white,
      progressWidget: CircularProgressIndicator(),
      elevation: 10.0,
      insetAnimCurve: Curves.easeInOut,
      progress: 0.0,
      maxProgress: 100.0,
      progressTextStyle: TextStyle(
         color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
      messageTextStyle: TextStyle(
         color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600)
      );
    
    Note: You don't need to use all parameters, all of them are optional
    
  4. Showing the progress dialog
    pr.show();
    
  5. Dynamically update the content shown out there
    pr.update(
      progress: 50.0,
      message: "Please wait...",
      progressWidget: Container(
        padding: EdgeInsets.all(8.0), child: CircularProgressIndicator()),
      maxProgress: 100.0,
      progressTextStyle: TextStyle(
        color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
      messageTextStyle: TextStyle(
        color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
      );
    
    Note: You don't need to use all parameters, all of them are optional
    
  6. Dismissing the progress dialog
    pr.hide().then((isHidden) {
      print(isHidden);
    });
    

Navigating to next screens must be done after the completion of Future - hide(). See here for example

Check if progress dialog is showing #

bool isProgressDialogShowing = pr.isShowing();
print(isProgressDialogShowing);

Demo #

Normal dialog Demo Download dialog Demo

Default configuration/styles #

If you don't like to configure/style the dialog and continue with the default style, it's okay but just have a look at our default configuration.

AttributeValue
Dismissibletrue
ProgressDialogTypeProgressDialogType.Normal
BackgroundColorColors.white
BorderRadiusRoundedRectangularBorder(radius: 8.0)
AnimationCurveCurves.easeInOut
Elevation8.0
ProgressWidgetDouble_rings_loding_indicator
MessageTextStylecolor: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600
ProgressTextStylecolor: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400
showLogsfalse

Well let's discuss limits for configuring it #

AttributeCan be updated during instantiatingCan be updated during stylingCan be updated during dialog is shown
DismissibleYesNoNo
ProgressDialogTypeYesNoNo
BackgroundColorNoYesNo
BorderRadiusNoYesNo
AnimationCurveNoYesNo
ElevationNoYesNo
ProgressWidgetNoYesYes
MessageTextStyleNoYesYes
ProgressTextStyleNoYesYes
ShowLogsYesNoNo

Want to contribute? #

Pull requests and issues are always welcome!

How to contribute? #

  1. Fork the repository
  2. Clone it to your local machine
  3. Open the project in your favourite editor
  4. Open cmd/terminal and run flutter clean and then flutter packages get
  5. Make the changes
  6. Create a Pull Request

View the issues here

This library is only tested for Android, iOS contributors are most welcome #


Loading indicator -> https://loading.io/

[1.2.0] - Added custom styling for widget in runtime, background color, elevation, border-radius, text-styles, anim-curve, max-progress, no-drop on backbutton press and fixed old bugs

[1.1.0+1] - Added interactive double ring loading indicator, updated documentation

[1.0.8] - Added interactive double ring loading indicator, updated documentation

[1.0.4] - Bug fixes.

[1.0.3] - Update Dart Version.

[1.0.2] - Added shown/hidden accessibility.

[1.0.1] - Added example and ready for package release.

example/README.md

Complete Example for Normal Progress Dialog #

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

ProgressDialog pr;

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  double percentage = 0.0;

  @override
  Widget build(BuildContext context) {

    pr = new ProgressDialog(context,type: ProgressDialogType.Normal);

    pr.style(message: 'Showing some progress...');
    
    //Optional
    pr.style(
          message: 'Please wait...',
          borderRadius: 10.0,
          backgroundColor: Colors.white,
          progressWidget: CircularProgressIndicator(),
          elevation: 10.0,
          insetAnimCurve: Curves.easeInOut,
          progressTextStyle: TextStyle(
              color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
          messageTextStyle: TextStyle(
              color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
        );    

    return Scaffold(
      body: Center(
        child: RaisedButton(
            child: Text(
              'Show Dialog',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.blue,
            onPressed: () {
              pr.show();
              
              Future.delayed(Duration(seconds: 10)).then((onValue){
                print("PR status  ${pr.isShowing()}" );
                if(pr.isShowing())
                  pr.hide();
                print("PR status  ${pr.isShowing()}" );
              });

            }),
      ),
    );
  }
}

Complete Example for Download Progress Dialog #

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

ProgressDialog pr;

void main() {
  runApp(MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  double percentage = 0.0;

  @override
  Widget build(BuildContext context) {

    pr = new ProgressDialog(context, type: ProgressDialogType.Download);
    pr.style(message: 'Downloading file...');
    
    //Optional
    pr.style(
          message: 'Downloading file...',
          borderRadius: 10.0,
          backgroundColor: Colors.white,
          progressWidget: CircularProgressIndicator(),
          elevation: 10.0,
          insetAnimCurve: Curves.easeInOut,
          progress: 0.0,
          maxProgress: 100.0,
          progressTextStyle: TextStyle(
              color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
          messageTextStyle: TextStyle(
              color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
        );
    
    return Scaffold(
      body: Center(
        child: RaisedButton(
            child: Text(
              'Show Dialog',
              style: TextStyle(color: Colors.white),
            ),
            color: Colors.blue,
            onPressed: () {
              pr.show();

              Future.delayed(Duration(seconds: 2)).then((onvalue) {
                percentage = percentage + 30.0;
                print(percentage);
                
                pr.update(
                  progress: percentage,
                  message: "Please wait...",
                  progressWidget: Container(
                      padding: EdgeInsets.all(8.0), child: CircularProgressIndicator()),
                  maxProgress: 100.0,
                  progressTextStyle: TextStyle(
                      color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
                  messageTextStyle: TextStyle(
                      color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
                );
                
                Future.delayed(Duration(seconds: 2)).then((value) {
                  percentage = percentage + 30.0;
                  pr.update(
                      progress: percentage, message: "Few more seconds...");
                  print(percentage);
                  Future.delayed(Duration(seconds: 2)).then((value) {
                    percentage = percentage + 30.0;
                    pr.update(progress: percentage, message: "Almost done...");
                    print(percentage);

                    Future.delayed(Duration(seconds: 2)).then((value) {
                      pr.hide();
                      percentage = 0.0;
                    });
                  });
                });
              });

            }),
      ),
    );
  }
}

Please ignore if the above contains any unoptimized code, it's just for an example

Demo #

Normal Progress Download Progress

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  progress_dialog: ^1.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:progress_dialog/progress_dialog.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
97
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
98
Learn more about scoring.

We analyzed this package on Oct 22, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-1 points)

13 out of 13 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test