如何将图像从Firebase存储显示到小部件中? [英] How to display image from firebase storage into widget?

问题描述

我想将保存在firebase storage中的图像显示到在屏幕上显示profile picture的小部件中. 目前，我能够获取download url，但是不确定如何利用将图像显示到小部件中的URL.这是显示profile picture UI的代码，该UI我要使用Firebase中的图像更新(即在ClipOval小部件内部)

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,)
                  ),
                ),

这是我从firebase storage获取图像的方式，该图像返回下载网址:

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);

  }

我是否需要使用NetworkImage或cached-network-image或cache_image小部件来实现此目的?

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

推荐答案

让NetworkImage进行下载

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

更新

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,

这篇关于如何将图像从Firebase存储显示到小部件中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！