How to add Twitter tweet embeds to your Flutter app with WebViews?
A couple of months ago, I started on a new flutter project. And one of the features we wanted in that was a Twitter tweet embed. We wanted to show tweets from Twitter in our flutter app to keep the users engaged with the relevant news from Twitter without them ever leaving the app.
Here’s one demo of this feature that I implemented in the project.🧑🏽💻
I have seen such types of embeds on the web across different sites, So I decided to check on the Twitter API docs 👀 to check if we can get any relevant info on adding these embeds.
Turns out twitter provides a couple of ways you can go around this.🙌 We can use Twitter oEmbed API or the Twitter widgets js script .
The first one relies on us making some API requests to get some embedding Html data and then making use of that. While the second method is a more straightforward and efficient way to embed the tweets.
We’ll be checking out the second option.
So, how are we going to add this in our flutter apps?🤔
WebViews to the rescue!👋
WebViews can be used to show any type of 🌐 web content in your apps. You may use them to show your privacy policy on the web, show a register page, or embeds just like this!
We’ll make use of WebViews to load these embeds. I won’t be going into much detail about WebViews in this article though they are pretty simple to understand and I will be also sharing some links to articles at the end that covers them really well.
Let’s get started!🙇♂️
Table Of Content :
- Adding WebView plugin
- Loading the Twitter embed
- Adding Loading indicator
- Customizing embed
- Summary
1. Adding WebView plugin :
To support WebViews, we’ll add the webview_flutter
plugin.
- Through CLI :
Run the following command in the root of your flutter project.flutter pub add webview_flutter
or
- Add the latest version manually in pubspec.yaml by getting it from here.\
2. Loading the Twitter embed :
Now that we added the WebView dependency, we can use WebView to show our web content.
To show any type of web content, we have to give it the URL that points to that content.
As we don’t have any URL we can point to, we’ll generate one from the raw Html data string. This will be the Html data string that we’ll be adding to show the embed.
- Adding html data string and generating the url from it :
Now next thing we’ll be doing is create/show the embeds with the help Twitter widgets script.
We are first loading the Twitter widgets script asynchronously by adding this script in our html code.
And then we are creating our tweet widget/embed by calling createMyTweet
once the script loads.
The createMyTweet
method calls the createTweet
method on our twtter
object which creates the tweet with given tweetId
at our element with id container
.
Result :
3. Adding Loading indicator :
You may notice a slight loading time as we try to load the tweet. Instead of showing just a blank space while tweet loads, let’s add a loading indicator to make the UX a little better.🌟
To achieve this, we are going to make use of something really interesting!
JavascriptChannels!🚀
You can use javascriptChannels
to communicate between your js and dart code. Let’s see how we can use them to know when to show/hide a loading indicator till the tweet loads.
- Adding javascriptChannel and loading indicator :
I wrapped our WebView
with a stack
to show a loading indicator on top of it if the isLoaded
is false i.e tweet yet has to load.
WebView takes in a list of JavascriptChannels through javascriptChannels
parameter. It accepts a name and an onMessageRecieved
handler.
Right now, we are updating isLoaded
indicator when we receive a message from our channel. Based on the isLoaded
status, we show the Loading indicator.
- Sending message :
To send a message through these channels, we can call
ChannelName.postMessage(message)
from our js code.
I updated our createMyTweet
method. When the createTweet method completes, we send back the message through our Twitter
javascriptChannel from the .then
callback. Doesn’t matter what we send back atm, as we are only interested in getting notified about the event for now.
Result :
4. Customizing embed :
Embedded tweets can be customized✨ to change the way a tweet is shown. For example, you may want to hide media in a tweet or change the tweet theme to dark, etc.
These customizations are provided as a map to the createTweet method. In the below example, we are changing the tweet theme
to dark
by updating the theme
value.
You can find the list of available customization options here.
Result :
Dark mode looks awesome!😍 Isn’t it!😄
Summary :
- Learned how to add Tweet embeds in flutter apps with Twitter widgets js. Read more here.
- We learned how to use WebViews in flutter apps.
Learn more about WebViews from here.
1. Google IO codelab on WebViews in flutter.
2. Power of WebViews in Flutter — Emily Fortuna
So that covers adding twitter embeds to your flutter apps!🎉🙌
View Src code : Flutter Twitter Embed
Had this topic on my list to write for a while so finally took some time these last two days to get this done.🧑🏽💻
Thanks for reading the article! Hope you enjoyed it!🙇♂️
👏 Enjoyed the article! Would appreciate a clap :)
🚀 More such articles coming where we explore flutter and other interesting things in app development.
👋 Follow up for upcoming articles if you enjoyed reading.
Find me on Twitter where I share such interesting things I’ve been working on — @TakRutvik💙