Flutter集成步骤
1.创建Flutter module
2.添加Flutter module 依赖
3.在Java /Object-c 中调用Flutter module
在我们自己的项目中嵌入Flutter模块
这是我们的项目结构:
Desktop/Tian-doctor-Flutter/titan-native---
| titan-doctor-android
| titan-doctor-ios
我们进入Native的上级目录:Desktop/Tian-doctor-Flutter/titan-native
执行命令:
flutter create -t module flutter_module
目录结构会变为如下:
├── flutter_module
│ ├── README.md
│ ├── flutter_module.iml
│ ├── flutter_module_android.iml
│ ├── lib
│ ├── pubspec.lock
│ ├── pubspec.yaml
│ └── test
└── titan-native
├── titan-doctor-android
└── titan-doctor-ios
进入flutter_module文件夹,我们看到目录如下:
.android #flutter_module的Android宿主工程
.gitignore #flutter_module的ios宿主工程
.idea
.ios
.metadata
.packages
README.md
flutter_module.iml
flutter_module_android.iml
lib #flutter_module的Dart部分代码
pubspec.lock
pubspec.yaml #flutter_module的项目依赖配置文件
test
我们看到项目里的宿主目录.andriod和.ios
Android
setting.gradle中添加
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'/titan_flutter/.android/include_flutter.groovy' // new
))
然后我们再在项目的gradle配置文件中配置:
implementation project(':flutter')
调用:
FragmentTransaction tx = getSupportFragmentManager().beginTransaction();
tx.replace(R.id.frag_container, Flutter.createFragment("route1"));
tx.commit();
iOS
1:在Podfile中添加依赖
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
#添加如下两行的依赖
flutter_application_path = '../titan_flutter/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')),binding)
target 'EHospital' do
#...
end
然后执行 pod更新
pod install 或者 pod install --no-repo-update
1:更新依赖
当我们在flutter中添加了依赖,我们也需要在ios的项目中,使用pod install 更新iOS工程库。
下面是官方的说明
Whenever you change the Flutter plugin dependencies in
some/path/my_flutter/pubspec.yaml, you need to run flutter pub get from
some/path/my_flutter to refresh the list of plugins read by the podhelper.rb
script. Then run pod install again from some/path/MyApp.
译:
当你改变了flutter的库配置文件pubspec.yaml ,并且使用pub get 更新了库依赖,
我们需要重新执行pod install文件,以便同步podhelper.rb文件中的插件列表。
2:禁用BitCode
添加build phase 以构建Dart代码
在目标Target->Build Phases->加号->New Run Script Phase

然后添加如下代码:
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

然后我们将此Script拖动至Target Dependencies下面,如下:

最后我们调用Flutter内容:
//引入包
#import <Flutter/Flutter.h>
//打开一个FlutterViewController
UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 200, self.view.width-100, 50)] ;
button.backgroundColor = kColor_Blue ;
[self.view addSubview:button] ;
[button setTitle:@"打开Flutter" forState:UIControlStateNormal] ;
[button addTargetBlock:^(NSInteger tag) {
FlutterViewController *flutterController = [[FlutterViewController alloc]init] ;
[self.navigationController pushViewController:flutterController animated:YES] ;
}] ;
网友评论