Flutter/Dart - 在我的构建中使用 FutureBuilder 和 Normal 非异步元素？

Question

我不确定如何实现 FutureBuilder元素以及我的构建树中的其他非异步元素。我正在使用 Consumer 的事实监听 ChangeNotifierprovider 中的变化使事情有些复杂化。我可以同时使用提供者和 FutureBuilder 吗？在以下代码中，我需要访问的相关 future 是 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)。

 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 个 future 。由于您没有从 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;
}
}