# flutter-native-module

**Repository Path**: jiodg45/flutter-native-module

## Basic Information

- **Project Name**: flutter-native-module
- **Description**: No description available
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-12
- **Last Updated**: 2021-03-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 集成FlutterModule到工程中

- [参考官方文档](https://flutter.dev/docs/development/add-to-app)

## 官网的步骤非常详细,参照及可快速实现,

- 下面以构建iOS module为例,dart module中任何更新如果要应用到主工程,需要重新构建framework

```shell
qxq4633@LSCN897187 my_flutter % flutter build ios-framework --xcframework --no-universal --output=/Users/qxq4633/project/hybrid-flutter/example-ios/Flutter/
Building frameworks for com.example.myFlutter in debug mode...
 ├─Populating Flutter.framework...                                  0.1s
 ├─Creating Flutter.xcframework...                                  3.4s
 ├─Building App.framework...                                        9.5s
 ├─Creating App.xcframework...                                      1.6s
 └─Moving to ../example-ios/Flutter/Debug                           0.0s
Building frameworks for com.example.myFlutter in profile mode...
 ├─Populating Flutter.framework...                                  0.2s
 ├─Creating Flutter.xcframework...                                  0.8s
 ├─Building App.framework...                                       29.0s
 ├─Creating App.xcframework...                                      0.8s
 └─Moving to ../example-ios/Flutter/Profile                         0.0s
Building frameworks for com.example.myFlutter in release mode...
 ├─Populating Flutter.framework...                                  2.9s
 ├─Creating Flutter.xcframework...                                  2.9s
 ├─Building App.framework...                                       22.1s
 ├─Creating App.xcframework...                                      1.0s
 └─Moving to ../example-ios/Flutter/Release                         0.0s
Frameworks written to /Users/qxq4633/project/hybrid-flutter/example-ios/Flutter.
```

## 实现步骤

- 根据应用构建步骤可以看到， iOS工程运行之后会将flutter module iOS部分打包成一个App.framework,
- 在原生工程中需要提前初始化flutteEngine,初始化引擎需要之行一个 `@vm:entrypiont`,也就是说`flutter module`中可以有多个main函数,

## 混合栈应用框架

可参考哈喽单车的实现[flutter_thrio应用](https://blog.csdn.net/foxsofter/article/details/105763402)

flutter_thrio维护了一个module树,它可以实现不同module之间的数据通信,通过自定义mixin工具类,实现了路由的监听,他们共享navigator,navigator持有native通信的methodChannels和navigatorState，所以它可以完成native和flutter之间路由状态的切换

module和页面的呈现是通过 url来管理，通过url来定于具体的页面, 当module变化时会切换 methodChannel,达到复用flutterEngine的效果。

在native,iOS端也维持一套类似的 module树,用着相同的方式管理导航事件,当然这中间还有很多细节需要注意, 大致梳理了一下flutter_thrio的实现,主体框架还是很容易明白的,尤其是 navigator导航中央协调作用，但也有一些不是十分的清晰,关于url的转换规则有很多细节需要去挖掘，

![flutter_thrio](http://assets.processon.com/chart_image/60485c501e08531106d2f435.png)