如何将 firebase 存储中的图像显示到小部件中?

2024-04-08

我想显示保存在的图像firebase storage进入一个显示的小部件profile picture在我的屏幕上。 目前我能够得到download url但不确定如何使用该 url 将图像显示到小部件中。这是显示的代码profile picture我想用 firebase 中的图像更新 UI(即内部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返回下载网址:

   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 or cached-network-image or cache_image小部件来实现这一点?


Let NetworkImage进行下载

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,
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将 firebase 存储中的图像显示到小部件中? 的相关文章

随机推荐