从 Firebase Firestore 动态显示数据到 Flutter App答案

【问题标题】：Display Data Dynamically from Firebase Firestore to Flutter App从 Firebase Firestore 动态显示数据到 Flutter App
【发布时间】：2023-02-10 13:11:29
【问题描述】：

我正在尝试创建一个音乐流媒体应用程序，我用虚拟数据完成了 UI，但现在我想通过 firebase 动态显示数据。这是App UI，可以更好地理解。这些图像应该来自 firebase 文档，它看起来像 this 到接受某些参数的 ListView 中，这样我就不必手动将数据分配给每个小部件。

我已经尝试了几个代码，但没有一个有效......这是代码。

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...

这是我试过的代码

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(),),),
...

这是我正在使用的代码提供程序文件。（我正在使用提供程序包）

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;
  }
}

这是错误 Error

请帮助我使用此代码，或者建议任何其他简单有效的方法。我不想手动将图像分配给

【问题讨论】：

嘿，你能分享一下你用这段代码遇到了什么错误吗？
哦，对不起。我已经更新了问题，现在您可以看到错误。

标签： flutter firebase dart google-cloud-firestore backend

【解决方案1】：

尝试将 MaterialApp() 换成 ChangeNotifierProvider()：

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

【讨论】：

【解决方案2】：

您可以先使用以下方法将图像上传到 Firebase 存储：

File imageFile = YOURIMAGEHERE
TaskSnapshot snapshot = await FirebaseStorage.instance.ref('uniquePathForImage').putFile(imageFile);

然后获取您刚刚上传的图片的网址：

String url = await snapshot.ref.getDownloadURL();

或者，您可以使用以下网址获取现有文件：

String url = await FirebaseStorage.instance.getFromUrl('yourUrl').getDownloadURL();

此 url 与任何图像 url 一样工作，因此您可以将它与 Image.network 小部件一起使用：

Image.network(url)

【讨论】：