Add web support to your Flutter mobile app
I started playing around with Flutter a few weeks ago and implemented my first demo app. You can find my first impressions and thoughts in this blogpost.
As Flutter is mainly known to be a cross mobile os app framework, obviously this was also the first thing for me to try. But the Flutter team promises something a lot bigger. On their website they state very prominently:
Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
Developing applications for basically all major platforms in just one codebase is a pretty huge thing. Especially if it works without bigger flaws. So I decided to give it a try and see what needs to be done in order to add web support to a Flutter mobile app.
Run your project in the Chrome browser
In order to run your application in Chrome, you need to have Chrome installed and make sure that the Flutter-CLI recognizes it. In a terminal run flutter devices and the output should at least show a line starting with Chrome (web). This means everything is fine and your Chrome browser is ready to be used to run Flutter apps.
The next step is preparing your project to execute your code in the browser.
Flutter adds a directory with files and code needed to run a native app on the respective target platform to your project’s root. E.g. for the browser Flutter adds a folder called web/. There you should find at least an index.html with logic to execute the JavaScript we will later produce, an icons/ directory, a favicon.png and a manifest.json.
When creating a new Flutter project you have the option to let the CLI create this directory for you. If you have omitted it during the initialization of your project or you deleted it later on, you can (re-)create it by running flutter create . in the root directory of your project.
Now you should be able to run your Flutter application in the Chrome browser by either executing flutter run -d chrome in your project’s root directory or if you have an IDE with Flutter support (e.g. IntelliJ) select Chrome (web) as the target device and execute the main.dart file. Both options will automatically open a Chrome instance and connect to the correct port on your localhost.
This way you are able to run your application as a web app in the browser during development. If you want to host your Flutter based web app, all you need to do is to run flutter build web in your project. This will produce the directory build/web/ with the files from the web/ folder I mentioned before and the JavaScript file containing your transpiled Flutter/Dart code. The contents of this directory can be hosted the same way you would host static assets created by Webpack or other JavaScript bundlers.
Dealing with platform exclusive functionality
Some tools and libraries are limited to specific platforms. Let’s take the package sqflite/sqflite.dart as an example. The SQLite database file has to be stored on the file system, which is usually not accessible from a web app running in the browser. So you will see errors in your console or your application may even crash. Here the single codebase promise has its limitations. For such cases, you will need to have different implementations per target platform or find libraries that work on all the targets you want your application to run on.
Luckily Flutter provides a constant which indicates whether the applications code was built for the web. Using the kIsWeb constant you can provide a different implementation for the web than you would for mobile.
E.g. for persistence, you could initiate different persistence connectors with the same interface depending on the value of kIsWeb.
import 'package:flutter/foundation.dart' show kIsWeb;
...
PersistenceConnector persistence = kIsWeb
? LocalStorageConnector()
: SQLiteConnector();Adapting the UI for multiple screen sizes
By following the previous steps your, Flutter app should be running in the browser now. But it still looks like a mobile app scaled up to a bigger screen. The keyword for fixing this issue is responsiveness. There are different ways in Flutter to identify which screen size your application runs on and to adjust your layout accordingly. I won’t go into all the different possibilities Flutter offers in this area. If you want to learn more about this, consider this blogpost by Deven Joshi.
Conclusion
It’s definitely too early and my use cases were not complex enough in order to form a final opinion on whether Flutter is able to keep its promise about building applications for all major platforms from a single codebase. What I can say already is that Flutter tries to make it as convenient as possible to target all these platforms. The basic features like routing and networking work in the browser as well as they do on mobile without any adjustments, whereas some features and libraries are limited to one platform. To be fair, the limitations are mostly on the platforms side and not on Flutter’s.
What’s your experience with cross platform and multi screen size apps developed with Flutter? Have you ever implemented a full-blown web application using Flutter and want to share your thoughts about it?
This blogpost is published by Comsysto Reply GmbH
