Display Data dynamically from firebase storage to Flutter App

Issue

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, I saw a YouTube video also and followed the steps… Here’s the code.

main.dart is seperated from Home.

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

Solution

Try wrap MaterialApp() with ChangeNotifierProvider():

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

Answered By – Sulaymon Ne'matov

Answer Checked By – Timothy Miller (FlutterFixes Admin)