FLUTTER WEB: How can we have a single codebase for the Flutter app & Web?

Question

We have a single codebase for Android & iOS in Flutter. We tried to use the same codebase for Web in Flutter too, but it hadn't gone well.

As of some libraries/plugins, currently unsupported by Flutter SDK.

To mitigate these issues, we are maintaining two separate repositories, one for Android-iOS and other for Web.

Also, to add up here, for separate repositories because each Flutter product has a unique pubspec.yaml file. Now there are a few plugins that are currently supported in App but Not yet on Flutter Web, namely Awesome Notifications, Clevertap plugin, etc.

Integrating those plugins on the web, stops the web to run. So keeping the same codebase for both is getting technically complicated as the app has many many functions.

It takes so much time in simultaneously testing, debugging and resolving issues in Web.

So, how we can maintain same code for all platforms i.e., Android, iOS & Web, without doing it in other repository for Web and gaining advantage in streamlining our codebase into one for all platforms?

For Ex. If I commented the package awesome_notifications for Web in pubspec file, the issue arises (as shown in the screenshot) in code wherever we used its functionalities. For successfully working on both Mobile & Web, are there any methods available we can use packages for both (Mobile & Web)?

Answer 1

What you need to do is a conditional import for example:

import 'package:eam_flutter/form/mobileui.dart'
if (dart.library.html) 'package:eam_flutter/form/webui.dart'
as multiPlatform;   

Answer 2

Ideally you’d want to use a single codebase to host both the web and mobile versions, to minimise code maintenance and improve efficiency. To do this, you’ll need to be able to find the platform the code is running on, so that code can be called programmatically.

You can use the constant kIsWeb to check if the application is compiled for the web, and you can then use that condition to only run platform-specific code (such as the awesome_notifications package) if you’re on a platform that supports it. That way you’ll still be able to import the required packages, but only call them when the app is running on the mobile version of your app.

That should allow you to condense your codebase into one repository without sacrificing any functionality that may not work across all platforms.