我有一个登录表单，其中包含两个文本字段“用户名”、“密码”和一个“登录”按钮。点击登录按钮，我正在调用 API。我想在这个 api 调用期间显示一个 CircularProgressIndicator 。进度对话框应显示在登录表单的中心和顶部。 我试过 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);

关于android - 在 Flutter 的登录屏幕中显示循环进度对话框，如何在 Flutter 中实现进度对话框？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51415236/