Beginner’s guide to Flutter Web — Set up To GitHub Page Deployment

Flutter is amazing! You can build iOS apps and android apps with one codebase. Although it is yet in the beta channel, Flutter also supports the web. Flutter implemented its core drawing layer on top of standard browser APIs and compiled Dart to JavaScript instead of ARM machine code used for mobile applications. If you have experience developing Flutter apps, you can easily develop a web app using Flutter.

This post will guide you on how to set up, run, and deploy Flutter web app.

Want to read this story later? Save it in Journal.

I. Set up

Requirement: Flutter SDK, Chrome, IDE that supports Flutter (I’m using VS Code)

• If you haven’t downloaded Flutter SDK, please download it here.
• If you have downloaded Flutter SDK, run this command to check which channel you are currently using.

$ flutter channel

• You have to be on the Flutter beta channel for Flutter web support.

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

• If web is successfully enabled, this command will output a chrome device.

$ flutter devices

• It is also easy to switch back to the stable channel.

$ flutter channel stable
// this command ensures you are on the latest build 
$ flutter upgrade

II. Build and Run Flutter Web App

First, Create your Project

Move to the directory where you want to create your Flutter web app.

$ flutter create <project_name>

If you open the folder from VSCode, you will see that a web folder is added to the Flutter project.

index.html

In the web folder, an autogenerated index.html exists. In line 43, you can see that the main.dart file compiled to JavaScript code has been added.

Next, Run the Flutter Web App

Let’s run the Flutter web app at localhost in Chrome!

$ cd <project_name>
//this will build the debug version of your app
$ flutter run -d chrome

Since main.dart hasn’t been modified, the autogenerated sample counter app will show on the screen.

counter demo

The layout for the counter sample app was designed for a mobile application, so it doesn’t work like a charm on the web. However, with simple editing, you will be able to create a fully-responsive web app using Flutter.

Several Flutter web app samples are provided by Flutter here.

Build the release version of your app

Once you are done with development, run the command line to build a release version of your app.

$ flutter build web

OPTIONAL: You can also specify the web renderer using --web-renderer.
Flutter uses two types of web renderers to build and run your Flutter project.

HTML : Use HTML elements, CSS, Canvas elements, and SVG elements
CanvasKit : Skia compiled to WebAssembly and rendered using WebGL

According to the Flutter Website, CanvasKit has better performance but has a larger download size. When you build a Flutter web app, you can manually choose which web renderer to use. If you don’t specify, Flutter automatically runs your web app using the HTML renderer for mobile browsers and CanvasKit for desktop browsers.

This creates and places the app and the assets files in the /build/web directory as you can see the build files under the/build/web folder.

III. Deploy using GitHub

There are many options to deploy your web app to the web, but in this post, let’s use GitHub Pages.

i. Create a new repo named <username>.github.io here.

• <username> should exactly match your GitHub username or it won’t work.
• GitHub recommends not to add the README file, license, or gitignore files to avoid errors when you initialize the new repository. Instead, add the files after the project is pushed to GitHub.

ii. Open terminal and move to /build/web

You only need to push the /build/web folder to GitHub. Remember this folder was created when you built the release version of the web app.

$ cd build/web

iii. Add /build/web Folder to the GitHub Repo

$ git init
$ git add .
$ git commit -m "First commit"

• Copy the remote repository URL

$ git remote add origin <remote repository URL>
$ git push -u origin master

All set! Check out your new page at http://<username>.github.io/

If you go to the setting tab on your GitHub Repo, and scroll down, you will find the GitHub Pages tab showing a success message.

• If you get 404 There isn’t a GitHub Pages site here, try adding a Theme under the GitHub Pages tab. Some people seemed to get this error.

I hope this post helped to set up and deploy your first Flutter web app. Thank you for reading this post and happy coding!