Issue
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.
Solution
// 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.',
),
],
),
);
},
)
Answered By - Peter O.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.