Flutter核心技术与实战
陈航
美团点评高级技术专家
立即订阅
6150 人已学习
课程目录
已完结 47 讲
0/4登录后,你可以任选4讲全文学习。
课前必读 (3讲)
开篇词 | 为什么每一位大前端从业者都应该学习Flutter?
免费
01 | 预习篇 · 从0开始搭建Flutter工程环境
02 | 预习篇 · Dart语言概览
Flutter开发起步 (3讲)
03 | 深入理解跨平台方案的历史发展逻辑
04 | Flutter区别于其他方案的关键技术是什么?
05 | 从标准模板入手,体会Flutter代码是如何运行在原生系统上的
Dart语言基础 (3讲)
06 | 基础语法与类型变量:Dart是如何表示信息的?
07 | 函数、类与运算符:Dart是如何处理信息的?
08 | 综合案例:掌握Dart核心特性
Flutter基础 (13讲)
09 | Widget,构建Flutter界面的基石
10 | Widget中的State到底是什么?
11 | 提到生命周期,我们是在说什么?
12 | 经典控件(一):文本、图片和按钮在Flutter中怎么用?
13 | 经典控件(二):UITableView/ListView在Flutter中是什么?
14 | 经典布局:如何定义子控件在父容器中排版的位置?
15 | 组合与自绘,我该选用何种方式自定义Widget?
16 | 从夜间模式说起,如何定制不同风格的App主题?
17 | 依赖管理(一):图片、配置和字体在Flutter中怎么用?
18 | 依赖管理(二):第三方组件库在Flutter中要如何管理?
19 | 用户交互事件该如何响应?
20 | 关于跨组件传递数据,你只需要记住这三招
21 | 路由与导航,Flutter是这样实现页面切换的
Flutter进阶 (17讲)
22 | 如何构造炫酷的动画效果?
23 | 单线程模型怎么保证UI运行流畅?
24 | HTTP网络编程与JSON解析
25 | 本地存储与数据库的使用和优化
26 | 如何在Dart层兼容Android/iOS平台特定实现?(一)
27 | 如何在Dart层兼容Android/iOS平台特定实现?(二)
28 | 如何在原生应用中混编Flutter工程?
29 | 混合开发,该用何种方案管理导航栈?
30 | 为什么需要做状态管理,怎么做?
31 | 如何实现原生推送能力?
32 | 适配国际化,除了多语言我们还需要注意什么?
33 | 如何适配不同分辨率的手机屏幕?
34 | 如何理解Flutter的编译模式?
35 | Hot Reload是怎么做到的?
36 | 如何通过工具链优化开发调试效率?
37 | 如何检测并优化Flutter App的整体性能表现?
38 | 如何通过自动化测试提高交付质量?
Flutter综合应用 (6讲)
39 | 线上出现问题,该如何做好异常捕获与信息采集?
40 | 衡量Flutter App线上质量,我们需要关注这三个指标
41 | 组件化和平台化,该如何组织合理稳定的Flutter工程结构?
42 | 如何构建高效的Flutter App打包发布环境?
43 | 如何构建自己的Flutter混合开发框架(一)?
44 | 如何构建自己的Flutter混合开发框架(二)?
结束语 (1讲)
结束语 | 勿畏难,勿轻略
特别放送 (1讲)
特别放送 | 温故而知新,与你说说专栏的那些思考题
Flutter核心技术与实战
登录|注册

28 | 如何在原生应用中混编Flutter工程?

陈航 2019-08-31
你好,我是陈航。今天,我来和你聊聊如何在原生应用中接入 Flutter。
在前面两篇文章中,我与你分享了如何在 Dart 层引入 Android/iOS 平台特定的能力,来提升 App 的功能体验。
使用 Flutter 从头开始写一个 App,是一件轻松惬意的事情。但,对于成熟产品来说,完全摒弃原有 App 的历史沉淀,而全面转向 Flutter 并不现实。用 Flutter 去统一 iOS/Android 技术栈,把它作为已有原生 App 的扩展能力,通过逐步试验有序推进从而提升终端开发效率,可能才是现阶段 Flutter 最具吸引力的地方。
那么,Flutter 工程与原生工程该如何组织管理?不同平台的 Flutter 工程打包构建产物该如何抽取封装?封装后的产物该如何引入原生工程?原生工程又该如何使用封装后的 Flutter 能力?
这些问题使得在已有原生 App 中接入 Flutter 看似并不是一件容易的事情。那接下来,我就和你介绍下如何在原生 App 中以最自然的方式接入 Flutter。

准备工作

既然是要在原生应用中混编 Flutter,相信你一定已经准备好原生应用工程来实施今天的改造了。如果你还没有准备好也没关系,我会以一个最小化的示例和你演示这个改造过程。
取消
完成
0/1000字
划线
笔记
复制
© 版权归极客邦科技所有,未经许可不得传播售卖。 页面已增加防盗追踪,如有侵权极客邦将依法追究其法律责任。
该试读文章来自付费专栏《Flutter核心技术与实战》,如需阅读全部文章,
请订阅文章所属专栏。
立即订阅
登录 后留言

精选留言(34)

  • 千の星
    老师,按照您的混编方法,再 flutter build apk --release,之后生产的aar/assets/flutter_assets/,里面缺少isolate_snapshot_data,isolate_snapshot_instr,vm_snapshot_data,vm_snapshot_instr。aar拷贝到公司nativeapp运行到flutter就会报错:Abort message: '[FATAL:flutter/shell/common/shell.cc(218)] Check failed: vm. Must be able to initialize the VM.。请问是缺少什么环节
    或者配置吗
    2019-12-03
    1
    1
  • Geek_a9f943
    如果在flutter中添加了第三方依赖,打包时就会报错,所以这种方式本质上还是不适用于混合开发。最理想的状态是将flutter作为一个单独的项目,然后把最终产物提供给android,ios,这样原生的开发人员也不需要安装flutter运行环境。这一节可以当作是混合开发的预习,希望老师后续能把混合开发讲的更彻底一些,毕竟这才是flutter存在的主要目的

    作者回复: Flutter的插件机制只是一层弱依赖,Flutter module并不会关心这堆代码的运行时来源,所以打包并不会顺藤摸瓜携带Native的依赖库。Native的依赖库是需要原生工程去管理的,所以如果你的Flutter module依赖的原生插件有其他的底层依赖库,请依次找到他们,并在原生Android工程中的build.gradle、iOS工程中的Podfile里把原生插件所依赖的原生库也声明为依赖

    2019-09-16
    1
    1
  • 颜为晨
    包体积最少会增加多少呢?

    作者回复: iOS 15MB左右,安卓5MB左右

    2019-09-10
    1
  • 矮个子先生😝
    对于flutter module的测试,可以手动添加入口,以IDEA为例,add configurations-> + ->flutter ->
    name随便取个标识,Dart entrypoint指明入口dart文件,比如main.dart,其他不用管,这样可以边编写flutter时边看效果了

    作者回复: 赞

    2019-09-04
    1
  • 许童童
    老师,三端分离的话,是要建三个git仓库吗?还是有什么其它的方式管理?

    作者回复: 三端工程分别管理,一个工程一个仓库

    2019-08-31
    1
    1
  • 啥玩意儿啊
    老师,ios启动后白屏
    Engine run configuration was invalid.
    Could not launch engine with configuration.
    是打包环节出现问题了吗
    2019-12-06
  • 厉害了,word柚
    老师,iOS 构建报这个错怎么处理呀
    BUILD TARGET Runner OF PROJECT Runner WITH CONFIGURATION Debug ===
        Code Signing Error: No profiles for 'com.****.***' were
        found: Xcode couldn't find any iOS App Development provisioning profiles
        matching 'com.lvdingtao.blackHoleModule'. Automatic signing is disabled and
        unable to generate a profile. To enable automatic signing, pass
        -allowProvisioningUpdates to xcodebuild.

    作者回复: 你需要在runner工程里设置一下iOS开发证书

    2019-12-05
  • 17岁码农想当架构师
    为什么从安卓原生工程进入flutter页面时先是黑屏一会儿,然后才出来页面?

    作者回复: 你换成release再试一次

    2019-11-27
  • 谭鹏
    Flutter.framework里面 没有headers 文件夹 clean了好多遍

    作者回复: 打开我给的demo链接里.travis.yml文件,参考里面before_deploy写的脚本执行步骤排查原因

    2019-11-21
  • 谭鹏
    Flutter build ios 后 没有发现app 和 flutter framework

    作者回复: 打开我给的demo链接里.travis.yml文件,参考里面before_deploy写的脚本执行步骤排查原因

    2019-11-20
    1
  • 谭鹏
    Flutter_library 是什么目录

    作者回复: module工程的根目录

    2019-11-20
  • 蜥蜴1214
    老师,我flutter项目通过
    Flutter build apk --debug打包后。aar只有9.7m。添加到安卓项目后运行,会报错误: 无法访问FlutterView
    找不到io.flutter.view.FlutterView的类文件。

    作者回复: clean一下试试

    2019-11-18
  • Geek_0ea3e4
    我执行Flutter create -t module flutter_library 为什么没有生产那么多文件?bogon:Documents liudongdong$ Flutter create -t module flutter_library
    Creating project flutter_library...
      flutter_library/test/widget_test.dart (created)
      flutter_library/flutter_library.iml (created)
      flutter_library/.gitignore (created)
      flutter_library/.metadata (created)
      flutter_library/pubspec.yaml (created)
      flutter_library/README.md (created)
      flutter_library/lib/main.dart (created)
      flutter_library/flutter_library_android.iml (created)
      flutter_library/.idea/libraries/Flutter_for_Android.xml (created)
      flutter_library/.idea/libraries/Dart_SDK.xml (created)
      flutter_library/.idea/modules.xml (created)
      flutter_library/.idea/workspace.xml (created)
    Running "flutter pub get" in flutter_library... 14.5s

    作者回复: 你需要build一次

    2019-11-06
  • AmazingYu
    三端分离后,Flutter 工程怎么依赖 iOS 原生工程呢?

    作者回复: 如果你说的是插件工程,flutter有模版工程支持,可以参考31节分享

    2019-10-30
  • zzz
    请问下 Flutter build ios --debug 出来的包,是没有X86_64架构的,是需要在打一个Flutter build ios --debug --simulator的包,然后把所有的plungin以及App.framework 自己来lipo合并下么? 同样 使用Flutter build ios --release 中Flutter.framework 中又包含了X86_64架构,也需要手动的lipo删除么? 这两个问题是需要我们自己来使用lipo操作 还是系统提供了什么支持?

    作者回复: 不需要,flutter内建的iOS工程模版默认已经设置好了

    2019-10-29
  • zjhuang
    如何将Flutter Module抽离出原有工程的Git仓库,将Flutter Module放到另一个Git仓库(目的是Android、iOS共用 Flutter 的lib)。即如何将 Flutter Module 的Git 仓库放在原工程的Git目录下?

    作者回复: 如果你不用pod/aar,那git submodule也可以

    2019-10-23
  • 汉之风云
    老师,为啥打出来的debug aar包里面没有Flutter.jar呢

    作者回复: 去libs目录下找找

    2019-10-21
  • 大土豆
    老师,发现了一种依赖源码的方式,不用打包aar再引用这么麻烦了,非常适合小团队开发。https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps,官方出的依赖flutter module源码的方式,直接run就可以的,今天实测了一下,没有问题

    作者回复: 这种也是可以的。只是原生工程和flutter工程之间耦合较重,对原有的原生打包流程有一定的侵入性,小团队没问题

    2019-10-21
  • 菜头
    flutter build ios --debug
    生成的 Flutter.framework 没有 Header 文件夹
    请问这个问题有遇到过吗

    作者回复: clean一下再试试;或者换成release试试

    2019-10-16
  • 菜头
    flutter build ios --debug
    打出来的 Flutter.framework 没有 Header 文件夹

    作者回复: clean一下再试试;或者换成release试试

    2019-10-16
    1
收起评论
34
返回
顶部