Flutter Web has been in Technical Preview for some time now and has now been merged with the master flutter branch.
Set Up the Chrome Environment
First, we want to make sure we have the latest version of Flutter and also be on at least the master branch. Run this in a terminal:
$ flutter channel master
$ flutter upgrade
Once on the latest version, let’s set up Flutter to work with Chrome Browser as a device. Run this:
$ flutter config --enable-web
$ flutter devices
Yes! Enough with the boring blah-blah-blah talk. Let’s get into the real show.
Create A New Project
Our usual flutter create now has an additional command for web configuration. Navigate to where you want to store your project folder and run this in the terminal:
$ flutter create --web webby
webby is just a fancy name I could think of in the moment for this project.
Yes! We’re done creating our project.
Note: You’ll realize it has the usual android, lib and ios folders and also an additional folder for web. This means we can now deploy to Android, iOS and Web all with just a single codebase. Inside the web folder is where our index.html file (we won’t worry about that for now).
Now let’s open the main.dart file inside the lib folder (that’s where we’ll be writing our codes) and delete all the boilerplate codes thankfully provided by the Flutter team.
Import material.dart and it is still from the same package file as compared to the flutter_web/material.dart which previously used to be the path.
Let’s also set up the entry point to our app as always before with the main() calling runApp(), not forgetting to pass MaterialApp as the argument. We’ll call our home, WebbyHome.
Let’s create our home, WebbyHome. It’ll be a Scaffold with an extended floating action button, and a login form in the center.
I wouldn’t want to bore you with the full explanation of every single line of code. Here’s the full code for our Webby app.
Testing our app
Locate a terminal close to your and navigate to your project’s root directory. Run this command to fire up the up on Chrome (which is now a recognized device):
$ flutter run -d chrome
Within some seconds (or minutes) depending on your PC, you should see a new Chrome window pop up with a localhost address and our web app running.
Running the same code on a mobile device too works just fine.
Building our app
Now that we have our dart code running, we want to build it for the web. Thankfully, the Flutter team has once again done all the heavy lifting for us and we just have to run this command:
$ flutter build web
Once done, you’ll see a build folder in the project’s root directly inside which is a web folder. This web folder contains our built web files (HTML and JS) we need to host our app.
Deploying to Github
Log into your Github account and start up a new repository. Be sure to name the repository username.github.io (where username is your Github username as it appears on your profile else your app won’t be served). You can leave the other fields as they are optional and click the Create Repository button.
Create a folder on your PC, I’ll name mine, github.io and then clone our repository into that directory:
Please note that the URL to your repository will be different from mine as we obviously aren’t using the same username on Github.
This will create a new folder inside our github.io folder with the same name as our repository. Next, copy the web folder which was inside our build folder in the project root and paste it inside the repository folder. I’ll rename it to webby just for the sake of identification later on in the future.
Run the following commands to navigate to our repository folder and push our files to Github.
$ cd Akora-IngDKB.github.io/
$ git add --all
$ git commit -m "Initial Commit"
$ git push -u origin master
Going back to our repository and refreshing the browser tab, we find our files up there:
Now, everything is set. We can open any browser and head on to our URL to use our Web App. The URL will be in this form:
I’ll just enter my URL into the Chrome browser and this is what I get:
Flutter for the web is still a work in progress and in its early experimental support stage. Obviously, there are quite some issues (like the shadow rendering in our project) and no support for plugins yet but it is definitely a promising piece of tech.
Here is the source code for this project:
Follow me on Twitter and feel free to send me a private message if you have a question: