无法在Flutter应用中从Firestore加载图片

问题描述

我对Flutter和Firestore非常陌生。因此，我在Firebase存储上上传了一些照片。 Here is how storage looks

然后，我将其下载URL粘贴到firestore数据库中。 Here is how firestore looks

但是每次我尝试在应用程序中获取它们时，都会出现以下错误

════════小部件库捕获到异常═══════════════════════════════ ════ 'package：flutter / src / painting / _network_image_io.dart'：失败的断言：第26行pos 14：'url！= null'：不正确。 相关的引起错误的小部件是 FutureBuilder 但是其他数据正在读取并显示在小部件中。 这是我的代码：

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:dotted_line/dotted_line.dart';

class CourseList extends StatefulWidget {
  @override
  _CourseListState createState() => _CourseListState();
}

class _CourseListState extends State<CourseList> {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: FirebaseFirestore.instance
          .collection('students')
          .doc(FirebaseAuth.instance.currentUser.uid)
          .get(),builder: (BuildContext context,snapshot) {
        if (snapshot.hasData) {
          Map<String,dynamic> documentFields = snapshot.data.data();
          return ListView(
            shrinkWrap: true,children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,children: [
                  Stack(
                    overflow: Overflow.visible,children: [
                      Positioned(
                        // top: 0,child: Padding(
                          padding: const EdgeInsets.fromLTRB(0,10,0),child: Container(
                            width: 430,height: 230,decoration: BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage("assets/hero.png"),fit: BoxFit.cover,),Positioned(
                        top: 200,left: 20,right: 20,child: Card(
                          color: Hexcolor('#3B3E43'),elevation: 10,shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(10.0),child: Padding(
                            padding: const EdgeInsets.all(15),child: Column(
                              children: [
                                Text(
                                  'Welcome to Class Information System',textAlign: TextAlign.center,style: TextStyle(
                                    color: Colors.white,fontFamily: 'ProductSans',fontSize: 16,fontWeight: FontWeight.bold,SizedBox(
                                  height: 10,Text(
                                  'UTM Class Management system offers UTM students a varity of features such as,managing and making real time class schedule,finding class venue with dynamic maps and finding all the lecturers office,phone and email all at one place!',style: TextStyle(
                                    color: Colors.grey[300],fontSize: 11,SizedBox(
                                  height: 15,Column(
                                  children: [
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,children: [
                                        Image.asset(
                                          'assets/001-school.png',scale: 8,SizedBox(
                                          width: 0,Image.asset(
                                          'assets/002-teacher.png',Image.asset(
                                          'assets/003-calendar.png',],SizedBox(
                                      height: 10,Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,children: [
                                        Text(
                                          'Finding class\nvenue with\ndynamic maps',style: TextStyle(
                                            color: Colors.grey[300],fontSize: 10,Text(
                                          'Finding all the\nlecturers informations\nat one place!',Text(
                                          'Make & Edit\nreal time\nclass schedule',)
                              ],SizedBox(
                    height: 220,Padding(
                    padding: const EdgeInsets.fromLTRB(25,child: Text(
                      'Courses Taken',textAlign: TextAlign.left,style: TextStyle(
                        color: Hexcolor('#E69405'),fontSize: 18,25,5),child: DottedLine(
                      direction: Axis.horizontal,lineLength: double.infinity,lineThickness: 1.0,dashLength: 4.0,dashColor: Hexcolor('#707070'),dashRadius: 0.0,dashGapLength: 6.0,dashGapColor: Colors.transparent,dashGapRadius: 0.0,SizedBox(
                    height: 15,Card(
                    color: Hexcolor('#3B3E43'),margin: EdgeInsets.fromLTRB(25,20),shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),child: Padding(
                      padding: const EdgeInsets.all(15),child: ListView(
                        physics: ClampingScrollPhysics(),shrinkWrap: true,children: [
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(10,child: CircleAvatar(
                                    backgroundImage:
                                        NetworkImage(documentFields['img1']),radius: 28,Expanded(
                                flex: 4,child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(20,child: RichText(
                                    text: TextSpan(
                                      style: TextStyle(
                                        fontFamily: 'ProductSans',fontSize: 17,text: documentFields['course1'],children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section1']}',style: TextStyle(
                                            fontFamily: 'ProductSans',fontSize: 14,color: Colors.grey[400],SizedBox(
                            height: 15,DottedLine(
                            direction: Axis.horizontal,dashLength: 10,dashGapLength: 0,Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(10,child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img2']}'),text: documentFields['course2'],children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section2']}',child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img3']}'),text: documentFields['course3'],children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section3']}',child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img4']}'),text: documentFields['course4'],children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section4']}',)
                ],);
        }
        return Center(child: CircularProgressIndicator());
      },);
  }
}

任何帮助将不胜感激。谢谢！

解决方法

所以，我终于弄清楚了。如果有人在寻找答案。您所要做的就是，将映像存储在Firebase存储中之后，您必须复制存储位置而不是下载URL，然后将其放入Firestore中。然后使用Firebase图片提供程序包在您的应用中调用

child: ListTile(
          leading: CircleAvatar(
            radius: 25,backgroundImage: FirebaseImage(coffee.img),),

,

尝试在控制台中打印图像URL，以确保其值。 错误是因为其值为null，所以您可能没有正确写入图像URL的密钥Map密钥。