Display Data Dynamically from Firebase Firestore to Flutter App - flutter

Question

I am trying to create a Music Streaming App, I completed the UI with dummy data but now I want to show the data dynamically through firebase. Here's the App UI to better understand. The images should come from firebase document which looks something like this into a ListView which accepts certain parameters so that I won't have to assign the data to every single widget manually.
I have tried couple of codes but none of them worked... Here's the code.
class Home extends StatefulWidget {
#override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
late QuickPickProvider quickPickProvider;
Future<void> _handleRefresh() async {
return await Future.delayed(Duration(milliseconds: 2200));
}
#override
void initState() {
QuickPickProvider quickPickProvider = Provider.of(context, listen: false);
quickPickProvider.fetchQuickPicks();
super.initState();
}
#override
Widget build(BuildContext context) {
quickPickProvider = Provider.of(context);
return MaterialApp...
Here's the code I tried
Padding(
padding: const EdgeInsets.only(left: 15),
child: const Text('Quick Picks',
style: TextStyle(fontSize: 22),),),
const SizedBox(height: 20),
SizedBox(
height: 212,
width: MediaQuery.of(context).size.width,
child: ListView(
scrolldirection= axis.horizontal,
children: quickPickProvider.getQuickPicksDataList.map(
(quickPicksData) {
return Padding(
padding: const EdgeInsets.only(left: 15.0),
child: SizedBox(
width: 170,
child: Column( mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: [
ClipRRect( borderRadius: const BorderRadius.all(Radius.circular(10),),
child: Image.network(quickPicksData.songImage,),
),
Column(
children: [
Text(quickPicksData.songName,
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.w600),),
Text(
quickPicksData.artistName,
style: const TextStyle(
fontWeight:FontWeight.w500,
fontFamily:'Josefin_Sans')
),
]
),
]
),)
);}
).toList(),),),
...
This is the ticker provider file I am using. (I am using the provider package)
class QuickPickProvider with ChangeNotifier {
List<QuickPickModel> quickPickList = [];
late QuickPickModel quickPickModel;
fetchQuickPicks() async {
List<QuickPickModel> newList = [];
QuerySnapshot value =
await FirebaseFirestore.instance.collection("QuickPicks").get();
value.docs.forEach((element) {
quickPickModel = QuickPickModel(
songImage: element.get("songImage"),
artistName: element.get("artistName"),
songDuration: '00',
songLyrics: '00',
songName: element.get("songName"));
newList.add(quickPickModel);
});
quickPickList = newList;
notifyListeners();
}
List<QuickPickModel> get getQuickPicksDataList {
return quickPickList;
}
}
Here's the error
Error
Please help me with this code or else suggest any other method which is easy and efficient. I don't want to assign image manually to

Answer 1

Try wrap MaterialApp() with ChangeNotifierProvider():
ChangeNotifierProvider<QuickPickProvider>(
create: (_) => QuickPickProvider(),
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: '',
),
)

Answer 2

You can first upload an image to Firebase Storage using:
File imageFile = YOURIMAGEHERE
TaskSnapshot snapshot = await FirebaseStorage.instance.ref('uniquePathForImage').putFile(imageFile);
Then get the url of the image you just uploaded with:
String url = await snapshot.ref.getDownloadURL();
Optionally, you can get an existing file with a url with:
String url = await FirebaseStorage.instance.getFromUrl('yourUrl').getDownloadURL();
This url works like any image url so you can use it with the Image.network widget:
Image.network(url)