Flutter Web如何实现移动端与Web端共用同一套代码库

1. 依赖层处理：条件声明依赖 #

无需维护两套pubspec.yaml，直接使用Dart官方支持的条件依赖语法，指定仅在移动端引入不支持Web的第三方包，Web编译时会自动忽略这些包，不会触发依赖冲突。
参考配置示例：

name: your_flutter_app
description: A new Flutter project with multi-platform support

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  # 全平台通用依赖直接声明
  shared_preferences: ^2.2.2
  path_provider: ^2.1.0

  # 移动端专属依赖直接声明
  awesome_notifications: ^0.8.2
  clevertap_plugin: ^1.8.0

# 核心配置：指定仅Android/iOS平台保留对应依赖
dependency_overrides:
  awesome_notifications:
    when:
      platform: [android, ios]
  clevertap_plugin:
    when:
      platform: [android, ios]

2. 代码层处理：平台分支隔离 #

仅处理依赖还会存在代码引用报错的问题，需要配合两类代码隔离方案解决：

方案1：快速适配：kIsWeb判断+延迟导入 #

适合小范围调用第三方包的场景，使用kIsWeb常量做编译期平台判断，配合延迟导入语法，避免Web端加载不存在的包代码：

import 'package:flutter/foundation.dart';
// 移动端专属包必须加deferred as前缀做延迟导入
import 'package:awesome_notifications/awesome_notifications.dart' deferred as awesome_notify;

// 封装通知初始化逻辑
Future<void> initNotification() async {
  if (kIsWeb) {
    // Web端走Web适配逻辑，无相关需求可直接留空
    _initWebNotification();
    return;
  }
  // 仅移动端加载并调用专属包能力
  await awesome_notify.loadLibrary();
  awesome_notify.AwesomeNotifications().initialize(
    'resource://drawable/res_app_icon',
    [
      awesome_notify.NotificationChannel(
        channelKey: 'basic_channel',
        channelName: '基础通知',
        channelDescription: '普通通知推送渠道',
        defaultColor: const Color(0xFF9D50DD),
        ledColor: Colors.white,
      )
    ],
  );
}

void _initWebNotification() {
  // 可实现浏览器通知逻辑，无需求留空即可
}

方案2：长期维护：抽象接口+条件导出 #

适合大规模项目，业务代码完全不直接依赖第三方包，通过统一接口层做平台兼容，后续新增平台无需修改业务代码：

1. 首先定义通用抽象接口notification_service.dart

abstract class NotificationService {
  Future<void> init();
  Future<void> sendNotification(String title, String content);
}

// 编译期自动根据平台导入对应实现
export 'notification_service_mobile.dart' if (dart.library.html) 'notification_service_web.dart';

2. 实现移动端版本notification_service_mobile.dart

import 'package:awesome_notifications/awesome_notifications.dart';
import 'notification_service.dart';

class NotificationServiceImpl implements NotificationService {
  @override
  Future<void> init() async {
    AwesomeNotifications().initialize(
      // 移动端初始化逻辑
    );
  }

  @override
  Future<void> sendNotification(String title, String content) async {
    AwesomeNotifications().createNotification(
      content: NotificationContent(
        id: DateTime.now().microsecond,
        channelKey: 'basic_channel',
        title: title,
        body: content,
      ),
    );
  }
}

NotificationService getNotificationService() => NotificationServiceImpl();

3. 实现Web端版本notification_service_web.dart

import 'notification_service.dart';

class NotificationServiceImpl implements NotificationService {
  @override
  Future<void> init() async {
    // Web端初始化逻辑，无需求留空
  }

  @override
  Future<void> sendNotification(String title, String content) async {
    // Web端通知实现逻辑，无需求留空
  }
}

NotificationService getNotificationService() => NotificationServiceImpl();

4. 业务层直接调用，无需做平台判断

final notificationService = getNotificationService();
await notificationService.init();

3. 配套注意事项 #

• 所有引用移动端专属包的代码必须做平台隔离，避免Web编译时引用不存在的代码
• 编译Web端前执行flutter clean && flutter pub get刷新依赖配置，避免残留旧依赖
• 建议优先用抽象接口层的方案统一封装第三方依赖，后续替换依赖或者适配新平台的成本更低

内容的提问来源于stack exchange，提问作者Rohit Bhargava