在颤动中登录屏幕显示循环进度对话框,怎么在颤动中实现进度对话框?

本教程将介绍在颤动中登录屏幕显示循环进度对话框,如何在颤动中实现进度对话框?的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

在颤动中登录屏幕显示循环进度对话框,怎么在颤动中实现进度对话框? 教程 第1张

问题描述

我有一个登录表单,其中有两个文本字段‘用户名’、‘密码’和一个按钮‘登录’。轻触登录按钮,我正在调用API。我想在此API调用期间显示CircularProgressIndicator。进度对话框应显示在登录表单的中心和顶部(&top)。
我尝试过FutureBuilder,但它只隐藏了登录表单显示的CircularProgressIndicator。我希望屏幕的所有内容都显示在CircularProgressIndicator后面。

完整代码:

import 'package:flutter/material.dart';
import 'package:the_don_flutter/userModel.dart';
import 'package:validate/validate.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'signup.dart';

class Login extends StatefulWidget{
  @override
  State<Login> createState() {
 // TODO: implement createState
 return LoginFormState();
  }
}

class LoginFormState extends State<Login>{

  final GlobalKey<FormState> formKey = new GlobalKey<FormState>();

  String _passwordValidation(String value){
 if(value.isEmpty){
return "Field Can't be empty.";
 }else if(value.length < 6)
return "Password must be of six characters long.";
 return null;
  }

  String _checkValidEmail(String value){
 try{
Validate.isEmail(value);
 }catch(e){
return "Email is not valid.";
 }
 return null;
  }

  Future<User> _loginUser() async{
 var response = await http.post("https://example/public/api/login", headers: {}, body: {'username':'poras@techaheadcorp.com', 'password':'123456'})
  .catchError((error) => print("Error $error"));
 print("response of login ${response.body}");
 return User.fromJson(json.decode(response.body));
  }

  @override
  Widget build(BuildContext context) {
 // TODO: implement build
 return Scaffold(
body: Container(
  padding: EdgeInsets.only(left: 20.0, top: 100.0, right: 20.0),
  decoration: BoxDecoration(
image: DecorationImage(
 image: AssetImage("assets/images/bg_green.jpg"),
 fit: BoxFit.fill)),
  child: Column(
 children: <Widget>[

Form(
  key: formKey,
  child: Column(children: <Widget>[
 Padding(padding: EdgeInsets.only(bottom: 20.0),
child: TextFormField(
  validator: _checkValidEmail,
  decoration: InputDecoration(
hintText: "abc@example.com",
labelText: "User Name",
hintStyle: TextStyle(color: Colors.white)),
  style: TextStyle(color: Colors.white),
  autofocus: true,),),
 TextFormField(
obscureText: true,
validator: _passwordValidation,
decoration: InputDecoration(
 hintText: "password",
 labelText: "Password",
 hintStyle: TextStyle(color: Colors.white)),
style: TextStyle(color: Colors.white),
autofocus: true,)
  ],),),
Padding(padding: EdgeInsets.only(top: 20.0),
  child: Row(mainAxisAlignment: MainAxisAlignment.end,
 children: <Widget>[
Text("Forgot Password?", textAlign: TextAlign.start, style: TextStyle(color: Colors.white,),),
 ],),),
Padding(padding: EdgeInsets.only(top: 20.0),
  child: GestureDetector(
 onTap: _submitForm,
 child: Row(mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
  Text("LOGIN", textAlign: TextAlign.start, style: TextStyle(color: Colors.white, fontSize: 40.0),),
  Icon(Icons.chevron_right, size: 40.0, color: Colors.white,),
],),), ),

Expanded(
 child: Padding(padding: EdgeInsets.only(bottom: 20.0),
child: Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.end,
  children: <Widget>[
 Text("Don't have an account?", textAlign: TextAlign.start, style: TextStyle(color: Colors.white,),),
 Container(
  margin: EdgeInsets.only(left: 8.0),
  child: GestureDetector(
 onTap: (){Navigator.push(context, MaterialPageRoute(builder: (context) => Signup()));},
 child: Text("REGISTER NOW!", textAlign: TextAlign.start, style: TextStyle(color: Colors.black,),),
  )),
  ],
),))
 ],
  ),
),
 );
  }

  _submitForm() {
 if(formKey.currentState.validate()){
print("Go to Home page");
_loginUser();
 }
  }

}

推荐答案

api在登录屏幕上提取数据时显示progressdialog单击按钮。

试试这个

声明此方法以显示进度对话框

showLoaderDialog(BuildContext context){
 AlertDialog alert=AlertDialog(
content: new Row(
  children: [
 CircularProgressIndicator(),
 Container(margin: EdgeInsets.only(left: 7),child:Text("Loading..." )),
  ],),
 );
 showDialog(barrierDismissible: false,
context:context,
builder:(BuildContext context){
  return alert;
},
 );
  }

用法

调用API时单击按钮,按如下方式调用此方法

onPressed: () {
 showLoaderDialog(context);
 //api here },

获取响应时,关闭该对话框,如下所示

Navigator.pop(context);

好了关于在颤动中登录屏幕显示循环进度对话框,怎么在颤动中实现进度对话框?的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。