Image not loading from firestore in flutter app - flutter

Question

I am very new to Flutter and Firestore. So I uploaded some photos on Firebase storage.
Here is how storage looks
Then I pasted their download URL into firestore database.
Here is how firestore looks
but every time I try to get them in my app I am getting the following error
════════ Exception caught by widgets library ═══════════════════════════════════
'package:flutter/src/painting/_network_image_io.dart': Failed assertion: line 26 pos 14: 'url != null': is not true.
The relevant error-causing widget was
FutureBuilder
But other data is reading and showing up in the widget.
here is my code:
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());
},
);
}
}
Any help will be really appreciated. Thanks!

Answer 1

So, I finally figured it out. If any one is looking for an answer. All you have to do is, after storing the image in firebase storage you have to copy the storage location not the download URL, then put it inside firestore. Then use firebase image provider package to call it in your app
child: ListTile(
leading: CircleAvatar(
radius: 25,
backgroundImage: FirebaseImage(coffee.img),
),

Answer 2

Try to print the image URL in the console to make sure of its value.
The error is saying that its value is null so you might have not written the key Map key of the image URL correctly.