HUD Progress In Flutter

Naveen Srivastava
Apr 26 · 4 min read

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

HUD Progress

Attributes

Implementation

Code Implement

Code File

Conclusion

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.

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=true

How 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.

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store