Flutter：Android/iOS集成Flutter模块

一、Android工程集成Flutter模块工程：

1.使用命令创建Flutter模块工程lib_flutter(与Android工程属于同级目录)：

flutter create -t module --org com.yyh lib_flutter

2.更新Android工程配置：

(1)将Android工程Support V4/V7包替换为AndroidX包，右键点击工程，在弹出菜单中选择 Refactor > Migrate to AndroidX...，然后在左下角弹出的框中，点击Do Refactor，然后等待自动替换完成：

(2)修改compileSdkVersion与targetSdkVersion为31，在Android工程/app/build.gradle中：

android {
    compileSdkVersion 31   //修改为31，否则报错
    buildToolsVersion '30.0.2'
    defaultConfig {
        minSdkVersion 23
        targetSdkVersion 31   //修改为31，否则报错
        //...省略其他配置
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
}

(3)修改kotlin_version，在Android工程/build.gradle中：

buildscript {
    ext.kotlin_version = '1.6.10'
    ...
    dependencies {
        classpath 'com.android.tools.build:gradle:4.2.1'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-android-extensions:$kotlin_version"
    }
}

(4)在AndroidManifest.xml中处理Android12报错问题：

<application tools:node="replace">   <!-- 替换三方库中的相关属性，以此处为准 -->
        <activity android:exported="true">   <!-- 为含<intent-filter>的节点增加android:exported属性(Android12要求) -->
            <intent-filter>...</intent-filter>
        </activity>
        <receiver android:exported="true">
            <intent-filter>...</intent-filter>
        </receiver>
        <service android:exported="true">
            <intent-filter>...</intent-filter>
        </service>
</application>

3.导入Flutter模块：

(1)加载lib_flutter模块工程，在Android工程/settings.gradle中添加：

...  #省略其他配置
setBinding(new Binding([gradle: this]))
evaluate(new File(settingsDir.parentFile, 'lib_flutter/.android/include_flutter.groovy'))
#以下2行Sync后自动产生，无需添加(如果不能生成，则手动添加)
include ':lib_flutter'
project(':lib_flutter').projectDir = new File('../lib_flutter')

(3)添加Flutter依赖，在Android工程/app/build.gradle中：

dependencies {
  //...省略其他配置
  implementation project(':flutter')  //添加Flutter依赖
}

(4)点Sync Project With...同步下，完成后就能在Android Studio中看到lib_flutter模块了。

4.跳转Flutter页面：

(1)AndroidManifest.xml中<application>节点内添加FlutterActivity：

<activity
    android:name="io.flutter.embedding.android.FlutterActivity"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
    android:theme="@style/FlutterPageTheme"    
    android:hardwareAccelerated="true"
    android:screenOrientation="portrait"
    android:windowSoftInputMode="adjustResize"
    />

(2)跳转Flutter入口首页(冷启动)：

startActivity(FlutterActivity.createDefaultIntent(this));

(3)跳转Flutter自定义页：

方式1(冷启动)：

startActivity(FlutterActivity.withNewEngine()
                .initialRoute("路由id")  //要跳转的页面路由id，需要在Flutter中注册此路由id
                //.backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)  //设置透明背景
                .build(this));

方式2(热启动)：

//初始化FlutterEngine
public class AFApplication extends Application {
    public FlutterEngine mFlutterEngine; //预热方式启动的FlutterEngine
    @Override
    public void onCreate() {
        super.onCreate();
        initFlutterEngine();
        ...
    }
    void initFlutterEngine(){//初始化FlutterEngine
        mFlutterEngine = new FlutterEngine(this);
        mFlutterEngine.getNavigationChannel().setInitialRoute("路由id"); //设置初始跳转页路由id，需要在Flutter中注册此路由id
        mFlutterEngine.getDartExecutor().executeDartEntrypoint(DartExecutor.DartEntrypoint.createDefault());  //开始预热FlutterEngine
        FlutterEngineCache.getInstance().put("engine_id", mFlutterEngine); //缓存engine_id
    }
}
//跳转Flutter指定页(热启动，低延迟)
startActivity(FlutterActivity.withCachedEngine("engine_id")  //使用已缓存的engine_id启动Flutter自定义页
                //.backgroundMode(FlutterActivityLaunchConfigs.BackgroundMode.transparent)  //设置透明背景
                .build(this));

5.Flutter Fragment与Flutter View见官方文档：

https://flutter.cn/docs/development/add-to-app/android/add-flutter-fragment

二、iOS工程集成Flutter模块工程：

1.使用命令创建Flutter模块工程lib_flutter(与iOS工程属于同级目录)：

flutter create --template module lib_flutter

2.配置iOS工程，在工程/Podfile中添加(完成后执行命令：pod install)：

#导入lib_flutter模块工程
flutter_application_path = '../lib_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

target 'iOSP_FlutterM' do
  use_frameworks!
  install_all_flutter_pods(flutter_application_path)  #flutter相关
end
#flutter相关
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

3.跳转Flutter页面：

(1)方式1(冷启动)：

- (void)startFlutterPageByCold{
    //跳转Flutter入口首页
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil nibName:nil bundle:nil];
    //跳转Flutter指定页，路由id需要在Flutter中注册
    //FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithProject:nil initialRoute:@"路由id" nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}

(2)方式2(热启动)：

AppDelegate.h：

@import Flutter;
//...省略其他无关的
@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;  //定义FlutterEngine
//...省略其他无关的
@end

AppDelegate.m：

#import "AppDelegate.h"
#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>
//...省略其他无关的
@interface AppDelegate ()
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    self.flutterEngine = [[FlutterEngine alloc] initWithName:@"engine_id"];
    [self.flutterEngine run]; //跳转Flutter入口首页
    //[self.flutterEngine runWithEntrypoint:FlutterDefaultDartEntrypoint initialRoute:@"路由id"];  //跳转Flutter指定页面，路由id需要在Flutter中注册
    [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];  //连接插件(仅带有iOS平台的插件时需要)
    return YES;
}
//...省略其他无关的

跳转代码：

- (void)startFlutterPageByHot{
    FlutterEngine *flutterEngine = ((AppDelegate *)UIApplication.sharedApplication.delegate).flutterEngine;//获取AppDelegate中的FlutterEngine
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:YES completion:nil];
}

Flutter：Android/iOS集成Flutter模块

猜你喜欢