Odtnhj

I want to display the image saved in firebase storage into a widget that shows profile picture in my screen.
Currently I am able to get the download url but not sure how to make use of that url that will display the image into the widget. Here's the code that displays the profile picture UI that I want to update with image from firebase (ie inside ClipOval widget)

@override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: Text('Edit Profile'),
 actions: <Widget>[
 new Center(child: new Text('SAVE')),
 ],
 ),
 body: new Stack(
 children: <Widget>[
 Positioned(
 width: 410.0,
 top: MediaQuery
 .of(context)
 .size
 .height / 25,
 child: Column(children: <Widget>[
 Container(
 child: user.profilePhoto == ""
 ? Image.asset('icons/default_profile_icon.png',
 height: 110.0)
 : ClipOval(
 child: _imageFile == null ? Image.asset('icons/default_profile_icon.png', height: 110.0,)
 :Image.file(_imageFile,fit: BoxFit.cover,
 width: 110.0,
 height: 110.0,)
 ),
 ),

This is how I am fetching image from firebase storage which returns download url:

 displayFile(imageFile) async 

 String fileName = 'images/profile_pics/' + this.firebaseUser.uid + ".jpeg";
 var data = await FirebaseStorage.instance.ref().child(fileName).getData(10000000);
 var text = new String.fromCharCodes(data);
 return new NetworkImage(text);

 

Do I need to use NetworkImage or cached-network-image or cache_image widget to achieve this ?

Let NetworkImage do the download

var ref = FirebaseStorage.instance.ref().child(fileName)
String location = await ref.getDownloadURL();
return new NetworkImage(downloadUrl);

update

String _imageUrl;

void initState() 
 super.initState();

 var ref = FirebaseStorage.instance.ref().child(fileName)
 ref.getDownloadURL().then((loc) => setState(() => _imageUrl = loc));

...

 child: _imageUrl == null ? Image.asset('icons/default_profile_icon.png', height: 110.0,)
 :ImageNetwork(_imageUrl,fit: BoxFit.cover,