ProgressDialog in Flutter

Last Updated : 15 Jul, 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"), ), ), ), ); } }