I am currently in the process of programming an app in Flutter in which I will also integrate a Twitter feed with the Twitter API. I use the plugin
twitter_api: ^ 0.1.2
to query the twitter api. In the tweets, I also include a link preview in my app via a separate api on my virtual server. I currently have the problem that the tweets are displayed in the wrong order. my assumption is that it is because the http requests of the link preview take different lengths of time and therefore the problem arises that the widgets that are built first are then displayed first. I've already tried to slow down the loop with
await Future.delay(Duration(seconds: 1));
but unfortunately it didn't work either. I would be very grateful for any advice. here is my source code for the twitter feed:
void getTwitterFeed(String userID) async {
Future twitterUserRequest = _twitterOauth.getTwitterRequest(
"GET",
"users/show.json",
options: {
"user_id": userID,
}
);
var userRes = await twitterUserRequest;
var user = json.decode(userRes.body);
String profileIMGTMP = user["profile_image_url_https"];
String profileIMGTmp = profileIMGTMP.replaceAll('_normal', '');
User tmpUser = new User(name: user['name'], screeName: '@' + user['screen_name'], profileImageURL: profileIMGTmp);
Future twitterFeedRequest = _twitterOauth.getTwitterRequest(
"GET",
"statuses/user_timeline.json",
options: {
"user_id": "18641554",
"trim_user": "false",
"tweet_mode": "extended",
"count": "20",
}
);
var feedRes = await twitterFeedRequest;
var profile = json.decode(feedRes.body);
List<Tweet> tmpTweetList = [];
for (var tweet in profile) {
URLS tmpURLS = new URLS(tweet["entities"]["urls"][0]["url"], tweet["entities"]["urls"][0]["expanded_url"], tweet["entities"]["urls"][0]["display_url"],);
Tweet tmpTweet = new Tweet(user: tweet["user"]["id_str"], createdAt: tweet["created_at"], timeAgo: timeago.format(parseDateTime(tweet["created_at"]), locale: 'de'), fullText: tweet["full_text"], urls: tmpURLS);
tmpTweetList.add(tmpTweet);
}
List<Widget> tmpTweetWidgetList = [];
tmpTweetList.forEach((t) async {
await Future.delayed(Duration(seconds: 3));
String tmpFullText = t.fullText.replaceAll(t.urls.url, '');
var metaRequest = await http.get('https://api.aw96.de/dbna/?url=' + t.urls.url);
var metaResponse = json.decode(metaRequest.body);
String image = metaResponse['image'];
if (image.isEmpty) {
setState(() {
image = 'https://icon-library.com/images/no-image-available-icon/no-image-available-icon-6.jpg';
});
}
tmpTweetWidgetList.add(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: Container(
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(color: Color.fromRGBO(104, 114, 124, 1)),
borderRadius: BorderRadius.circular(8.0),
),
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 15.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.circular(50),
child: Image.network(
tmpUser.profileImageURL,
width: 35,
height: 35,
),
),
SizedBox(
width: 10.0,
),
Text(
tmpUser.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 18.0,
),
),
SizedBox(
width: 10.0,
),
Text(
tmpUser.screeName,
style: TextStyle(
color: Color.fromRGBO(104, 114, 124, 1),
fontWeight: FontWeight.bold,
fontSize: 14.0,
),
),
SizedBox(
width: 10.0,
),
Text(
t.timeAgo,
style: TextStyle(
color: Color.fromRGBO(104, 114, 124, 1),
fontWeight: FontWeight.bold,
fontSize: 14.0,
),
),
],
),
Padding(
padding: EdgeInsets.only(top: 15, left: 48, bottom: 10),
child: Column(
children: [
Text(
tmpFullText,
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
SizedBox(
height: 15.0,
),
Container(
child: GestureDetector(
onTap: () async {
await launch(t.urls.url);
},
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Color.fromRGBO(104, 114, 124, 1)),
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: [
Image.network(
image
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 15.0),
child: Text(
metaResponse['title'],
style: TextStyle(
color: Colors.white,
fontSize: 18,
),
),
),
],
),
),
),
),
],
),
),
],
),
),
),
),
);
});
setState(() {
tweets = tmpTweetWidgetList;
});
}
Hopefully you can help me with that. Best regards from Germany