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

Question

有登录或注册用户的应用程序，并在对其进行身份验证后，将它们导航到主页。
在登录和注册过程中，应用程序应该连接到服务器并从数据库中读取数据，因此可能需要一些时间来响应，而用户应该等待。
此应用程序需要显示 2 秒 (perfect splash guideline) 的初始屏幕，然后导航到主页或显示进度指示器或显示友好错误，例如“检查您的互联网连接”，并在 snackbar 中使用重试按钮。
为此，您推荐哪些小部件？
用户运行应用程序，然后启动屏幕显示......现在，如果它需要超过 2 秒并且启动动画结束，它应该显示进度指示器，否则将用户导航到主页。
任何提示可能会有所帮助。
感谢社区

Answer 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()
 )}