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:
- Build the Flutter Web version of your app
- Host it on GitHub pages or your own server
- 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 config --enable-web
Building the web app is super easy. In your project folder run the following command:
flutter build web
Your app is now in the build/web folder. For more help see the documentation.
Hosting your Flutter app
Here are two relatively easy ways to host your Flutter app. I’m sure there are more, but these are the two I have experience with so far.
Option 1: GitHub Pages
This is a pretty easy option. Here are the basic steps:
- Set up a GitHub Pages site that is connected to your GitHub account. This will give you a repository for your site on GitHub.
- Inside your GitHub Pages repository create a subfolder for your Flutter Web app. For example, if you called the subfolder myapp then your Flutter app would be available at https://myusername.github.io/myapp.
- Copy everything from your Flutter project’s
build/web folder into the subfolder you just made in your GitHub Pages repo.
- Push your changes to GitHub and your Flutter app will be live.
Option 2: Your own web server
If you want a little more power and flexibility than GitHub Pages allows, you can set up your own web server. I really like Nginx because it’s lightweight, powerful, and fast.
- Get a VPS server. I use DigitalOcean*.
- Then ssh into your server and install Nginx. Here is a good tutorial.
- Define the root path where your Flutter web files will go. This will be in the server block in a
sites-available configuration file. (The tutorial I linked to above explains all that.) You can choose anywhere on the server to put your web files, for example: /var/www/example.com/web
- Copy everything from your Flutter project’s
build/web folder into the server’s root web folder that you just defined in the last step.
- Restart Nginx and your Flutter app will be live.
*DigitalOcean: If you’d like to use my referral link, you get a discount and I get credit for my other servers that I host with them. Feel free to shop around, though. I used to find deals on LowEndBox, but the providers there kept going out of business, leaving me high and dry. I switched to DigitalOcean in 2019 because I’d been using their great LEMP stack tutorials for years to set up my WordPress sites. So far I’m satisfied with them.
Embed your Flutter web app in WordPress
The key to embedding your Flutter app in WordPress is to use an IFrame. An IFrame allows you to embed content from another website, which is what your Flutter app is.
- Open a WordPress page in Edit as HTML mode.
- Add the IFrame link to your Flutter web app, setting the size as desired. More explanation here.
<iframe src="https://myusername.github.io/myapp" width="400px" height="300px" align="left"> </iframe>
3. Save your changes.
Your Flutter app is now embedded in WordPress. I told you it was easy.
If you’d like an example, you can check out this one. It’s not beautiful, but it’s a proof of concept. The GitHub Pages repo is here and the unembedded Flutter app is here.
Visitantes en esta publicación: 586
