How can I render an image from firestore database - flutter

Question

I am working on a project and ended up having an error rendering the image from firestore and still do not understand what is exactly the problem. I am very new to Flutter.
Here is how I am uploading it
RoundedButton(
buttonName: 'Add Event',
onPressed: () async{
if(kIsWeb){
await uploadFileWeb().then((value) => showToast(
message: "Events Added Successfully",
color: Colors.green,
));
Navigator.pop(context);
}
else{
await uploadFile().then((value) => showToast(
message: "Events Added Successfully",
color: Colors.green,
));
Navigator.pop(context);
}
},
color: Colors.green,
),
and the functions
Future selectFile() async{
    final result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
        allowMultiple: false,
        allowedExtensions: ['jpg']
    );
    if(result == null) return;
    final path = result.files.single.path!;
    setState(() {
      file = File(path);
    });
  }
  Future uploadFile() async{
    if(file == null) return;
    final fileName = basename(file!.path);
    final destination = 'events/$fileName';
    task = await FirebaseApi.uploadFile(destination, file!)!.then((_) async{
      DateTime time = DateTime.now();
      await FirebaseFirestore.instance.collection('activities').doc().set({
        'Name' : name,
        'Location': location,
        'Description' : description,
        'Price' : price,
        'Date' : date,
        'PhotoUrl': destination,
        'Type' : selectedType,
        'ts' : time,
      });
    });
  }
  void selectWebImage(){
    res.FileUploadInputElement uploadInput = res.FileUploadInputElement()..accept = 'image/*';
    uploadInput.click();
    uploadInput.onChange.listen((event) {
      webFile = uploadInput.files!.first;
      final reader = res.FileReader();
      reader.readAsDataUrl(webFile!);
      reader.onLoadEnd.listen((event) {
      });
    });
  }
  Future<void> uploadFileWeb()async {
    final dateTime = DateTime.now();
    final path = 'events/$dateTime';
    await FirebaseStorage.instance.refFromURL('gs://tembea-4d3c6.appspot.com')
        .child(path)
        .putBlob(webFile).then((_) async{
      DateTime time = DateTime.now();
      await FirebaseFirestore.instance.collection('activities').doc().set({
        'Name' : name,
        'Location': location,
        'Description' : description,
        'Price' : price,
        'Date' : date,
        'PhotoUrl': path,
        'Type' : selectedType,
        'ts' : time,
      });
    });
  }
}
This is how I am trying to retrieve data
final Stream<QuerySnapshot> activities = FirebaseFirestore
.instance.collection('activities').orderBy('ts', descending: true).snapshots();
StreamBuilder<QuerySnapshot>(
stream: activities,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
if(snapshot.connectionState == ConnectionState.waiting){
return const Center(
child: CircularProgressIndicator(),
);
}
final data = snapshot.requireData;
return ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: data.size,
itemBuilder: (context, index){
if(data.docs[index]['Type'] == 'Event'){
return Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CircleAvatar(
backgroundColor: Colors.transparent,
radius: 40,
backgroundImage: NetworkImage(data.docs[index]['PhotoUrl']),
),
Text( data.docs[index]['Name'], style:const TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Responsive.isWeb(context) ? ButtonBlue(
addLabel: 'Edit Event',
color: Colors.green,
onPressed: (){},
icon: const Icon(IconData(61161, fontFamily: 'MaterialIcons')),
) : InkWell(
onTap: (){},
child: const Icon(IconData(61161, fontFamily: 'MaterialIcons')),
),
Responsive.isWeb(context) ? ButtonBlue(
addLabel: 'Delete Event',
color: Colors.red,
onPressed: (){},
icon: const Icon(Icons.delete_outline,),
): InkWell(
onTap: (){},
child: const Icon(Icons.delete_outline,),
),
],
),
const Divider(
color: Colors.white70,
height:40.0,
),
],
);
}
return Container();
});
},
)
It keeps bringing me this error and I don't know what to do
Invalid argument(s): No host specified in URI file:///events/2021-11-16%2002:59:15.764
I have been on this the entire day and seem not to understand. Can anyone help me on this?

Answer 1

On Firestore you are saving document with final path = 'events/$dateTime'; as PhotoUrl, when retrieving it you are reading the string events/$dateTime and trying to use it as a URI for a NetworkImage.
NetworkImage is then trying to create a URI from that string which results in a local file uri and fails to download it from the network.
Basically, from what I see, you're not actually uploading a picture, but it's difficult to say without the complete code flow.