一、新建原生工程和Flutter Module 1、新建Android工程搭建一個空的Android工程FlutterDemo_Android模擬已經存在的原有工程 Android項目配置： 2、新建iOS工程搭建一個空的iOS工程FlutterDemo_iOS模擬已經存在的原有工程 Xcode ...

一、新建原生工程和Flutter Module

1、新建Android工程

搭建一個空的Android工程FlutterDemo_Android模擬已經存在的原有工程
Android項目配置：

2、新建iOS工程

搭建一個空的iOS工程FlutterDemo_iOS模擬已經存在的原有工程
Xcode項目配置

搭建Pod：
在工程目錄下執行

pod init
pod install

3、新建Flutter Module

這裡使用AndroidStudio做Flutter開發環境

3.1 AndroidStudio添加Flutter插件

3.2 新建Flutter Module

第一步：File -> New Flutter Project

第二步：選擇Flutter

第三步：配置Flutter Module

flutter_demo_module

完成目錄結構

二、Flutter Boost 配置

1、Flutter_Module工程

1.修改pubspec.yaml文件:

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

  # add
  flutter_boost:  
    git:
      url: 'https://github.com/alibaba/flutter_boost.git'
      ref: '4.1.0'

然後執行flutter pub get下載flutter_boost到module中

2.新增willpop.dart頁面做為跳轉目標頁

import 'package:flutter/material.dart';

class WillPopRoute extends StatefulWidget {
  const WillPopRoute({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  State<StatefulWidget> createState() => _WillPopRouteState();
}

class _WillPopRouteState extends State<WillPopRoute> {
  bool shouldPop = true;
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        return shouldPop;
      },
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter Demo'),
        ),
      ),
    );
  }
}

3.修改main.dart文件，配置頁面路由

import 'package:flutter/material.dart';
import 'package:flutter_boost/flutter_boost.dart';
import 'package:flutter_demo_module/willpop.dart';

void main() {
  CustomFlutterBinding();
  runApp(const MyApp());
}

class CustomFlutterBinding extends WidgetsFlutterBinding
    with BoostFlutterBinding {}


class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
    // 配置路由
  static Map<String, FlutterBoostRouteFactory> routerMap = {
    'flutterPage': (settings, uniqueId) {
      return PageRouteBuilder<dynamic>(
          settings: settings, pageBuilder: (_, __, ___) => const WillPopRoute());
    }
  };

  Route<dynamic>? routeFactory(RouteSettings settings, String? uniqueId) {
    FlutterBoostRouteFactory? func = routerMap[settings.name!];
    if (func == null) {
      return null;
    }
    return func(settings, uniqueId);
  }

  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return FlutterBoostApp(routeFactory);
  }

}

2、Android跳轉Flutter:

1.setting.gralde添加：

setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_demo_module/.android/include_flutter.groovy'
))
include ':flutter_demo_module'
project(':flutter_demo_module').projectDir = new File('../flutter_demo_module')

註意：new Binding([gradle: this])會有紅色提示，不用管

2.app的AndroidManifest添加：

<activity
    android:name="com.idlefish.flutterboost.containers.FlutterBoostActivity"
    android:theme="@style/Theme.AppCompat"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize" >

</activity>
<meta-data android:name="flutterEmbedding"
    android:value="2">
</meta-data>

註意這一步之後執行gradle sync，如果遇到問題，可以參考文章最後的問題集錦

3.FlutterBoost初始化

自定義Application

class MyApp : Application() {
    override fun onCreate() {
        super.onCreate()
        FlutterBoost.instance().setup(this, object : FlutterBoostDelegate {
            override fun pushNativeRoute(options: FlutterBoostRouteOptions) {
                // 原生跳轉
            }

            override fun pushFlutterRoute(options: FlutterBoostRouteOptions) {
                // Flutter跳轉
            }
        }, FlutterBoost.Callback { engine: FlutterEngine? -> })
    }
}

配置app的AndroidManifest

<application
        android:name=".MyApp"
        ...
</application>

4.Android跳轉代碼

val params: Map<String, Any> = HashMap()
val intent: Intent = FlutterBoostActivity.CachedEngineIntentBuilder(
    FlutterBoostActivity::class.java
)
    .backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.opaque)
    .destroyEngineWithActivity(false)
    .url("flutterPage")
    .urlParams(params)
    .build(context)
startActivity(intent)

3、iOS跳轉Flutter:

1.修改Pod文件

step1. load file

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

step2. install function

install_all_flutter_pods(flutter_application_path)

step3 post_install

post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

完整pod文件

# Flutter Module Path
# step1 load file
flutter_application_path = '../flutter_demo_module'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'FlutterDemo_iOS' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  
  # step2 install function
  install_all_flutter_pods(flutter_application_path)
end

# step3 post_install
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

執行pod install，podhelper.rb 腳本會把你的 plugins， Flutter.framework，和 App.framework 集成到你的項目中。

備註:
Flutter.framework 是 Flutter engine 的框架， App.framework 是你的 Dart 代碼的編譯產物。

2.添加Delegate

定義FlutterDelegate

import UIKit
import Flutter
import flutter_boost
import FlutterPluginRegistrant


class MyBoostAppDelegate: NSObject,FlutterBoostDelegate {
    
    static let shared = MyBoostAppDelegate()

    ///您用來push的導航欄
    var navigationController:UINavigationController?

    ///用來存返回flutter側返回結果的表
    var resultTable:Dictionary<String,([AnyHashable:Any]?)->Void> = [:];

    func pushNativeRoute(_ pageName: String!, arguments: [AnyHashable : Any]!) {

        //可以用參數來控制是push還是pop
        let isPresent = arguments["isPresent"] as? Bool ?? false
        let isAnimated = arguments["isAnimated"] as? Bool ?? true
        //這裡根據pageName來判斷生成哪個vc，這裡給個預設的了
        let targetViewController = UIViewController()

        if(isPresent){
            self.navigationController?.present(targetViewController, animated: isAnimated, completion: nil)
        }else{
            self.navigationController?.pushViewController(targetViewController, animated: isAnimated)
        }
    }

    func pushFlutterRoute(_ options: FlutterBoostRouteOptions!) {
        let vc:FBFlutterViewContainer = FBFlutterViewContainer()
        vc.setName(options.pageName, uniqueId: options.uniqueId, params: options.arguments,opaque: options.opaque)

        //用參數來控制是push還是pop
        let isPresent = (options.arguments?["isPresent"] as? Bool)  ?? false
        let isAnimated = (options.arguments?["isAnimated"] as? Bool) ?? true

        //對這個頁面設置結果
        resultTable[options.pageName] = options.onPageFinished;

        //如果是present模式 ，或者要不透明模式，那麼就需要以present模式打開頁面
        if(isPresent || !options.opaque){
            self.navigationController?.present(vc, animated: isAnimated, completion: nil)
        }else{
            self.navigationController?.pushViewController(vc, animated: isAnimated)
        }
    }

    func popRoute(_ options: FlutterBoostRouteOptions!) {
        //如果當前被present的vc是container，那麼就執行dismiss邏輯
        if let vc = self.navigationController?.presentedViewController as? FBFlutterViewContainer,vc.uniqueIDString() == options.uniqueId{

            //這裡分為兩種情況，由於UIModalPresentationOverFullScreen下，生命周期顯示會有問題
            //所以需要手動調用的場景，從而使下麵底部的vc調用viewAppear相關邏輯
            if vc.modalPresentationStyle == .overFullScreen {

                //這裡手動beginAppearanceTransition觸發頁面生命周期
                self.navigationController?.topViewController?.beginAppearanceTransition(true, animated: false)

                vc.dismiss(animated: true) {
                    self.navigationController?.topViewController?.endAppearanceTransition()
                }
            }else{
                //正常場景，直接dismiss
                vc.dismiss(animated: true, completion: nil)
            }
        }else{
            self.navigationController?.popViewController(animated: true)
        }
        //否則直接執行pop邏輯
        //這裡在pop的時候將參數帶出,並且從結果表中移除
        if let onPageFinshed = resultTable[options.pageName] {
            onPageFinshed(options.arguments)
            resultTable.removeValue(forKey: options.pageName)
        }
    }
}

修改AppDelegate

import UIKit
import flutter_boost

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
       
        //創建代理，做初始化操作
        let delegate = MyBoostAppDelegate.shared
        FlutterBoost.instance().setup(application, delegate: delegate) { engine in

        }
        return true
    }
}

跳轉Flutter頁面代碼

    @IBAction func clickButton(_ sender: Any) {
        MyBoostAppDelegate.shared.navigationController = self.navigationController
        let options = FlutterBoostRouteOptions()
        options.pageName = "flutterPage"
        FlutterBoost.instance().open(options)
    }

問題集錦

1.Android導入Flutter Module報錯Failed to apply plugin class ‘FlutterPlugin’

setting.gradle修改Model值為RepositoriesMode.PREFER_PROJECT

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.PREFER_PROJECT)
    repositories {
        google()
        mavenCentral()
    }
}

Flutter(六)：Flutter_Boost接入現有原生工程(iOS+Android)