Original address: medium.com/flutter-cla…
Original author: medium.com/hiashutosh
Published: April 20, 2021-4 minutes to read
On March 3, 2021, during the Flutter Engage event, one announcement that struck me, among other important announcements, was that Flutter Web is now stable.
As a mobile developer, I never imagined myself creating Web applications, so the thought of being able to create one was exciting! So I decided to do it myself. So I decided to take matters into my own hands and share my findings with the community. In this series, we will migrate the Aqi_monitor application, written by Ansh Singh
Before entering Flutter Web, let’s look at some important prerequisites.
1) Analyze your package
Check the packages in the pubspec.yaml file and take a look at pub.dev to see which packages support the Web. If a package is not network compatible, you may want to look for an alternative. For example, packages like twilio_programmable_video, firebase_dynamic_links do not yet have network support. So the best solution is to choose a package that supports a web platform, or you can always choose to make your own plug-in.
In the aQI_monitor project, we have the HTTP, provider, shared_preferences, Flutter_SVG, hive, and hive_flutter Flutter packages, all of which have network support enabled, so we have categorized them in this section. 😁
2) Add Web support to your current Flutter application.
I) If your application was created on Flutter version <2.0.0, go to the root folder of your application and run the following command. This will create the missing necessary files for you.
flutter create .
Copy the code
Ii) If your Flutter application was created when Flutter version ≥2.0.0, then you have been overwritten and you should see the Web folder and its necessary files already there.
Now, run your project in Google Chrome by executing the following command.
flutter run -d ch
Copy the code
The first screen of your application should load in a Web browser. While it might look a bit elongated due to the screen resolution, we can certainly fix it later.
- Fixed cross-source resource sharing (CORS) errors
If your Flutter application is making API calls, it is possible that your backend API is not configured as CORS. Basically, it limits the ability of different domains to share resources. To learn more about CORS, read this article.
Your backend engineers need to add headers to HTTP responses to avoid CORS errors.
However, for development purposes, you can run your Flutter project in Chrome by disabling its security. Here are some more details on this.
For macs, I execute 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
Copy the code
Run your Flutter project from the root of the folder with flutter Run -d ch. When it opens on normal Chrome, simply copy its localhost URL and run it on Disabled Chrome. You will then find that the API with the PREVIOUS CORS error will start working properly.
Note: This is only a temporary solution and will not work when deploying your site.
In the next article, I will explain how to set up routing in the Flutter project so that it works seamlessly on mobile and web platforms.
Medium.com/flutter-cla…
If you find this article useful, please click the clap icon 👏 and share it with your friends, as this will inspire me to write more articles. If you have any questions about Flutter, please feel free to contact me on social media platforms.
Linktr. Ee/hiahutoshsi…
Translation via www.DeepL.com/Translator (free version)