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

admin管理员组

文章数量:1287136

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.

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.

• flutter

Share Improve this question Follow edited Feb 24 at 15:34 Eduardo Yáñez Parareda 10.4k44 gold badges4242 silver badges5353 bronze badges asked Feb 24 at 15:00 vlad karasovevlad karasove 1111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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

本文标签：