Flutter：如何显示来自 Firebase 的文本？

Question

我进行了很多搜索，但找不到针对此特定问题的解决方案： 所以我想在我的颤振应用程序中显示一个文本。但是这个文本应该是可变的，所以我将 Firebase 集成到我的项目中。一切都运行良好，所以我已经设法显示来自 Firebase 的图像，但我真的不知道如何显示文本。

你能告诉我怎么做吗？也许有人可以告诉我我需要用来完成这项工作的代码？

这是我目前的代码，我没有集成具体的代码来与我的 Firebase 后端通信，因为我不知道该怎么做。

import 'package:flutter/material.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';

class MapsPage extends StatefulWidget {
  MapsPage({Key key}) : super(key: key);
  @override
  _MapsPageState createState() => _MapsPageState();
}

class _MapsPageState extends State<MapsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Firebase'),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Color(0xffFBD23E), Color(0xffF6BE03)],
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter),
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [Color(0xffFEFDFD), Color(0xffBDBDB2)],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight),
        ),
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(12.0),
              child: RichText(
                text: TextSpan(
                  style: TextStyle(color: Colors.black),
                  text: 'Some text',
                  children: [
                    TextSpan(
                      text:
                          'I want this TextSpan to be variable. So if I change the data in my Firestore Database this text shall also change.',
                    ),
                    TextSpan(
                      text: 'And some more text.',
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

你能帮帮我吗？非常感谢！！

下面是我的firestore的截图。

.

Answer 1

// This below returns the text
Future<Map<String, dynamic>> getData() async {
  DocumentReference<Map<String, dynamic>> document =
      FirebaseFirestore.instance.doc('KBADatum/6j5Fnvj0gNkSCRIx7ecH'); // path to doc
  DocumentSnapshot<Map<String, dynamic>> query = await document.get();
  print(query.data());
  return query.data();
}

// and this is how you consume it.
FutureBuilder<Map<String, dynamic>>(
  future: getData(),
  builder: (BuildContext context, AsyncSnapshot<Map<String, dynamic>> snapshot) {
    if (snapshot.hasError) return CircularProgressIndicator();
    if (snapshot.connectionState == ConnectionState.waiting)
      return CircularProgressIndicator();

    return RichText(
      text: TextSpan(
        style: TextStyle(color: Colors.black),
        text: 'Some text',
        children: [
          TextSpan(
            text: snapshot.data['DatumJahr'], // first text
          ),
          TextSpan(
            text: 'And some more text.',
          ),
        ],
      ),
    );
  },
)

Answer 2

snapshots() 方法提供了一个流，您可以订阅该流以获取最新的文档更改。要使用流更新您的 ui，您可以使用 StreamBuilder，它基于最新的交互快照构建自己。

最后一件事是您不能将 StreamBuilder 用作 TextSpan 的子项。因此，您将重建 RichText 小部件或使用 WidgetSpan 仅在您的流中有事件时重建跨度。

这是一个例子：

RichText(
  text: TextSpan(
    style: TextStyle(color: Colors.black),
    text: 'Some text',
    children: [
      // Use WidgetSpan instead of TextSpan, which allows you to have a child widget
      WidgetSpan(
        // Use StreamBuilder to listen on the changes of your Firestore document.
        child: StreamBuilder<DocumentSnapshot<Map<String, dynamic>>>(
          stream: FirebaseFirestore.instance
          .collection('my_collection')
          .doc('my_document')
          .snapshots(),
          builder: (context, snapshot) {
            final document = snapshot.data; // Get the document snapshot
            final text = document?.data()?['my_text']; // Get the data in the text field 

            return Text(text ?? 'Loading...'); // Show loading if text is null
          },
        ),
      ),
      TextSpan(
        text: 'And some more text.',
      ),
    ],
  ),
)

注意：我尽量保持示例简单，但您可以了解有关 StreamBuilder 处理错误/数据和连接状态的更多信息。