Journey towards Flutter Web Part 1: Introduction
On 3rd March 2021, along with the other major announcements that were made during the Flutter Engage event, one that stood out for me was that Flutter Web is now stable.
As a Mobile developer, I haven’t ever imagined myself creating Web Apps, so the thought of being able to create one was EXCITING! So I decided to get my hands dirty and share the findings with the community. In this series, we will be migrating the aqi_monitor App by Annsh Singh to Web.
Before diving into Flutter Web, let’s go through some important pre-requisites:
1) Analyze your packages
Check your packages in pubspec.yaml file and take a look on pub.dev to check out which of these have Web support. If a package isn’t Web compatible, you might have to look for another alternative. For E.g. Packages like twilio_programmable_video, firebase_dynamic_links don’t have web support yet. So the best solution is to go for packages that support web platform or you always have the option to make your own plugin.
In the aqi_monitor project, we have http, provider, shared_preferences, flutter_svg, hive and hive_flutter Flutter packages and they all have their web support enabled so we’re sorted on this part. 😁
2) Add Web support to your current Flutter app.
i) If your app was created on Flutter version < 2.0.0, then go to the root folder of the app and run the below command. This will create the necessary files for you that are missing.
flutter create .
ii) If your Flutter app was created on Flutter version ≥2.0.0, then you are already covered and you should see the web folder and its necessary files already there.
Now, run your project on Google Chrome by executing the following command:
flutter run -d ch
Your App’s first screen should load on a Web browser. Though it might look a bit stretched because of the screen resolution, we can certainly fix it later.
3) Fix Cross-Origin Resource Sharing (CORS) Error
If your Flutter app is making API calls then there may be a chance that your backend APIs are not configured for CORS. Basically, it limits the capabilities of sharing resources between different domains. To know more about CORS read this article.
Your backend engineer would need to add relevant headers to the HTTP responses in order to avoid the CORS error.
However, for development purposes, you can run your Flutter project in chrome by disabling its security. More details on this here.
For Mac, I executed this command from the terminal:
open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome — args — user-data-dir=”ANY_TEMP_LOCATION” — disable-web-security
Run your Flutter project by flutter run -d ch from the root of the folder and when it opens on normal chrome just copy its localhost URL and run on the chrome in which security is disabled. Then you will notice that APIs that were giving CORS errors before would start working fine.
Note: This is just a temporary solution and it won’t work while deploying your website.
In the next article, I will be explaining how to set up routes in a Flutter project that will run on both Mobile and Web platforms seamlessly.
