如何从firebase获取图像和视频并在flutter应用程序中显示？

Question

我正在开发一个测验应用程序，它从 Firebase 中调用问题和选项。目前它仅显示 firebase 文档中问题和选项中的文本。我希望它从 firebase 获取图像和视频并将其显示在我的 flutter 应用程序上。是否可以？如果是，请指导我完成它。谢谢！

这是我展示问题的代码..

class QuestionPage extends StatelessWidget {
final Question question;
const QuestionPage({super.key, required this.question});

@override
Widget build(BuildContext context) {
var state = Provider.of<QuizState>(context);

return Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    Expanded(
      child: Container(
        padding: const EdgeInsets.all(16),
        alignment: Alignment.center,
        child: Text(question.text),
      ),
    ),
    Container(
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: question.options.map((opt) {
          return Container(
            height: 90,
            margin: const EdgeInsets.only(bottom: 10),
            color: Colors.black26,
            child: InkWell(
              onTap: () {
                state.selected = opt;
                _bottomSheet(context, opt, state);
              },
              child: Container(
                padding: const EdgeInsets.all(16),
                child: Row(
                  children: [
                    Icon(
                        state.selected == opt
                            ? FontAwesomeIcons.circleCheck
                            : FontAwesomeIcons.circle,
                        size: 30),
                    Expanded(
                      child: Container(
                        margin: const EdgeInsets.only(left: 16),
                        child: Text(
                          opt.value,
                          style: Theme.of(context).textTheme.bodyText2,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        }).toList(),
      ),
    )
  ],
);
}

/// Bottom sheet shown when Question is answered
_bottomSheet(BuildContext context, Option opt, QuizState state) {
bool correct = opt.correct;

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 250,
      padding: const EdgeInsets.all(16),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(correct ? 'Good Job!' : 'Wrong'),
          Text(
            opt.detail,
            style: const TextStyle(fontSize: 18, color: Colors.white54),
          ),
          ElevatedButton(
            style: ElevatedButton.styleFrom(
                primary: correct ? Colors.green : Colors.red),
            child: Text(
              correct ? 'Onward!' : 'Try Again',
              style: const TextStyle(
                color: Colors.white,
                letterSpacing: 1.5,
                fontWeight: FontWeight.bold,
              ),
            ),
            onPressed: () {
              if (correct) {
                state.nextPage();
              }
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  },
);
}
}

Answer 1

从表面上看，您似乎手动存储了图像和视频（不是以编程方式）。这意味着您必须创建一个集合（如果您还没有）并输入您存储在数据库中的每个文件的 url）。

例如，如果您的问题集合中的问题文档包含图像、问题文本和选项列表，则您必须将图像的字符串 url 存储在该特定问题文档中。

要获取图像字符串 url，请单击并复制链接：

然后将其添加到您的收藏中：

完成此操作后，您可以在 flutter 应用程序中访问文档，然后使用以下命令打开图像/视频：

• 扩展图像（用于图像）。
• 更好的玩家。 （视频）。

Answer 2

如果您已将图像和视频直接上传到 Firebase，则可以通过这种方式恢复它们，而无需创建集合：

Reference ref = FirebaseStorage
    .instance
    .ref()
    .child("folderName")
    .child("fileName");
String path = await ref.getDownloadURL();

其中

folderName

是文件夹的名称，在您的情况下为“图像”或“视频”，

fileName

是要显示的文件的名称。

在这里您将找到有关如何在 Flutter 上创建云存储参考的文档