How to embed your Flutter app in WordPress

Suragch
Flutter Community
Published in
4 min readMar 6, 2020

--

It’s easier than you think. No plugins required.

I wasn’t a web developer until Flutter made me one. All I knew how to do before was create WordPress sites. But once I learned how to make Flutter apps, I wanted to add some Flutter Web magic into my existing sites. It would allow me to create interactive tools or even demo a whole Flutter app right there in the WordPress web page.

It turns out that this is quite easy to do, especially if you already have your Flutter web app running somewhere.

In case you don’t already have your Flutter web app set up, I’ll briefly review how to do that. Then I’ll show you how to embed it in a WordPress page. Here are the steps:

  1. Build the Flutter Web version of your app
  2. Host it on GitHub pages or your own server
  3. Embed it in WordPress

Feel free to skip down to the WordPress section if you’re already familiar with the first two points.

Build the Flutter Web version of your app

At the time of this writing, you need to use the beta channel of Flutter to build a web app. To switch to that channel, run the following commands in the terminal:

flutter channel beta
flutter upgrade
flutter

--

--