Flutter跨平台编译时处理Mapbox依赖冲突问题求助

核心目标：iOS/Android使用Mapbox SDK 11（官方包），Web使用Mapbox JS（mapbox_gl），同时避免依赖冲突。

方案1：条件依赖（最轻量化解决） #

直接在pubspec.yaml中按平台拆分依赖，让每个平台只引入对应需要的包，从根源避免冲突：

dependencies:
  # iOS/Android 依赖官方新版包
  mapbox_maps_flutter: ^1.1.0
  # Web 依赖支持JS的包
  mapbox_gl: ^0.16.0

flutter:
  # 配置平台排除规则，确保无关平台不加载对应依赖
  dependencies:
    mapbox_maps_flutter:
      exclude:
        - web
    mapbox_gl:
      exclude:
        - android
        - ios

代码层面仍保留平台判断逻辑：

import 'package:flutter/foundation.dart';

Widget buildMapWidget() {
  if (kIsWeb) {
    return WebMapWidget(); // 基于mapbox_gl实现
  } else {
    return NativeMapWidget(); // 基于mapbox_maps_flutter实现
  }
}

方案2：Android端手动排除冲突依赖（备选） #

如果条件依赖仍有冲突，可在android/app/build.gradle中手动排除mapbox_gl里的旧版冲突模块：

dependencies {
  // 排除mapbox_gl依赖的旧版core模块，复用mapbox_maps_flutter的新版
  implementation('com.mapbox.mapboxsdk:mapbox-android-sdk:10.0.0') {
    exclude group: 'com.mapbox.mapboxsdk', module: 'mapbox-android-core'
  }
}

注意：此方法需要精准定位冲突模块，维护成本略高，优先推荐方案1。

方案3：封装抽象层（长期优雅方案） #

通过抽象解耦地图实现，后续扩展或切换包更方便：

1. 定义抽象地图服务类：

abstract class MapProvider {
  Widget buildMap({required String accessToken});
}

2. 分别实现Native和Web版本：

// iOS/Android实现
class NativeMapProvider implements MapProvider {
  @override
  Widget buildMap({required String accessToken}) {
    return MapboxMap(
      accessToken: accessToken,
      // 其他Native端配置
    );
  }
}

// Web实现
class WebMapProvider implements MapProvider {
  @override
  Widget buildMap({required String accessToken}) {
    return MapboxMap(
      accessToken: accessToken,
      // 其他Web端配置
    );
  }
}

3. 按需获取实例：

MapProvider getMapProvider() {
  return kIsWeb ? WebMapProvider() : NativeMapProvider();
}

结合方案1的条件依赖，彻底实现跨平台无冲突。

注意事项 #

• 确保两端的Mapbox Access Token一致，避免配置混乱
• Web端需按照mapbox_gl要求，在web/index.html中引入Mapbox JS脚本
• 分别构建三个平台测试，验证依赖加载和地图功能正常

内容的提问来源于stack exchange，提问作者fighter-ii