图像未从 flutter 应用程序中的 firestore 加载

Image not loading from firestore in flutter app

我对 Flutter 和 Firestore 还很陌生。所以我在 Firebase 存储上上传了一些照片。 Here is how storage looks

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

但每次我尝试将它们放入我的应用程序时,我都会收到以下错误

════════ 组件库捕获异常═══════════════════════════ ════════ 'package:flutter/src/painting/_network_image_io.dart':断言失败:第 26 行第 14 行:'url != null':不正确。 相关的导致错误的小部件是 未来建造者 但是其他数据正在读取并显示在小部件中。 这是我的代码:

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, 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!',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: Colors.grey[300],
                                    fontFamily: 'ProductSans',
                                    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',
                                          scale: 8,
                                        ),
                                        SizedBox(
                                          width: 0,
                                        ),
                                        Image.asset(
                                          'assets/003-calendar.png',
                                          scale: 8,
                                        ),
                                      ],
                                    ),
                                    SizedBox(
                                      height: 10,
                                    ),
                                    Row(
                                      mainAxisAlignment:
                                          MainAxisAlignment.spaceEvenly,
                                      children: [
                                        Text(
                                          'Finding class\nvenue with\ndynamic maps',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: Colors.grey[300],
                                            fontFamily: 'ProductSans',
                                            fontSize: 10,
                                          ),
                                        ),
                                        Text(
                                          'Finding all the\nlecturers informations\nat one place!',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: Colors.grey[300],
                                            fontFamily: 'ProductSans',
                                            fontSize: 10,
                                          ),
                                        ),
                                        Text(
                                          'Make & Edit\nreal time\nclass schedule',
                                          textAlign: TextAlign.center,
                                          style: TextStyle(
                                            color: Colors.grey[300],
                                            fontFamily: 'ProductSans',
                                            fontSize: 10,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ],
                                )
                              ],
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 220,
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(25, 10, 0, 0),
                    child: Text(
                      'Courses Taken',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        color: Hexcolor('#E69405'),
                        fontFamily: 'ProductSans',
                        fontSize: 18,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.fromLTRB(25, 10, 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'),
                    elevation: 10,
                    margin: EdgeInsets.fromLTRB(25, 0, 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, 0, 0, 0),
                                  child: CircleAvatar(
                                    backgroundImage:
                                        NetworkImage(documentFields['img1']),
                                    radius: 28,
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 4,
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(20, 0, 0, 0),
                                  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,
                            lineLength: double.infinity,
                            lineThickness: 1.0,
                            dashLength: 10,
                            dashColor: Hexcolor('#707070'),
                            dashRadius: 0.0,
                            dashGapLength: 0,
                            dashGapColor: Colors.transparent,
                            dashGapRadius: 0.0,
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(10, 0, 0, 0),
                                  child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img2']}'),
                                    radius: 28,
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 4,
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(20, 0, 0, 0),
                                  child: RichText(
                                    text: TextSpan(
                                      style: TextStyle(
                                        fontFamily: 'ProductSans',
                                        fontSize: 17,
                                      ),
                                      text: documentFields['course2'],
                                      children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section2']}',
                                          style: TextStyle(
                                            fontFamily: 'ProductSans',
                                            fontSize: 14,
                                            color: Colors.grey[400],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          DottedLine(
                            direction: Axis.horizontal,
                            lineLength: double.infinity,
                            lineThickness: 1.0,
                            dashLength: 10,
                            dashColor: Hexcolor('#707070'),
                            dashRadius: 0.0,
                            dashGapLength: 0,
                            dashGapColor: Colors.transparent,
                            dashGapRadius: 0.0,
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(10, 0, 0, 0),
                                  child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img3']}'),
                                    radius: 28,
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 4,
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(20, 0, 0, 0),
                                  child: RichText(
                                    text: TextSpan(
                                      style: TextStyle(
                                        fontFamily: 'ProductSans',
                                        fontSize: 17,
                                      ),
                                      text: documentFields['course3'],
                                      children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section3']}',
                                          style: TextStyle(
                                            fontFamily: 'ProductSans',
                                            fontSize: 14,
                                            color: Colors.grey[400],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          DottedLine(
                            direction: Axis.horizontal,
                            lineLength: double.infinity,
                            lineThickness: 1.0,
                            dashLength: 10,
                            dashColor: Hexcolor('#707070'),
                            dashRadius: 0.0,
                            dashGapLength: 0,
                            dashGapColor: Colors.transparent,
                            dashGapRadius: 0.0,
                          ),
                          SizedBox(
                            height: 15,
                          ),
                          Row(
                            children: [
                              Expanded(
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(10, 0, 0, 0),
                                  child: CircleAvatar(
                                    child: Image.network(
                                        '${documentFields['img4']}'),
                                    radius: 28,
                                  ),
                                ),
                              ),
                              Expanded(
                                flex: 4,
                                child: Padding(
                                  padding:
                                      const EdgeInsets.fromLTRB(20, 0, 0, 0),
                                  child: RichText(
                                    text: TextSpan(
                                      style: TextStyle(
                                        fontFamily: 'ProductSans',
                                        fontSize: 17,
                                      ),
                                      text: documentFields['course4'],
                                      children: <TextSpan>[
                                        TextSpan(
                                          text:
                                              '\nSection: ${documentFields['section4']}',
                                          style: TextStyle(
                                            fontFamily: 'ProductSans',
                                            fontSize: 14,
                                            color: Colors.grey[400],
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  )
                ],
              ),
            ],
          );
        }
        return Center(child: CircularProgressIndicator());
      },
    );
  }
}

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

尝试在控制台中打印图像 URL 以确保其值。 错误是说它的值为 null 所以你可能没有正确写入图像 URL 的键 Map 键。

所以,我终于想通了。如果有人正在寻找答案。您所要做的就是,将图像存储在 firebase 存储中后,您必须复制存储位置而不是下载 URL,然后将其放入 firestore。然后使用 firebase 图像提供程序包在您的应用程序中调用它

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