图像未从 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),
),
我对 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),
),