首页 > 解决方案 > Dart/Flutter:如何从异步函数返回小部件?

问题描述

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

当应用程序启动时,下面的代码会运行。

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

标签: flutterasynchronousdartasync-await

解决方案


你应该使用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();
      },
    );

推荐阅读