无法在Flutter移动项目中同时运行Dart2+Angular Web并共享代码求助

Hey there! Let's work through how to set up code sharing between your Flutter mobile app and an Angular Dart web app, while getting both to run smoothly side by side. Here's a step-by-step approach tailored to your setup:

First, organize your code into a single repository with separate directories for each platform plus shared code. This keeps things clean and makes dependency management easier:

your_root_project/
├── shared/          # Pure Dart code shared across both platforms
│   ├── lib/
│   │   ├── models/  # Data models (e.g., User, Product)
│   │   ├── utils/   # Helper functions, validators
│   │   └── logic/   # Business logic, state management cores (Bloc, etc.)
│   └── pubspec.yaml
├── flutter_app/     # Your existing Flutter mobile project
│   └── pubspec.yaml
└── angular_web/     # New Angular Dart web project (create with `ng new`)
    └── pubspec.yaml

The key to successful code sharing is ensuring everything in shared/ is pure Dart—no imports of flutter/flutter.dart or Angular-specific packages like angular/angular.dart. Stick to:

• Data models (plain Dart classes with no platform dependencies)
• Business logic functions (e.g., calculating cart totals, API request handlers using the http package which works on both platforms)
• Abstract services (define interfaces here, implement them per platform)

In your Flutter app's pubspec.yaml, add a dependency pointing to the shared directory:

dependencies:
  flutter:
    sdk: flutter
  shared:
    path: ../shared

Do the same in your Angular web app's pubspec.yaml:

dependencies:
  angular: ^5.2.0  # Use a version compatible with your Dart 2.0.0-dev.47.0
  shared:
    path: ../shared

Run flutter pub get in the Flutter directory and pub get in the Angular directory to link the packages.

If you need functionality that differs between mobile and web (like showing notifications or accessing device storage), use abstract classes to decouple shared logic from platform implementations.

Example:

• In shared/lib/services/platform_notifier.dart:

abstract class PlatformNotifier {
  void showMessage(String message);
}

• In flutter_app/lib/services/flutter_notifier.dart:

import 'package:shared/services/platform_notifier.dart';
import 'package:flutter/material.dart';

class FlutterNotifier implements PlatformNotifier {
  final BuildContext context;

  FlutterNotifier(this.context);

  @override
  void showMessage(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text(message)),
    );
  }
}

• In angular_web/lib/services/angular_notifier.dart:

import 'package:shared/services/platform_notifier.dart';
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';

@Injectable()
class AngularNotifier implements PlatformNotifier {
  final SnackBarService _snackBarService;

  AngularNotifier(this._snackBarService);

  @override
  void showMessage(String message) {
    _snackBarService.show(SnackBar(message: message));
  }
}

Then inject the correct implementation in each platform's app setup—your shared code can use the abstract PlatformNotifier without knowing which platform it's running on.

• For your Flutter mobile app: Navigate to flutter_app/ and run flutter run as usual.
• For your Angular web app: First install the webdev tool if you haven't (pub global activate webdev), then navigate to angular_web/ and run webdev serve to start a local web server.

Since you're on Flutter master (v0.3.1-pre.13) with Dart 2.0.0-dev.47.0, make sure your Angular Dart dependencies are compatible with this Dart version. Check the Angular Dart package docs for version constraints that match your dev Dart release.

If you use state management libraries like Bloc or Provider, keep the core bloc/logic in the shared/ directory—only the UI-specific providers (like Flutter's BlocProvider or Angular's dependency injection setup) need to live in each platform's project. This lets you share 100% of your state logic across mobile and web.

内容的提问来源于stack exchange，提问作者Larry King