一、新建原生工程和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="https://www.cnblogs.com/anywherego/archive/2022/10/10/2">
</meta-data>
注意這一步之后執行gradle sync，如果遇到問題，可以參考文章最后的問題集錦
3.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()
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/513147.html
標籤：其他