flutter - 使用Futurebuilder有条件地渲染小部件

Question

我是Flutter和Dart的新手。因此，我正在尝试在Flutter中构建一个简单的身份验证系统。当用户打开应用程序时，我想向他们显示LoginScreen(他们以前没有登录过的位置)或HomeScreen，当他们登录时。

返回loadWidget的Future将确定是否存在持久数据，因此获取用户的信息并显示主屏幕。 child属性不会让我为其分配Future，我不确定，但是我想我必须为此使用FutureBuilder小部件？

首先尝试

  Future<Widget> loadWidget() async{
    SharedPreferences prefs = await SharedPreferences.getInstance();

    // already logged in
    String phone = prefs.getString('phoneNumber');
    if (phone != null) {     
      helper.user = await checkUser(phone); // fetch user info
      return HomeScreen();
    }
    // Not logged in
    else {
      return Login();
    }
  }

对于构建功能，这不起作用

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: loadWidget(), // This does not allow me to assign a future
    )
);
  }

第二次尝试:使用FutureBuilder
我在这里how to assign future<> to widget in flutter?读到有关Futurebuilder的信息，它看起来很不错，所以我将build方法修改为

Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder(
          future: loadWidget(),
          builder: (BuildContext context, AsyncSnapshot<Widget> widget){
            return widget;
          },
        ),
      ),
    );
  }

但这给了我以下错误:

The return type 'AsyncSnapshot' isn't a 'Widget', as defined by anonymous closure.

我该怎么做？谢谢!

Answer 1

您做得对，但问题出在FutureBuilder的返回对象上，请参见此代码中的注释:

// *NOTE: build return Widget: Widget build...
Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: FutureBuilder(
          future: loadWidget(),
          builder: (BuildContext context, AsyncSnapshot<Widget> widget){
            // But 'widget' here is NOT a widget, it is an AsyncSnapshot object,
            // return widget; // **is wrong**
            // instead:
            return widget.data;

            // and better to make it like this:
            //if (!widget.hasData) {
            //  return Center(
            //    child: CircularProgressIndicator(),
            //  );
            //}
            //return widget.data;
          },
        ),
      ),
    );
  }

那是为了解决错误。有关清洁代码的其他建议，通过使其仅返回状态(Auth或Not)来保持身份验证层(loadWidget)的清洁，然后在widget.data内使用FutureBuilder捕获状态，然后从FutureBuilder内基于Auth-state进行路由。