在已有的原生 App 里嵌入 Flutter 页面的方法

在原生 App 中嵌入 Flutter 页面，通常使用 Flutter 提供的**平台通道（Platform Channels）**来实现原生代码与 Flutter 之间的交互。具体实现方式依赖于原生 App 的平台（如 Android 或 iOS），下面是两种常见的方法：

1. 使用 Flutter 插件（Flutter Module）

这种方法通过将 Flutter 作为一个模块嵌入到现有的原生应用中。这样可以让你在现有的原生应用里调用 Flutter 页面。

步骤：

• 创建 Flutter 模块： 首先，你需要创建一个 Flutter 模块，这样就可以将 Flutter 页面嵌入到现有的原生应用中。

  你可以通过以下命令来创建 Flutter 模块：

  flutter create --template module my_flutter

  这样会创建一个 Flutter 模块，目录结构类似：

  my_flutter/
  ├── .ios/
  ├── .android/
  └── lib/

• 将 Flutter 模块添加到现有的原生 App 中：

  • 对于 Android：

    1. 在原生项目的 settings.gradle 中包含 Flutter 模块：

    include ':app', ':my_flutter'
    setProjectDir(':my_flutter', file('path_to_flutter_module'))

    2. 在 app/build.gradle 中添加对 Flutter 的依赖：

    dependencies {
      implementation project(':my_flutter')
    }

    3. 在原生代码中启动 Flutter 页面：

    import io.flutter.embedding.android.FlutterActivity;
    
    // 启动 Flutter 页面
    startActivity(
      FlutterActivity.createDefaultIntent(this)
    );

  • 对于 iOS：

    1. 在原生 iOS 项目的 Podfile 中添加 Flutter 模块依赖：

    flutter_application_path = 'path_to_flutter_module'
    load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

    2. 在原生代码中启动 Flutter 页面：

    import Flutter
    
    let flutterEngine = FlutterEngine(name: "my flutter engine")
    flutterEngine.run()
    
    let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)
    self.present(flutterViewController, animated: true, completion: nil)

2. 使用 FlutterFragment 或 FlutterViewController（更细粒度的控制）

如果你想在原生应用中嵌入一个 Flutter 页面而不是整个 Flutter 模块，可以使用 FlutterFragment（Android）或 FlutterViewController（iOS）来嵌入单个 Flutter 页面。

Android:

你可以通过 FlutterFragment 来嵌入 Flutter 页面：

import io.flutter.embedding.android.FlutterFragment;

FlutterFragment flutterFragment = FlutterFragment.withNewEngine().build();
getSupportFragmentManager()
    .beginTransaction()
    .replace(R.id.fragment_container, flutterFragment)
    .commit();

iOS:

你可以通过 FlutterViewController 来嵌入 Flutter 页面：

import Flutter

let flutterViewController = FlutterViewController()
self.navigationController?.pushViewController(flutterViewController, animated: true)

3. 使用平台通道与原生代码通信

在嵌入 Flutter 页面后，如果需要在 Flutter 与原生代码之间进行通信，可以使用平台通道（Platform Channels）。这允许你在 Flutter 页面与原生应用之间传递数据和调用方法。

• Flutter 端：

  import 'package:flutter/services.dart';
  
  static const platform = MethodChannel('com.example.myapp/channel');
  
  Future<void> _callNative() async {
    try {
      final result = await platform.invokeMethod('nativeMethod');
      print(result);
    } on PlatformException catch (e) {
      print("Failed to call native method: '${e.message}'.");
    }
  }

• Android 端：

  import io.flutter.plugin.common.MethodChannel;
  import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
  import io.flutter.plugin.common.MethodChannel.Result;
  
  new MethodChannel(getFlutterEngine().getDartExecutor(), "com.example.myapp/channel")
      .setMethodCallHandler(
        (call, result) -> {
          if (call.method.equals("nativeMethod")) {
            result.success("Hello from Android");
          } else {
            result.notImplemented();
          }
        });

• iOS 端：

  import Flutter
  
  let channel = FlutterMethodChannel(name: "com.example.myapp/channel", binaryMessenger: flutterViewController.binaryMessenger)
  
  channel.setMethodCallHandler { (call, result) in
      if call.method == "nativeMethod" {
          result("Hello from iOS")
      } else {
          result(FlutterMethodNotImplemented)
      }
  }

这样，你就可以在原生 App 中嵌入 Flutter 页面，并与原生功能进行交互了。