Adding Web Support for Flutter Apps

Create and deploy WebApp on GitHub pages with Flutter

Yukta Gopalani
Dec 4, 2020 · 5 min read

Being a Flutter mobile App developer, ever thought about the idea of increasing your App’s reach?, not just to Mobile Devices but to more platforms so that people using a laptop or a desktop could also view your piece of art with just the convenience of their Internet Browsers? Well, it’s possible now with the Flutter framework. You can easily deploy your Flutter App as a Web App in just a few easy steps now with the help of our hero, the Flutter Framework taking care of all the boring conversions from the dart code to HTML/JS. Guess what? You have got only one codebase for Android, IOS & now web as well. This blog will also teach you to deploy your Web App on GitHub pages. Seems Cool Right? Follow the Blog ahead & deploy your existing/new Flutter project on the web! This is still in Beta Version, stable versions will come soon :)

Flutter-Web

Prerequisites for the Blog

Having a basic understanding of the Workflow of making Flutter Apps & an inquisitive mind is more than enough to follow the blog 😃

Getting Started

Let us configure our system in order to create a flutter project with Web Support.

Requirements:

  1. Flutter SDK. Check out this link for Flutter SDK: https://flutter.dev/docs/get-started/install
  2. Google Chrome Browser in order to test and debug the Web App.
  3. An I.D.E. that supports Flutter. Android Studio, Visual Studio Code are my recommendations. Check out this link for I.D.E.: https://flutter.dev/docs/get-started/editor

I would be using Android Studio as an I.D.E.

Creating a new Flutter Project with web support:

1. Open the Android Studio and create a new Flutter project as follows:

Click on start a new Flutter project
Flutter Application
Give Project name of your choice

2. Now open up the Terminal Window on Android Studio and write the following commands one by one:

flutter channel beta
flutter upgrade
flutter config --enable-web
Terminal Window in Android Studio

Wait till the process is complete and Dart SDK is configured. At the end the Terminal window would look something like this:

To see if the Process completed successfully, type in the following command on the Terminal Window:

flutter devices

It would display Chrome as a device where you can Debug your App. Phew! You have successfully configured your SDK. Now just restart the I.D.E.(Android Studio) to work further. After restarting, just type in the following command to run you Flutter Demo App by the Flutter Team on Chrome!

flutter run -d chrome
Google Chrome is listed as a device now

After the Command Completion your first flutter Web App will open up for debugging on Chrome:

Demo Web App in debug mode

Pretty Charming right? You have just run your Flutter App on the web. You can take advantage of Hot Reload by just pressing ‘R’ on the terminal to instantly see up your changes & to make your work fast/efficient.

Now let’s build your Flutter App for build Release.

Note: Flutter’s support for web development is not stable yet and hasn’t
been thoroughly tested in production environments. Hence, you may experience some troubles when you use some external plugins in your Flutter Project.

Type in the following command to include the web files in Flutter Project:

flutter create .
flutter create . (It creates Web Files in Flutter Root Project)
flutter build web --release

Now Let’s Deploy your Site on the Github Pages

First, open your Github account and create a new Repository your favorite name.

Your repo HTTPS link

After that in your project will be a build/web folder. This folder contains all the files that you will need to upload to your GitHub Repository. Open the terminal and go to build/web folder by the following commands one by one:

cd ./build/web
git init
git remote add origin <Paste Your Github Repo HTTPS/SSH Link Here>
git add .
git commit -m "Created Flutter Web App"
git push origin master

After this, Your Flutter project web build will be Uploaded in your Github repo.

Now, we just have to change some settings of your Github Repository to Deploy the Web App.

  1. Go to the Settings of the repository.
  2. Scroll all the way down to GitHub pages.
  3. Click on Source Dropdown & select the Master branch there.
Select Master Branch

Congrats buddy! You have successfully deployed your Fluter Web app on the web. The link to the website would be as follows:

https://<Your user id>.github.io/<Repo name>

This blog’s web app is hosted on https://yuktagopalani.github.io/flutterwebapp/

If there is some problem in the opening of the website, try including index.html at the end of the link:

https://<Your user id>.github.io/<Repo name>/index.html

Wow… You have just created your first Web App using Flutter & deployed it on Github Pages. Now you can create your own Flutter Web app by using your own Functionalities & UI as you used to do it while making Mobile Apps. Congratulations, You have got another tool in your developer's Skillset!

THANKS FOR READING

About Me:

My name is Yukta Gopalani and I am a member of FOSS Wing at GeekHaven, IIIT-Allahabad.

Nybles

Taking small bytes out of information

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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