Question

我不确定如何在构建树中与其他非异步元素一起实现FutureBuilder元素。我正在使用Consumer来监听ChangeNotifierprovider中的更改的事实使事情变得有些复杂。我可以同时使用提供程序和FutureBuilder吗？在以下代码中，我需要访问的相关未来是底部导航栏中的socialProvider.currentavatar和socialProvider.currentname。

Widget build(BuildContext context) {
    var socialProvider = Provider.of<SocialProvider>(context);
    return new MaterialApp(
      home: new Scaffold(
        body: _myPages[_selectedIndex],
        
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          items: <BottomNavigationBarItem>[
          
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            
            BottomNavigationBarItem(
                  icon: Consumer<SocialProvider>(
                  builder: (context, socialProvider, child) {
                return Image.network(socialProvider.currentavatar);
              }),
              title: Consumer<SocialProvider>(
                  builder: (context, socialProvider, child) {
                return Text(socialProvider.currentname);
              }),
            ),
           ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
       
        ),
      ),
    );
  }

这是我的SocialProvider with ChangeNotifier类中的代码。

 class SocialProvider with ChangeNotifier {

  String currentname = loadCurrentName();
  String currentavatar = loadCurrentAvatar();

    loadCurrentName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String currentname = await prefs.getString('currentname') ?? 'Anonymous';
    return currentname;
}
    loadCurrentAvatar() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String currentavatar = await prefs.getString('currentavatar') ?? "https://example.com/default.png";
    return currentavatar;
}
}

如何实现FutureBuilder，以便可以获取socialProvider.currentname和socialProvider.currentavatar？

Answer 1

将脚手架包裹在FutureBuilder中。您可以使用Future.wait在FutureBuilder中运行2个期货。由于您不是从Snapshot获取数据，因此可以摆脱那些使用者，除非您打算更新这些字段。

Widget build(BuildContext context) {
  var socialProvider = Provider.of<SocialProvider>(context);
  return new MaterialApp(
    home: FutureBuilder(
      future: Future.wait([socialProvider.loadCurrentName(), socialProvider.loadCurrentAvatar()]),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Scaffold(
            body: _myPages[_selectedIndex],

            bottomNavigationBar: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              items: <BottomNavigationBarItem>[

                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),

                BottomNavigationBarItem(
                  icon: Consumer<SocialProvider>(
                  builder: (context, socialProvider, child) {
                    return Image.network(snapshot.data[1]);
                  }),
                  title: Consumer<SocialProvider>(
                    builder: (context, socialProvider, child) {
                      return Text(snapshot.data[0]);
                    }),
                ),
              ],
              currentIndex: _selectedIndex,
              onTap: _onItemTapped,

            ),
          );
        } else if(snapshot.hasError) {
          // handle error.
        } else{
          // handle loading.

        }
      }
    ),
  );
}

 class SocialProvider with ChangeNotifier {

  String currentname = loadCurrentName();
  String currentavatar = loadCurrentAvatar();

    Future<String> loadCurrentName() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String currentname = await prefs.getString('currentname') ?? 'Anonymous';
    return currentname;
}
    Future<String> loadCurrentAvatar() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String currentavatar = await prefs.getString('currentavatar') ?? "https://example.com/default.png";
    return currentavatar;
}
}

Flutter / Dart-在我的版本中将FutureBuilder与正常非异步元素一起使用吗？

1 个答案: