Adding Web Support for Flutter Apps
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 :)
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 😃
Let us configure our system in order to create a flutter project with Web Support.
- Flutter SDK. Check out this link for Flutter SDK: https://flutter.dev/docs/get-started/install
- Google Chrome Browser in order to test and debug the Web App.
- 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:
2. Now open up the Terminal Window on Android Studio and write the following commands one by one:
flutter channel beta
flutter config --enable-web
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:
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
After the Command Completion your first flutter Web App will open up for debugging on Chrome:
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 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.
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:
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.
- Go to the Settings of the repository.
- Scroll all the way down to GitHub pages.
- Click on Source Dropdown & select the Master branch there.
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
My name is Yukta Gopalani and I am a member of FOSS Wing at GeekHaven, IIIT-Allahabad.