ProgressDialog in Flutter
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
- 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
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