HUD Progress In Flutter
In flutter, we display any progress indicator because our application is busy or on hold, for this, we show a circular progress indicator. An overlay loading screen displays a progress indicator also called modal progress HUD or head-up display, which typically signifies that the app is loading or performing some work.
In this article, we will explore the HUD Progress in flutter using the hud_progress_package. With the help of the package, we can easily achieve hud progress flutter. So let’s get started.
flutter_progress_hud | Flutter Package
Highly customizable modal progress indicator with a fade animation. Wrap with ProgressHUD the widget on top of which you…pub. dev
Table Of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time, Flutter offers great developer tools, with amazing hot reload”
HUD Progress :
The Flutter HUD Progress is a kind of progress indicator library that is like a circular progress indicator. Here HUD means a heads-up display ie a progress pop-up dialog will open above the screen which will have a circular progress indicator. Using this library we can use our flutter. The application can show a circular progress indicator.
Attributes:
Some Basic attributes.
- > borderColor: The Border color property is used to change the indicator background border color.
- > backgroundColor: The background-color property is used to change the color of the indicator background.
- > indicatorColor: The background-color property is used to change the color of the indicator background.
- > textStyle: The textStyle property is used for the text displayed below the indicator, in which the color and style of the text can be changed.
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :dependencies:flutter_progress_hud: ^2.0.0
Step 2: Importing
import 'package:flutter_progress_hud/flutter_progress_hud.dart';Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueHow to implement code in dart file :
Create a new dart file called progress_hud_demo.dart inside the libfolder.
Before creating the Flutter HUD Progress, we wrapped a container with a Progress Hood followed by the Builder class. Inside we have used our widget and defined the border color and background color of the progress indicator. Let us understand this in detail.
ProgressHUD(
borderColor:Colors.orange,
backgroundColor:Colors.blue.shade300,
child:Builder(
builder:(context)=>Container(
height:DeviceSize.height(context),
width:DeviceSize.width(context),
padding:EdgeInsets.only(left:20,right:20,top:20),
),
),
),Now we have taken a button, within which the indicator has set duration 5 seconds in indicator time Future. delayed() and displayed the text of the progress.
Container(
margin: EdgeInsets.only(
left:20.0, right:20.0, top:55.0),
child: CustomButton(
mainButtonText:'Submit',
callbackTertiary:(){
final progress = ProgressHUD.of(context);
progress.showWithText('Loading...');
Future.delayed(Duration(seconds:5), () {
progress.dismiss();
});
},
color:Colors.blue,
),
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'package:progress_hud_demo/shared/custom_button.dart';
import 'package:progress_hud_demo/shared/custom_text_field.dart';
import 'package:progress_hud_demo/themes/device_size.dart';
import 'package:flutter_progress_hud/flutter_progress_hud.dart';
class ProgressHudDemo extends StatefulWidget {
@override
_ProgressHudDemoState createState() => _ProgressHudDemoState();
}
class _ProgressHudDemoState extends State<ProgressHudDemo> {
bool _isInAsyncCall = false;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor:Colors.white,
appBar:AppBar(
backgroundColor:Colors.blue,
title:Text('Flutter HUD Progress Demo'),
elevation:0.0,
),
body:ProgressHUD(
borderColor:Colors.orange,
backgroundColor:Colors.blue.shade300,
child:Builder(
builder:(context)=>Container(
height:DeviceSize.height(context),
width:DeviceSize.width(context),
padding:EdgeInsets.only(left:20,right:20,top:20),
child:Column(
crossAxisAlignment:CrossAxisAlignment.start,
children: [
Column(
crossAxisAlignment:CrossAxisAlignment.start,
children: [
Text('Sign In',style:TextStyle(fontFamily:'Roboto Bold',fontSize:27,fontWeight:FontWeight.bold),),
],
),
SizedBox(height:50,),
Column(
children: [
CustomTextField(hintText: 'Email', type:TextInputType.text, obscureText: false),
SizedBox(height:35,),
CustomTextField(hintText: 'Password', type:TextInputType.text, obscureText: true),
],
),
Container(
margin: EdgeInsets.only(
left:20.0, right:20.0, top:55.0),
child: CustomButton(
mainButtonText:'Submit',
callbackTertiary:(){
final progress = ProgressHUD.of(context);
progress.showWithText('Loading...');
Future.delayed(Duration(seconds:5), () {
progress.dismiss();
});
},
color:Colors.blue,
),
),
],
),
),
),
),
);
}
}Conclusion:
In this article, I have explained a Flutter HUD Progress in a flutter, which you can modify and experiment with according to your own. This little introduction was from the Flutter HUD Progress from our side.
I hope this blog will provide you with sufficient information in Trying up the Flutter HUD Progress in your flutter project. We will show you what the Flutter HUD Progress is? and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
