'package:flutter/src/painting/_network_image_io.dart': Failed assertion: line 25 pos 14: 'url != null': is not true

Question

I want to display image from Firestore in my list view. Hence this is my coding.

My list view class.

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

import 'package:fyp/shared/Loading.dart';

class ListTask extends StatefulWidget {
  @override
  _ListTaskState createState() => _ListTaskState();
}


final FirebaseAuth auth = FirebaseAuth.instance;
Stream<QuerySnapshot> getUserRd(BuildContext context) async* {
  final FirebaseUser rd = await auth.currentUser();
  yield* Firestore.instance.collection("Task").where('uid',isEqualTo: rd.uid).snapshots();
}
List<NetworkImage> _listOfImages = <NetworkImage>[];
class _ListTaskState extends State<ListTask> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: StreamBuilder(
          stream: getUserRd(context),
          builder: (context, snapshot){
            if (snapshot.hasError || !snapshot.hasData) {
              return Loading();
            } else{
              return ListView.builder(
                  itemCount: snapshot.data.documents.length,
                  itemBuilder: (BuildContext context, int index){
                    _listOfImages =[];
                    for(int i =0; i <snapshot.data.documents[index].data['urls'].length; i++){
                      _listOfImages.add(NetworkImage(snapshot.data.documents[index].data['urls'[i]]));  //show this line was error
                    }
                    final ba = snapshot.data.documents[index];
                    return Card(
                        child:ListTile(
                          title: Container(
                            alignment: Alignment.centerLeft,
                            child: Column(
                              children: <Widget>[
                                SizedBox(height: 5.0),
                                Container(alignment: Alignment.centerLeft,
                                  child: Text(ba['sumberAduan']),
                                ),
                                SizedBox(height: 5.0),
                                Container(alignment: Alignment.centerLeft,
                                  child: Text(ba['noAduan']),
                                ),
                                SizedBox(height: 5.0),
                                Container(alignment: Alignment.centerLeft,
                                  child: Text(ba['kategori']),
                                ),
                                SizedBox(height: 5.0),
                                Container(alignment: Alignment.centerLeft,
                                  child: Text(ba['verified']),
                                ),
                                Column(
                                  children: [
                                      Container(
                                        margin: EdgeInsets.all(10.0),
                                        height: 200,
                                        decoration: BoxDecoration(
                                          color: Colors.white
                                        ),
                                         width: MediaQuery.of(context).size.width,
                                        child: Carousel(
                                          boxFit: BoxFit.cover,
                                          images: _listOfImages,
                                          autoplay: false,
                                          indicatorBgPadding: 5.0,
                                          dotPosition: DotPosition.bottomCenter,
                                          animationCurve: Curves.fastLinearToSlowEaseIn,
                                          animationDuration: Duration(milliseconds: 2000),
                                        ),
                                      )
                                  ],
                                )
                              ],
                            ),
                          ),
                        )
                    );
                  });
               }
          }),
    );
  }
}

This is my collection document from firestore. I want to display image from urls.

I had tried many method to display the image but unfortunately didn't work for me. So is there that I missing? someone help me please.

Solution

Try doing this in your itemBuilder

  final List<NetworkImage> _listOfImages = snapshot.data.documents[index].data['urls']
    .map((String e) => NetworkImage(e))
    .toList();

map loops over the list of URLs and converts them to NetworkImages