共计 3788 个字符，预计需要花费 10 分钟才能阅读完成。
原文
https://medium.com/flutterdev…
前言
在 flutter 中，咱们显示任何进度指示器，因为咱们的应用程序是忙碌的或在搁置，为此，咱们显示一个循环的进度指示器。笼罩加载屏幕显示一个进度指示器，也称为模态进度 HUD 或平视显示，这通常意味着应用程序正在加载或执行一些工作。
在本文中，咱们将利用 HUD 过程程序包来探讨平视显示器在 flutter 方面的停顿。有了这个软件包，咱们能够很容易地实现平视显示的颤振进度。那么让咱们开始吧。
pub.dev
https://pub.dev/packages/flut…
https://pub.dev/packages/flut…
注释
HUD Progress
Flutter HUD Progress 是一种进度指示器库，就像一个循环的进度指示器。在这里，HUD 意味着一个低头显示器 / 进度弹出对话框将关上以上的屏幕，将有一个循环的进度指示器。应用这个库，咱们能够应用咱们的 flutter。应用程序能够显示循环进度指示器。
属性
- borderColor:
边框 / 色彩: 边框色彩属性用于更改批示符背景边框色彩 - backgroundColor:
背景色彩: 背景色彩属性用于更改指示器背景的色彩 - indicatorColor:
标记 / 色彩: 背景色彩属性用于更改指示器背景的色彩 - textStyle:
文字款式: 属性用于批示符上面显示的文本，文本的色彩和款式能够在该属性中更改
装置
- 第一步: 增加依赖项
将依赖项增加到 pubspec ー yaml 文件。
dependencies:
flutter_progress_hud: ^2.0.0- 第二步: 导包
import 'package:flutter_progress_hud/flutter_progress_hud.dart';- 第三步: 启用 AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true例子
在 lib 目录中创立一个名为 progress_hud_demo.dart 的新 dart 文件。
在创立 Flutter HUD Progress 之前，咱们包装了一个进度遮光罩的容器，其次是建设者类。在外部，咱们应用了咱们的小部件，并定义了进度指示器的边框色彩和背景色彩。让咱们具体地理解一下这一点。
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),
),
),
), 当初咱们曾经采取了一个按钮，在其中指示器设置持续时间 5 秒的指示器工夫将来。delayed() 并显示进度的文本。
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,
),
),当咱们运行应用程序时，咱们应该失去屏幕的输入，就像上面的屏幕截图一样。
残缺代码
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,
),
),
],
),
),
),
),
);
}
}© 猫哥
https://ducafecat.tech/
https://github.com/ducafecat
往期
开源
GetX Quick Start
https://github.com/ducafecat/…
新闻客户端
https://github.com/ducafecat/…
strapi 手册译文
https://getstrapi.cn
微信探讨群 ducafecat
系列汇合
译文
https://ducafecat.tech/catego…
Dart 编程语言根底
https://space.bilibili.com/40…
Flutter 零根底入门
https://space.bilibili.com/40…
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/40…
Flutter 组件开发
https://space.bilibili.com/40…
Flutter Bloc
https://space.bilibili.com/40…
Flutter Getx4
https://space.bilibili.com/40…
Docker Yapi
https://space.bilibili.com/40…