Flutter for the Web — Deploy to Github

Deploy a Flutter web app to Github

Flutter now has experimental support for Web. (Image source: Skywell Software)

Flutter Web has been in Technical Preview for some time now and has now been merged with the master flutter branch.

Flutter now has early experimental support for running flutter web applications. There are still many missing features and known performance issues, so it isn’t recommended for production use.

In this article, we’ll build and deploy a simple web app to Github using Flutter .

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

Wait for it to finish doing it’s thing and we’ll be up and running within seconds.

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

Output of flutter devices after setting up the Chrome environment

Yes! Enough with the boring blah-blah-blah talk. Let’s get into the real show.

Yaaayy… Terminal magic done. We’re in for the cool stuff

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.

Done creating the project.

Structure of our 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.

Simple isn’t it?

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.

Our application running on Chrome

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

This will tell Flutter to convert our dart code into Javascript, which will render our app in the browser.

Building our app for the 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.

The web folder contains the necessary web files for hosting 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.

Creating our repository for hosting. Remember to provide your correct username. Find out more from here

Create a folder on your PC, I’ll name mine, github.io and then clone our repository into that directory:

$ git clone https://github.com/Akora-IngDKB/Akora-IngDKB.github.io.git

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:

Our uploaded files

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:

https://username.github.io/webby

I’ll just enter my URL into the Chrome browser and this is what I get:

Our web app up and running

After here?

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.

Watch out for more articles on both Flutter for mobile and web. Before I leave, I’d like to mention that Hive now works on web with exactly the same code. Feel free to check it out.

Here is the source code for this project:

Akora-IngDKB/webby

Follow me on Twitter and feel free to send me a private message if you have a question:

Akora Ing. DKB

Flutter Community

Flutter Community