在等待初始化应用程序时显示进度指示器，例如在验证用户时答案

【问题标题】：show progress indicator when waiting for initializing app for example when authenticate users在等待初始化应用程序时显示进度指示器，例如在验证用户时
【发布时间】：2021-01-17 08:17:58
【问题描述】：

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

在登录和注册过程中，应用程序应该连接到服务器并从数据库中读取数据，因此可能需要一些时间来响应，而用户应该等待。此应用程序需要显示 2 秒 (perfect splash guideline) 的初始屏幕，然后导航到主页或显示进度指示器或显示友好错误，如“检查您的互联网连接”，并在快餐栏中使用重试按钮。为此，您推荐了哪些小部件？

用户运行应用程序然后启动屏幕显示...现在如果需要超过 2 秒并且启动动画结束，它应该显示进度指示器，否则将用户导航到主页。任何提示可能会有所帮助。感谢社区

【问题讨论】：

标签： flutter dart

【解决方案1】：

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

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);
}

所以当你想使用这个功能时，你有两种方式

首先使用无状态小部件

如果你有 StateLess 小部件，你可以使用 https://api.flutter.dev/flutter/widgets/FutureBuilder-class.html

使用 stetefull 小部件

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

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

在你构建使用 isloading 如下所示

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

【讨论】：

更喜欢使用FutureBuilder，因为它可以轻松处理future和build方法，并且可以在flutter引擎启动后实现闪屏或ProgressIndicatorBar等其他小部件，因为它更好地使用像this native dart splash screen这样的包

【解决方案2】：

在正文中，使其成为一个堆栈。让第一个孩子成为您的主要小部件，然后下一个成为中心小部件，其孩子是这样的“正在加载的小部件”

Stack(
 children:[Container(),
  Center(
   child:isLoading?Loading():Container()   
)]
)

定义一个 isLoading 布尔变量并将其声明为 false。每当您必须暂停进行身份验证时，请这样写

setState((){
isLoading = true
})
await {Your authentication stuff}
setState((){
isLoading = false
})

加载小部件可以是您的启动画面。

【讨论】：