Adding Web Support for Flutter Apps

Create and deploy WebApp on GitHub pages with Flutter

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.