ProgressDialog in Flutter (original) (raw)

Last Updated : 05 Mar, 2025

Flutter ProgressDialog is combination of Progressbar and Alert Dialog that indicates that the application is busy. we have seen this particular widget many times in many application, like when ever we are downloading, sending request ,posting content, cancelling order, etc.

**Steps to Implement ProgressDialog **in Flutter

Step 1 : Create a new Flutter Application

Create a new Flutter application using command Prompt. For creating a new app, write **flutter create YOUR_APP_NAME and run this command.

flutter create Progress_flutter

To know more about it refer this article: Creating a Simple Application in Flutter

Step 2 : Adding the Dependency

To add the dependency to the **pubspec.yaml file, add shimmer as a dependency in the dependencies part of the _pubspec.yaml file as shown below:

dependencies:
progress_dialog_null_safe: ^3.0.0

Now run the below command in terminal.

flutter pub get

Step 3 : Importing the Dependency

Use the below line of code in the **main.dart file, to import the shimmer dependency :

import 'package:progress_dialog_null_safe/progress_dialog_null_safe.dart';;

Step 4 : Progress dialog flow

**- **Initialize the progress dialog

Dart `

final ProgressDialog pr = ProgressDialog( context, type: ProgressDialogType.normal, isDismissible: true, showLogs: true );

`

**- **Style the progress dialog

Dart `

pr.style( // Message to display message: 'Downloading file...', // Border radius of the dialog borderRadius: 10.0, // Background color of the dialog backgroundColor: Colors.white, // Progress indicator widget progressWidget: CircularProgressIndicator(), // Elevation of the dialog elevation: 10.0, // Animation curve for the dialog insetAnimCurve: Curves.easeInOut, // Initial progress value progress: 0.0, // Maximum progress value maxProgress: 100.0, progressTextStyle: TextStyle( color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400), // Style for progress text messageTextStyle: TextStyle( color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600), // Style for message text );

`

**- **Show the progress dialog

Dart `

await pr.show();

`

**- **Update the progress dialog

Dart `

pr.update( // Update progress value progress: 50.0, // Update message message: "Please wait...", // Update progress widget progressWidget: Container( padding: EdgeInsets.all(8.0), child: CircularProgressIndicator()), // Maximum progress value maxProgress: 100.0, // Style for progress text progressTextStyle: TextStyle( color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400), // Style for message text messageTextStyle: TextStyle( color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600), );

`

**- **Hide the progress dialog

Dart `

await pr.hide();

`

Complete source code (main.dart)

main.dart `

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

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

class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    final ProgressDialog pr = ProgressDialog(context,
            type: ProgressDialogType.normal, isDismissible: true, showLogs: true);

    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 MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
                title: const Text(
                    "GeeksforGeeks",
                    textAlign: TextAlign.start,
                ),
            ),
            body: Center(
                child: ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        foregroundColor: Colors.white,
                        backgroundColor: Colors.green, // text color
                    ),
                    onPressed: () async {
                        await pr.show();
                        await Future.delayed(Duration(seconds: 2));
                        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),
                        );
                        await Future.delayed(Duration(seconds: 2));
                        await pr.hide();
                    },
                    child: const Text("Show Progress Dialog"),
                ),
            ),
        ),
    );
}

}

`

**Output :

To know more about ElevatedButton in flutter refer this article: Flutter – ElevatedButton Widget