Not getting values in Web view fast enough - database

Question

Hey the problem I am having is kinda unusal..
So am using webviews and as the intialUrl I am using a value I get from the Google cloud_ firestore.. Now to retrieve this link from my fireStore database it takes about 2seconds and during that time my code is running and is thinking that the 'thankGod' variable is empty.. So even the Text widget says that the 'thankGod' variable is null for the first 2seconds and then returns the value after.. But this is not good cause my webView is using the 'thankGod' variable when it is empty.. Here is my code.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:webview_flutter/webview_flutter.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
final Completer<WebViewController> _completer = Completer<WebViewController>();
DocumentReference documentReference = Firestore.instance.collection('dailyPictures').document('t1');
Future<void> getData() async{
await documentReference.get().then((datasnapshots) {
setState(() {
thankGod = datasnapshots.data['picture1'];
});
});
}
String thankGod;
#override
void initState() {
super.initState();
getData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(1800),
),
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.fromLTRB(
20,
20,
20,
20
),
child:
Text(
thankGod,
style: TextStyle(
color: Colors.white,
fontSize:32
),
)
WebView(
initialUrl: thankGod,
debuggingEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: ((WebViewController webViewController){
_completer.complete(webViewController);
}),
),
));
}
}
Please I need help.. Help me share this question

Answer 1

make your return type String for your getData function;
Future<String> getData() async {
DocumentSnapshot = await documentReference.get();
return datasnapshots.data['picture1'];
}
and use FutureBuilder to get your data and build your WebView;
FutureBuilder<String>(
future: getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
String initialUrl = snapshot.data;
return WebView(
initialUrl: initialUrl,
debuggingEnabled: true,
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: ((WebViewController webViewController) {
_completer.complete(webViewController);
}),
);
}
return CircularProgressIndicator();
},
)
note: You don't need call getData() inside initState.