flutter工程结构,flutter目录结构设计

Flutter初始化

新建一个Flutter工程，android模块。

成都创新互联主要从事成都网站设计、网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务讷河,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108

1，只有一个Activity组件，它是Dart层绘制Widget的容器。

2，Application配置FlutterApplication。

应用Application配置io.flutter.app.FlutterApplication类，App首次启动时，初始化。

调用FlutterMain.startInitialization()方法。

initConfig方法，从AndroidManfest.xml配置的applicaion节点获取meta-data数据，初始化以下默认值。

这些值都是使用中用到的name，例如，抽取apk中asset资源时，flutter_assets打包目录，打包产物data名称。

initResources方法， 初始化资源。

在Flutter打包apk的asset目录下，包括fluttter_asset目录/资源项，将资源从apk中抽取，保存在 Context.getDir("flutter", 0) 目录下。

/data/user/0/包名/app_flutter目录。

在目录中创建一个时间戳文件，根据apk版本和包信息记录的lastUpdateTime更新时间，第二次启动时，若apk未更新，不需要再次抽取。

加载so库，libflutter.so，System.loadLibrary()。

主页面继承FlutterActivity，配置启动模式singleTop。

FlutterActivity类在io.flutter.app包， (区别io.flutter.embedding.android包)， 组件生命周期委托给FlutterActivityDelegate类。

组件启动，onCreate方法。

FlutterMain.ensureInitializationComplete方法，确保资源成功抽取完成，创建FlutterView视图(io.flutter.view)，继承SurfaceView类，setContentView方法，设置组件主布局即FlutterView视图。

最后，根据Bundle路径，runBundle()加载运行，

调用FlutterView的runFromBundle方法，入口点在dart的main方法，

通过FlutterNativeView，调用FlutterJNI的native方法。

nativeRunBundleAndSnapshotFromLibrary方法。

任重而道远

Flutter发布Package(Pub.dev或私有Pub仓库)

  因为我们使用Flutter跨平台技术开发App时，会有很多公用组件，因为Flutter中一切皆为Widget，widget也比较细粒度，所以我们需要进行封装，用于一个项目或者公司不同项目中去~

  那么今天写写如何发布package或者插件到Pub.dev上，扯扯谈O(∩_∩)O哈哈~

《Flutter的拨云见日》系列文章如下：

1、Flutter中指定字体(全局或者局部，自有字库或第三方)

2、Flutter发布Package(Pub.dev或私有Pub仓库)

首先，我们知道flutter有四种工程模式：Flutter Application、Flutter Module、Flutter Plugin和Flutter Package。

我们这里就主要讲Package 纯Dart插件的发布吧，都差不多。

创建工程后，就可以编写你的公共组件，或者公用字体库呀啥的， 都行。

在更改下你的pubspec.yaml文件，修改下你的versionCode，项目名称，项目描述，作者等

如果上传失败试试????的命令：

在执行该命令时，可能会中途调到网页，要求你登录google账号，登录授权，到时候登录账号并授权就可以了。

因为我们直接使用flutter packages pub publish是发布到Pub.dev上，并不是发布到私有仓库，该怎么办呢？

其实呢，也很简单！像versionCode，项目名，等都和发布Pub.dev是一样的。没啥区别。

有两种方式：

就是这么简单o( ＠ )o

相信大家引用Pub.dev上的第三方库都会了哈，到处都是这里不讲了

在使用flutter pub get就可以拉到私有仓库项目了

以上就差不多聊了聊package发布和获取的事儿了，都很明了，大家可以试试，挺简单的。

PS: 写文不易，觉得没有浪费你时间，请给个点赞~ ????

Flutter（六）Android与Flutter混合开发（Hybird）

如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？

假设你现在Android项目的目录的结构是这样的

这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为

也就是说，最终你的项目结构会是这样的

接下来在Android Module的 build.gradle 文件中添加flutter依赖

先创建一个Flutter页面

这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数 （下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发

我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注册 FlutterActivity

自己创建一个 FlutterAppActivity 继承自 FlutterActivity

在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）

两种启动方式的区别

如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式

扩展思考

initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情

activity_main.xml

FrameLayout 用于承载Flutter组件

MainActivity.java

使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中

运行结果

上半部分是原生的TextView，下半部分是Flutter的Text组件

本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互

ios flutter 混编

最近在集成flutter进项目

以收集编译产物并以cocopods方式集成

产物大概放入两个pod库

这个暂且叫pod1，pod1放flutter.framework，第三方plugin.a，自己写的基础plugin，比如networking，hud等等（由于是混编，不可避免存在很多原生基础组件，所以能公用的基础组件都会弄一个flutter-plugin桥接）

第二个pod2放编译之后的app.framwork,注册文件GeneratedPluginRegistrant，以及各个业务模块.a（有可能没有）结构大概如下面

podspec大概如下

主工程引入这两个pod库即可

接下来从零开始搭建上文所说的

先创建一个flutter module

这个是主flutter工程，用来集成businessModule以及生成app.framework

结构如下图

再生成一个业务工程

注意此时还需要进入example生成ios和Android工程，不然无法单独编译运行

这样 这个单独的业务模块就可以单独跑起来了

此时主flutter工程和业务工程均搭建完毕

在主工程pubspec.ymal文件讲两个工程关联

好了 接下来就是编写脚本收集产物了

编译完成之后会在flutter主工程product生成如下文件

将上面文件分类收集做成文章开头的pod1，pod2 ，在native工程引入即可

在集成flutter的过程中 踩不少坑 也阅读很多前辈的文章，在此一并感谢

Flutter Android端集成排坑 - armeabi 适配 & FlutterBoost

Flutter可以算是当下最火热的新技术之一，我现在所在团队也准备将Flutter技术应用到线上工程中。

关于混合工程，官方文档其实写的已经比较清楚了，按着文档走一般问题不大，

但是有一点值得注意的是，Flutter工程引入的库的gradle的 buildTypes 要与原工程保持一致，如果不一致需要手工添加。

进入正题，现在Flutter官方默认只提供armeabi-v7a、arm64-v8a、x86和x86-64，其中x86和x86-64是为模拟器准备的。目前我们使用的SDK大部分只使用了armeabi架构，直接使用我们会遇见找不到 libflutter.so，libapp.so 的情况，所以我们需要对FlutterSDK做一定的改造。

首先我们要了解下Flutter编译产物，因为不同版本产物是不同的，这里我们只针对Flutter 1.9.1-hotfixes来说。除了资源文件之外，Flutter打包会生成两个非常重要的so库，他们分别是 libflutter.so，libapp.so 。其中 libflutter.so 是Flutter的SDK产物而 libapp.so 正是我们编写的dart文件的产物。默认情况下，这两个文件都会出现在armeabi-v7a中，因此我们要作出对应的改造。

libflutter.so 位于FlutterSDK中，这里顺带提一句，除了这对不同CPU架构，它还分为Debug版和Release版，它们的区别在于Debug是为JIT编译方式打造的，体积较大而Release是为AOT编译方式打造的，体积很小。对 libflutter.so 的改造，只要将其移动文件路径即可，运行以下脚本即可，此脚本来自美团分享的Flutter文章。

移动完了 libflutter.so 之后我们打包发现， libapp.so 仍然会出现在armeabi-v7a中，所以第二部我们就是移动 libapp.so 。这个需要更改 flutter.gradle ，我们在 flutter.gradle 的45行可以看到如下定义，它定义了我们的环境。

在524行我们可以看到，abiValue的取值就是根据上述定义值。

所以结论很简单，只要将

private static final String ARCH_ARM32 = "armeabi-v7a";

改为

private static final String ARCH_ARM32 = "armeabi";

就可以完成对与 libflutter.so 的移动。

前期工作我们都做好了，打成aar就非常简单了

直接使用 flutter build aar --target-platform android-arm

打出来后可以解压检查下 libflutter.so，libapp.so 是否都在armeabi文件夹下即可。

说完了armeabi适配问题，这里下说下有关于有关于FlutterBoost的接入。这个东西接入有两点要注意。

在主app内加上即可，常规操作，强制统一support包的版本号

注释flutter.gradle第655行。因为编译过程中，会去初始化插件项目的buildType下面的debug配置，而插件项目下并未配置debug，导致报错。

如果发现文章中有错误或者有更好的解决方案欢迎指正留言，当然如果本篇文章帮助你解决了问题，也不要吝啬你的感谢。谢谢各位。

Flutter是一个什么框架

Flutter是一个移动应用程序的软件开发工具包（SDK），具有以下特征：

跨平台应用的框架，没有使用WebView或者系统平台自带的控件，使用自身的高性能渲染引擎自绘

简化版的浏览器，最大限度在android和ios上统一UI，包括业务逻辑和用户体验

开发语言使用dart，结合C, C++, 和Skia（2D渲染引擎）构建

支持hot reload，包含着完整的控件和工具链

一切皆控件，控件是每个Flutter应用程序的基本构建块，与分离视图、控制器、布局和其他属性的框架不同，Flutter具有一致的统一对象模型：控件。一个控件可以定义：结构元素（比如按钮或菜单）、风格元素（比如字体或颜色方案）、布局的方面（比如填充）、一些业务逻辑等

组合大于继承，控件本身通常由许多小型、单用途的控件组成，结合起来产生强大的效果，类的层次结构是扁平的，以最大化可能的组合数量

强化版的WebView，框架仅提供一个View层，大部分功能要依赖原生

目前只能够运行大部分Dart代码（不能引入dart:mirrors或dart:html库）