how to listen to two different futures on one screen? - flutter

Question

I am learning flutter and building a simple vocabulary app. I have one future coming from sqlLite database and another from twitter api. I only know how to create one state class with builder.
So the _tweet method, I need to have it show up in the placeholder/hard coded tweet spot. It doesn't work though.
import 'package:flutter/material.dart';
import '../../resources/dbprovider.dart';
import '../../resources/tweetprovider.dart';
import '../../data/models/word.dart';
import 'package:tweet_webview/tweet_webview.dart';
class WordCard extends StatefulWidget {
final int id;
WordCard({
this.id,
});
#override
State<StatefulWidget> createState() {
return _WordCardState();
}
}
class _WordCardState extends State<WordCard> {
#override
Widget build(BuildContext context) {
final dbProvider = DBProvider.get();
return Scaffold(
appBar: AppBar(
title: Text('Meme Vocab'),
),
body: FutureBuilder<Word>(
future: dbProvider.getWordByID(widget.id),
builder: (context, snapshot) {
if (snapshot.hasData) {
Word word = snapshot.data;
return _card(word);
} else {
return Center(
child: CircularProgressIndicator(),
);
}
}));
}
Widget _card(Word word) {
return Padding(
padding: EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
word.word.trim(),
style: new TextStyle(
fontFamily: "Roboto",
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black.withOpacity(0.45)),
textAlign: TextAlign.left,
),
Text(
word.definition,
style: new TextStyle(
fontFamily: "Roboto",
fontSize: 20.0,
fontStyle: FontStyle.italic),
textAlign: TextAlign.left,
),
TweetWebView.tweetUrl(
"https://twitter.com/realDonaldTrump/status/1159898199802425344") //placeholder
],
),
);
}
}
//Don't know where to put this widget so it renders, how to return the tweets I fetch.
Future<Widget> _tweet(Word word) async {
final tweetProvider = TweetProvider();
List<int> tweets = await tweetProvider.getRelevantTweetIDs(word);
final list = ListView.builder(
scrollDirection: Axis.vertical,
padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
itemCount: tweets.length,
itemBuilder: (context, index) {
var tweetID = tweets[index].toString();
return Card(
child: TweetWebView.tweetID(tweetID),
);
},
);
final container =
Container(color: Colors.black26, child: Center(child: list));
return container;
}

Answer 1

I found that Future Builder widget is the way to go. I have it in the place of the TweetWebView or basically I can place it anywhere there is a widget whose's contents are a future.
FutureBuilder(
future: tweetProvider.getRelevantTweetIDs(word),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.hasError) {
print('something went wrong while fetching tweets');
}
return Expanded(child: _tweetList(snapshot.data));
} else {
return Center(child: CircularProgressIndicator());
}
},
)