How to fix flutter widget flickering?

Question

I'm trying to load an image from firebase storage to my app however I have this weird issue where the profile page(where this image is loading) keeps flickering. The image is loading fine however the whole widget keeps flickering. I have narrowed the issue down to the setState() called within the function getProfilePic() after some debugging, however I do not know if it's the function itself or my call to said function.

P.S there is no issue with the fileURL or picRef.getDownloadURL() as I've tested this with a random internet image as well and got the same flickering.

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 is redrawing widget by calling setState. setState calls build method which calls getProfilePic.

Therefore, when first time build method is called we call getProfilePic which again updates widget tree. Fix: Inside getProfilePic add check to call setState if _image is null which will redraw widget only once. It would be better if you use Image.network. You can refer this https://www.woolha.com/tutorials/flutter-display-image-from-network-url-show-loading