Flutter: How to display a text from Firebase? - ios

Question

I have searched a lot but I can't find a solution for this specific problem:
So I want to display a text in my flutter application. But this text shall be variable, so I integrated Firebase to my project. And everything is working well, so I already managed to show images from Firebase but I really don't know how to display a text.
Can you please show me how to do this? Maybe someone could show me the code I need to use to make this work?
This is my code so far, I didn't integrate the specific code to communicate with my Firebase backend, because I don't know how to do this.
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.',
),
],
),
),
),
],
),
),
);
}
}
Can you please help me? Thank you so much!!
Below is a screenshot of my 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

The snapshots() method provides a stream which you can subscribe to get the latest document changes. To update your ui using the stream, you can use StreamBuilder which builds itself based on the latest snapshot of interaction.
One final thing is that you can't use StreamBuilder as a child to a TextSpan. So, you will either rebuild the RichText widget or use WidgetSpan to rebuild only the span when there is an event on your stream.
Here is an example:
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.',
),
],
),
)
Note: I tried to keep the example simple as far as possible, but you can learn more about StreamBuilder to handle errors/data and the state of connection.