Flutter/Dart - 在我的构建中将 FutureBuilder 与普通非异步元素一起使用？

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.

中的代码

 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 中包装您的脚手架。您可以在 FutureBuilder 中使用 Future.wait 到运行 2 个期货。由于您没有从快照获取数据，除非您打算更新这些字段，否则您可以摆脱这些消费者。

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 与普通非异步元素一起使用？

Flutter/Dart - Use FutureBuilder alongside Normal non-asynchronous elements in my build?

future

dart

flutter

flutter-provider

flutter-change-notifier