Skip to content

Flutter : add flutter to native project

Jump to bottom
Ren Ye edited this page Jan 3, 2019 · 50 revisions

Part 1 ：以本地Module的形式加入现有的工程

优点：可debug调试 可hot reload

缺点：团队所有成员均要安装flutter 及其附属工具 编译环境，并简单掌握flutter相关知识

Ps: Google官方实现文档 https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps

Android

1. 任意文件路径下 
  $ cd some/path/
  $ flutter create -t module my_flutter (或者 flutter create --template=module my_flutter)


2.原生工程目录下settings.gradle:
  // MyApp/settings.gradle
     include ':app'                                     // assumed existing content
     setBinding(new Binding([gradle: this]))            // new
     evaluate(new File('/Users/eminem/Desktop/my_flutter/.android/include_flutter.groovy')      // new      


3.原生工程目录下build.gradle:  
  // MyApp/app/build.gradle
     dependencies {
       implementation project(':flutter'):
     }


4.原生代码启动flutter界面 如下：


5.可能会碰到如下错误：

 缺少.so文件 
 (flutter项目根目录下执行，flutter build apk --release --target-platform android-arm,得到apk)


  缺少dart编译解释器
 (flutter项目根目录下执行，flutter build aot)


  缺少flutter assete
  (flutter项目根目录下执行，flutter build bundle)

iOS

1.原生项目podfile添加module依赖


2.原生项目目录下执行pod install 绑定库


3.添加Dart code 的 build phase 
 "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
 "$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed


4.原生调用flutter界面

Part 2: 以第三方Library的形式加入现有的工程（ android : aar / iOS: .a ）

优点：团队 人员工作解耦 开发flutter的 开发原生android 开发原生 iOS的 ，各司其职。

缺点：团队中无flutter开发环境的，无法调试。

Android

按以下方式生成，即可以 以modul形式debug/hot reload代码，又可以生成aar提供给他人的flutter项目工程。

1.$flutter create --template=module libratone_flutter_plugin
2.注释掉 /Users/eminem/Desktop/libratone_flutter_plugin/.android/app/build.gradle 文件中
     //applicationId "com.example.libratoneflutterplugin.host"


3.$ flutter create --template=app libratone_flutter_plugin
  flutter项目结构变化如下
 （android/iOS 2个文件目录用于flutter以application mode运行，
  .android/.iOS 2个文件目录用户flutter以module mode运行）


 以我认知flutter允许多种模式文件结构并存，如下图说明：


4. 若想单独运行flutter，会遇到如下问题。附带解决方案

1.生成AAR文件

Ps: 闲鱼团队技术分享文档 https://zhuanlan.zhihu.com/p/40528502 ，思路来自闲鱼，实现其来和他们的不同

1. android目录 以library形式


2. android目录 manifest 去掉 application 标签的属性


3. flutter项目根目录执行 flutter build apk --release --target-platform android-arm
   得到release aar  ,去掉--release 可得到 debug版本。  android-arm 为V7的包 ，android-arm64 v8的包


4.若flutter项目有第三方库，也需要有相应aar,生成方式和文件目录如下图

2.使用AAR文件

 会遇到下面这个问题和解决方案
（导入flutter_shared 目录，重新编译aar，本地工程引入引用）

iOS

Clone this wiki locally