显示来自 Firebase 的图像答案

【问题标题】：Display an image from Firebase显示来自 Firebase 的图像
【发布时间】：2021-09-11 22:30:57
【问题描述】：

我正在尝试显示存储在 Firebase 中的图像。我试过这段代码，但它给了我这个错误正文可能正常完成，导致返回“null”，但返回类型可能是不可为空的类型。这个错误来自{builder: (context, snapshot){

如何修复代码？

[EDIT]下面的代码没有给出更多错误，但它没有显示图像

依赖版本：

firebase_core：^1.3.0
firebase_analytics：^7.0.1
firebase_auth：^1.4.1
cloud_firestore：^2.2.2
firebase_storage：^8.1.3

InkWell(
    onTap: () {
      Navigator.push(context,MaterialPageRoute(builder: (context) => StantonPlanet())); //Pyro
    },
    child: Container(
      margin: EdgeInsets.only(bottom: 5),
      height: 180,
      child: Card(
        color: blue,
        semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: FutureBuilder(
          future: _getImage(context, 'pyro.png'),
          builder: (context, snapshot){

              if(snapshot.connectionState == ConnectionState.done){
                return Container(
                 child: snapshot.data,
                );
              }

              if(snapshot.connectionState == ConnectionState.waiting){
               return Container(child: CircularProgressIndicator(),);
              }

              return Container();

          }
        ),
        //Image.asset('assets/images/systems/pyro.png', fit: BoxFit.fill,),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        elevation: 0,
        margin: EdgeInsets.all(10.0),
      ),
    ),
  ),//close InkWell

这是班级

class FireStorageService extends ChangeNotifier{
  FireStorageService();
  static Future<dynamic> loadImage(BuildContext context, String Image) async{
    return await FirebaseStorage.instance.ref().child(Image).getDownloadURL();
  }
}

这就是未来

 Future<Widget> _getImage(BuildContext context, String imageName) async{
    Image image = '' as Image;
    await FireStorageService.loadImage(context, imageName).then((value) {
     image =Image.network(
       value.toString(),
       fit: BoxFit.fill,
     );
    });
    return image;
  }

【问题讨论】：

您只需指定在 ConnectionState 完成时要显示的小部件。您还需要指定在 ConnectionState 未完成时显示的另一个小部件，例如加载指示器。
已编辑，0 个错误，但它不显示图像。
检查您是否收到正确的图片 URL。打印“价值”并查看
它不打印任何东西，就好像它没有看到打印一样

标签： firebase flutter dart flutter-layout firebase-storage

【解决方案1】：

固定

InkWell(
    onTap: () {
      Navigator.push(context,MaterialPageRoute(builder: (context) => StantonPlanet())); //Pyro
    },
    child: Container(
      margin: EdgeInsets.only(bottom: 5),
      height: 180,
      child: Card(
        color: blue,
        semanticContainer: true,
        clipBehavior: Clip.antiAliasWithSaveLayer,
        child: FutureBuilder(
          future: _getImage(context, 'pyro.png'),
          builder: (context, snapshot){
              if(snapshot.hasError){
                 return Text('${snapshot.error}');
              }
              if(snapshot.connectionState == ConnectionState.done){
                return Container(
                 child: snapshot.data,
                );
              }

              if(snapshot.connectionState == ConnectionState.waiting){
               return Container(child: CircularProgressIndicator(),);
              }

              return Container();

          }
        ),
        //Image.asset('assets/images/systems/pyro.png', fit: BoxFit.fill,),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(10.0),
        ),
        elevation: 0,
        margin: EdgeInsets.all(10.0),
      ),
    ),
  ),//close InkWell

这是班级

class FireStorageService extends ChangeNotifier{
  FireStorageService();
  static Future<String> loadImage(BuildContext context, String image) async{
    return await FirebaseStorage.instance.ref().child(image).getDownloadURL();
  }
}

这就是未来

 Future<Widget> _getImage(BuildContext context, String imageName) async{
    Image image ;
    final value = await FireStorageService.loadImage(context, imageName);
    image =Image.network(
      value.toString(),
      fit: BoxFit.fill,
    );
    return image;
  }

【讨论】：