android - 如何修复 flutter 小部件闪烁？

Question

我正在尝试将图像从 firebase 存储加载到我的应用程序，但是我遇到了一个奇怪的问题，即配置文件页面(加载此图像的位置)一直在闪烁。图片加载正常，但整个小部件一直闪烁。经过一些调试后，我已将问题缩小到在函数 getProfilePic() 中调用的 setState()，但是我不知道它是函数本身还是我对所述函数的调用。

P.S fileURL 或 picRef.getDownloadURL() 没有问题，因为我也使用随机互联网图像对此进行了测试，并且出现了相同的闪烁。

class profileTab extends StatefulWidget {
  @override
  _profileTabState createState() => _profileTabState();
}

class _profileTabState extends State<profileTab> {

  User user = FirebaseAuth.instance.currentUser;
  String _image = "https://picsum.photos/250?image=9";

  Reference picRef = FirebaseStorage.instance.ref().child(FirebaseAuth.instance.currentUser.uid);

  Future<Widget> getProfilePic() async {
    await picRef.getDownloadURL().then((fileURL){
       setState(() {
         _image = fileURL;
       });
    });
  }

  @override
  Widget build(BuildContext context) {
    getProfilePic();
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection('users').doc(user.uid).snapshots(),
      builder: (context, snapshot){
        if (snapshot.connectionState == ConnectionState.active){
          return ListView(
              children: <Widget>[
                SizedBox(height: 100.0,),
                CircleAvatar(
                  radius: 100.0,
                  backgroundColor: Colors.lightBlueAccent,
                  child: ClipOval(
                    child: SizedBox(
                      width: 180.0,
                      height: 180.0,
                      child: Image.network(_image,fit: BoxFit.fill,),
                    ),
                  ),
                ),
                SizedBox(height: 30.0,),
                Center(child: Text("Name: " + snapshot.data.data()['name'],textScaleFactor: 3.0,)),
              ]
          );
        }
        else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

Answer 1

getProfilePic 正在通过调用 setState 重绘小部件。setState 调用调用 getProfilePic 的构建方法。

因此，当第一次调用构建方法时，我们调用 getProfilePic 再次更新小部件树。修复:在 getProfilePic 中添加检查以在 _image 为 null 时调用 setState，这将仅重绘小部件一次。如果使用 Image.network 会更好。你可以引用这个 https://www.woolha.com/tutorials/flutter-display-image-from-network-url-show-loading