在等待初始化应用程序时（例如，在对用户进行身份验证时）显示进度指示器 [英] show progress indicator when waiting for initializing app for example when authenticate users

问题描述

有一个应用程序可以登录或注册用户，并在对他们进行身份验证之后，将其导航到主页。

There is application that login or register users and after authenticate them, navigate them to main page.

在登录和注册过程中，应用程序应连接到服务器并从数据库中读取数据用户可能需要等待一段时间才能做出回应。
此应用程序需要启动屏幕才能显示2秒钟（完美启动指南），然后导航到主页或显示进度指示器或显示友好错误，例如检查您的互联网连接在小吃栏中使用重试按钮。
为此目的，您推荐什么小部件？

In login and register processes app should connect to server and read data from database so it can take some time to response ,in the while user should wait. This application need an splash screen to show for 2 second (perfect splash guideline), after that either it navigate to main page or show progress indicator or show friendly error like "check your internet connection" with a retry button in snackbar. What widgets do you recommend for this purpose?

用户运行应用程序，然后启动屏幕显示...现在，如果需要2秒以上的时间，则应显示启动动画结束进度指示器，否则将用户导航到主页。
小费可能会有所帮助。
感谢社区

User run the app then splash screen shows... now if it take more than 2 second and splash animation end it should show progress indicator otherwise navigate user to main page. any tip might help. Thanks community

推荐答案

调用网络服务时，您应该编写一个返回Future的函数，如下所示。 p>

when you call a web service you should write a Function that returns Future like below.

import 'package:http/http.dart' as http;
...
Future<ServerResponse> Login() async {
  final lUrl = '$baseUrl/api...';
  final lResponse = await this.httpClient.get(lUrl);
  if (lResponse.statusCode != 200) {
    return Future.error('error getting locationId for city');
  }

  final lJson = jsonDecode(lResponse.body) as List;
  return Future.value(lJson);
} 

因此，当您要使用此功能时，有两种方法

1. 首先使用无状态小部件

如果您有StateLess小部件，则可以使用< a href = https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html rel = nofollow noreferrer> https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

if you have a StateLess widget you can use https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

1. 使用stetefull小部件

如果您有一个全状态的窗口小部件...在窗口小部件和
中定义 isLoading = true 您可以像下面这样在initState中调用该函数

if you have a statefull widget ... define isLoading = true in your widget and you can call the function in initState like below

  @override
  void initState() {
    login().then((value) {
      print("we Got data !! ");
      isLoading = false;
      setState(() {});
    },onError: (msg){
      // handle error here
      print(msg.toString());
    });
  }

，然后从 isloading 开始构建使用如下所示

and in you build use from isloading like below

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: isLoading ? CircularProgressIndicator() : MyWidget()
 )}

这篇关于在等待初始化应用程序时（例如，在对用户进行身份验证时）显示进度指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！