CODEWITHSUNDEEP
firebaseflutterfirebase-storage
Darshan
Darshan

Reputation: 11669

How to display image from firebase storage into widget?

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 ?

Upvotes: 5

Views: 9124

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657268

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,

Upvotes: 7

Related Questions