Flutter for the Web — Deploy to Github

Deploy a Flutter web app to Github

Akora Ing. DKB
Aug 27, 2019 · 6 min read

Flutter isn’t just a mobile framework but Web Apps too
Flutter isn’t just a mobile framework but Web Apps too
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 .


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
Image for post
Image for post
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
Image for post
Image for post
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.

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

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.

Image for post
Image for post
Done creating the project.
Image for post
Image for post
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.

Image for post
Image for post
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.

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.

Image for post
Image for post
Our application running on Chrome

Running the same code on a mobile device too works just fine.

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.

Image for post
Image for post
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.

Image for post
Image for post
The web folder contains the necessary web files for hosting our app.

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.

Image for post
Image for post
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.

Image for post
Image for post

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
Image for post
Image for post

Going back to our repository and refreshing the browser tab, we find our files up there:

Image for post
Image for post
Our uploaded files
Image for post
Image for post

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:

Image for post
Image for post
Image for post
Image for post
Our web app up and running
Image for post
Image for post

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:



Flutter Community

Articles and Stories from the Flutter Community

Akora Ing. DKB

Written by

Flutter Developer | Android (Java/Kotlin) | Dart | Arduino | Node.js | Python. Electrical Engineering Student, KNUST and Member of the Flutter Ghana Community.

Flutter Community

Articles and Stories from the Flutter Community

Akora Ing. DKB

Written by

Flutter Developer | Android (Java/Kotlin) | Dart | Arduino | Node.js | Python. Electrical Engineering Student, KNUST and Member of the Flutter Ghana Community.

Flutter Community

Articles and Stories from the Flutter Community

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store