Embed Twitter Timeline in Flutter Web
Prerequisites
As of Flutter 2.0, Flutter has enabled support for running web applications in a stable channel.
Once the web is enabled, run the flutter devices command…you should see something like this:
flutter devices
2 connected device:Chrome • chrome • web-javascript • Google Chrome 78.0.3904.108
Web Server • web-server • web-javascript • Flutter Tools
Begin…
Let’s start with embedding Twitter timeline in the Flutter web.
Twitter allows us to embed a Twitter timeline in web applications/websites. You can find the HTML code at https://publish.twitter.com/
You have to write your handle URL in the above textbox. Twitter will generate the HTML code to embed the Twitter timeline.
Copy the code and let’s move on to our Flutter Project.
This is the initial part of the project. Now let’s start embedding Twitter timeline in Flutter web.
First, Create a twitter.html file in a web folder and paste your Twitter code inside the <body> tag.
Now, We have added the required HTML code in twitter.html. Also, add the id to the anchor tag in twitter.html. which is
<a id="twitter" class="twitter-timeline" href="https://twitter.com/iAdityaSutar?ref_src=twsrc%5Etfw">Tweets by
iAdityaSutar</a>
Now, let’s move on to the widget. Where we need to add the IFrame element.
ui.platformViewRegistry.registerViewFactory(
'twitter',
(int uid) {
IFrameElement _iFrame = IFrameElement()..src = "web/twitter.html";
_iFrame.style.border = "none";
return _iFrame;
},
);Now that we have connected HTML and dart code, We need to show the output in Widget.
Container(
padding: EdgeInsets.all(20.0),
child: HtmlElementView(
viewType: "twitter",
),
),The HtmlElementView widget shows our output in Flutter.
Our final product should look like this.
Note: You shall get an error at ui.platformViewRegistry.registerViewFactory().
The workaround for the issue is:
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory();Github Repo:
https://github.com/aditya305/embed_twitter_timeline_in_flutter_web
