The HUD Progress component is used in Flutter

The original

Medium.com/flutterdevs…

preface

In Flutter we display any progress indicators because our application is busy or on hold, and for this we display a cyclic progress indicator. The overwrite load screen displays a progress indicator, also known as a modal progress HUD or head-up display, which usually means that the application is loading or performing some work.

In this article, we will use the HUD process package to explore the progress of the head-up display on FLUTTER. With this package, we can easily achieve a head-up display of flutter progress. So let’s get started.

pub.dev

Pub. Dev/packages/fl…

The body of the

HUD Progress

The Flutter HUD Progress is a library of Progress indicators, just like a circular Progress indicator. In this case, HUD means that a head-up display/progress pop-up dialog opens the above screen, and there will be a circular progress indicator. Using this library, we can use our Flutter. Applications can display loop progress indicators.

attribute

The borderColor property is used to change the indicator background borderColor
BackgroundColor: the backgroundColor property is used to change the color of the indicator background
The indicatorColor property is used to change the color of the indicator background
TextStyle: The property is used to indicate the text displayed below the character. The color and style of the text can be changed in this property

The installation

Step 1: Add dependencies

Add the dependency to the PubSpec * YAML file.

dependencies:
  flutter_progress_hud: ^ 2.0.0
Copy the code

Step 2: Guide the bag

import 'package:flutter_progress_hud/flutter_progress_hud.dart';
Copy the code

Step 3: Enable AndriodX

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
Copy the code

example

Create a new DART file called Progress_hud_demo.dart in the lib directory.

Before creating the Flutter HUD Progress, we wrap a container for the Progress hood, followed by the Builder class. Internally, we used our widget and defined the border color and background color for the progress indicator. Let’s look at 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),),),),Copy the code

Now we have taken a button in which the indicator sets a duration of 5 seconds for the indicator time ahead. Delayed () with text showing 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,
  ),
),
Copy the code

When we run the application, we should get screen output like the screenshot below.

The complete code

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, ), ), ], ), ), ), ), ); }}Copy the code

The elder brother of the © cat

ducafecat.tech/

github.com/ducafecat

The issue of

Open source

GetX Quick Start

Github.com/ducafecat/g…

News client

Github.com/ducafecat/f…

Strapi manual translation

getstrapi.cn

Wechat discussion group Ducafecat