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.🧑🏽‍💻

Twitter embed demo inside ChaseApp

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 :

1. Adding WebView plugin
2. Loading the Twitter embed
3. Adding Loading indicator
4. Customizing embed
5. 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 :

Loading a tweet through WebViews in Flutter app

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 :

Src code. Added javascriptChannels to WebView to handle callback when the tweet loads. Added isLoaded to know if tweet is loaded or not and show loading indicator respectively.

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.

Src code. Sending back message through Twitter channel from within then callback executing once createTweet call completes.

Result :

Demo of loading indicator while tweet loads.

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.

Updating tweet theme to dark.

You can find the list of available customization options here.

Result :

Tweet embed shown in dark theme.

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💙