How do I conditionally exclude a specific import in Flutter based on platform (mobile vs. web)?

Question

I'm working on a Flutter app where I need to use platform-specific implementations of a service. I have two files:

braze_service_mobile.dart for mobile platforms braze_service_web.dart for web Both implement the same abstract interface BrazeService, but the web version contains additional web-specific code (e.g., references to dart:js).

I want to ensure that when I build my app for mobile, the web-specific code is not imported at all, and vice versa. I tried using a conditional import like this:

import 'package:my_app/services/braze_service_mobile.dart'
    if (dart.library.html) 'package:my_app/services/braze_service_web.dart';

However, if I accidentally include an unconditional import for braze_service_web.dart somewhere in my code, it causes build errors (e.g., Invalid depfile errors, and errors related to untranslatable URIs such as dart:js on mobile).

My question is: Is there any way to tell the Dart compiler to completely ignore a specific import on certain platforms (for example, exclude braze_service_web.dart when building for mobile)? Or, what is the best practice to ensure that web-specific code is only included in web builds without any chance of conflict?

Any guidance on how to properly structure conditional imports in this scenario would be greatly appreciated.

Answer 1

I have had this issue before and found a solution on the google sign in package example.

Let's imagine I need to create a function that returns a string, but web uses dart:js in the process

First create a new folder "src". Then create the following files under it

src/
├── string_function.dart
└── string_functions/
    ├── mobile.dart
    ├── stub.dart
    └── web.dart

string_function.dart

export 'string_functions/stub.dart'
if (dart.library.js_util) 'string_functions/web.dart'
if (dart.library.io) 'string_functions/mobile.dart';

stub.dart

Just implement an empty type of the function

Future<String> requestWebServerAuthCode(String email) async {
  return '';
}

mobile.dart

Implement mobile version, avoid web-specific imports here.

Future<String> requestWebServerAuthCode(String email) async {
  // implement mobile code
}

web.dart

Implement web version, avoid mobile-specific imports here.

Future<String> requestWebServerAuthCode(String email) async {
  // implement web code
}

When importing for usage, import only the string_function.dart

import 'package:myapp/services/functions/strings/src/string_function.dart';

Note: Make sure the functions you will be adding here have the same name, return type and parameters