Dart/Flutter：如何从异步函数返回小部件？答案

【问题标题】：Dart/Flutter: How to return widget from async function?Dart/Flutter：如何从异步函数返回小部件？
【发布时间】：2020-11-04 16:16:31
【问题描述】：

我有一个简单的应用程序，用户可以从中登录，登录后会生成一个令牌并将其存储在设备上。

当应用启动时，下面的代码会运行。

import 'package:coolkicks/screens/authpage.dart';
import 'package:coolkicks/screens/homescreen.dart';

import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:logger/logger.dart';

class Authenticate extends StatefulWidget {
  @override
  _AuthenticateState createState() => _AuthenticateState();
}

class _AuthenticateState extends State<Authenticate> {
  final storage = new FlutterSecureStorage();
  var log = Logger();
  bool authenticated = false;

  void checkToken() async {
    String token = await storage.read(key: 'token');
    if (token == null || token.length == 0) {
      authenticated = false;
    
    } else {
      authenticated = true;
      print(token);
      log.d(token);

      log.i(token);
    
    }
  }

  @override
  Widget build(BuildContext context) {
    //check if Authenticated or Not
    //return either Products Home Screen or Authentication Page
    //If token exists, return Home screen
    //Else return authpage

    checkToken();
    
    if(authenticated) {
      return HomeScreen();
    }
    else {
      return AuthPage();
    }

  }
}

我的问题是检索令牌会返回一个未来并需要一些时间来执行。
所以它总是返回默认的authenticated = false

【问题讨论】：

标签： flutter asynchronous dart async-await

【解决方案1】：

你应该使用FutureBuilder

    FutureBuilder<String>(
      future: storage.read(key: 'token'),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final token = snapshot.data;

          if (token == null || token.length == 0) {
            return HomeScreen();
          } else {
            return AuthPage();
          }
        }

        if (snapshot.hasError) return WidgetThatShowsError();

        // by default show progress because operation is async and we need to wait for result
        return CircularProgressIndicator();
      },
    );

【讨论】：

【解决方案2】：

不要这样做。 build 应该是幂等的。您应该在initState 中致电checkToken()。然后您可以使用setState 或使用FutureBuilder。

但是，提供命名，您应该只提供一个启动屏幕，检查条件并导航到任一屏幕，而不是为两个屏幕使用 1 条路线。

【讨论】：