美文网首页
Flutter集成步骤

Flutter集成步骤

作者: 三米板 | 来源:发表于2019-10-12 16:10 被阅读0次

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

\color{red}{注意!}

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

image.png

然后添加如下代码:

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
image.png

\color{red}{注意!}
然后我们将此Script拖动至Target Dependencies下面,如下:

image.png

最后我们调用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] ;
    }] ;

相关文章

网友评论

      本文标题:Flutter集成步骤

      本文链接:https://www.haomeiwen.com/subject/msoyuctx.html