FlutterFlutter 混合开发 ( 简介 | Flutter 混合开发集成步骤 | 创建 Flutter Module )

Posted 2021-09-14 韩曙亮

文章目录

• 一、Flutter 混合开发简介
• 二、Flutter 混合开发集成步骤
• 三、创建 Flutter Module
• • 1、使用命令行创建 Flutter Module 项目 ( 仅做参考 )
  • 2、Android Studio 中创建 Flutter Module ( 推荐 )
  • 3、Flutter Module 项目文件结构
• 四、相关资源

一、Flutter 混合开发简介

---

开发手机应用时 , 有时一个完整的应用 , 有些使用 Native 原生实现 , 有些使用前端小程序实现 , 有些部分使用 Flutter 实现 ;

混合开发应用场景 :

• Flutter 作为独立页面 : 在 Native 原生页面中 , 打开一个 Flutter 页面 ; 或者在 Flutter 页面中打开原生页面 ;

• Flutter 作为组件嵌入 : 在 Native 原生页面中 , 嵌套一个 Flutter 组件 ; 或者在 Flutter 页面中 , 嵌套原生页面组件 ;

二、Flutter 混合开发集成步骤

---

Flutter 混合开发集成步骤 :

• ① 在 Android Studio 中创建 Flutter Module ;
• ② 为 Native 应用添加 Flutter Module 依赖 ;
• ③ 在 Native 应用 ( Android / iOS 应用 ) 中 , 调用 Flutter Module 模块 ;
• ④ 编写 Flutter Module 中的 Dart 代码 ;
• ⑤ 运行 Flutter 混合应用 ;
• ⑥ 项目的 热重启 / 重新加载 ;
• ⑦ 调试 Dart 代码 ;
• ⑧ 应用发布 ;

三、创建 Flutter Module

---

Flutter 混合开发集成步骤 :

• ① 在 Android Studio 中创建 Flutter Module ;
• ② 为 Native 应用添加 Flutter Module 依赖 ;
• ③ 在 Native 应用 ( Android / iOS 应用 ) 中 , 调用 Flutter Module 模块 ;
• ④ 编写 Flutter Module 中的 Dart 代码 ;
• ⑤ 运行 Flutter 混合应用 ;
• ⑥ 项目的 热重启 / 重新加载 ;
• ⑦ 调试 Dart 代码 ;
• ⑧ 应用发布 ;

1、使用命令行创建 Flutter Module 项目 ( 仅做参考 )

混合开发前 , 先创建 Native 项目 ;

Native 项目的路径是 D:\\002_Project\\002_android_Learn\\flutter_hybrid\\flutter_native ,

flutter_native 是 Android Native 项目的路径 ,

进入到 Android Native 项目的上一级目录 flutter_hybrid , 然后执行如下命令 :

flutter create -t module flutter_module

2、Android Studio 中创建 Flutter Module ( 推荐 )

在弹出的对话框中 , 选择 Flutter Module ,

选择创建的 Flutter Module 名称和路径 ;

创建完成的 Flutter Module 项目 :

3、Flutter Module 项目文件结构

下面介绍 flutter_module 中的文件 :

• .android 是该 flutter_module 的 Android 宿主工程 ;
• .ios 是该 flutter_module 的 iOS 宿主工程 ;
• lib 是该 flutter_module 的 Dart 代码 ;
• pubspec.yaml 是该 flutter_module 的依赖配置文件 ;

该 Flutter Module 是可以独立运行的 , 前提是在 Android Studio 中安装了 Flutter 插件 ;

四、相关资源

---

参考资料 :

• Flutter 官网 : https://flutter.dev/
• Flutter 插件下载地址 : https://pub.dev/packages
• Flutter 开发文档 : https://flutter.cn/docs ( 强烈推荐 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社区 : https://flutter.cn/
• Flutter 实用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文档 : https://dart.cn/
• Dart 开发者官网 : https://api.dart.dev/
• Flutter 中文网 : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相关问题 : https://flutterchina.club/faq/ ( 入门阶段推荐看一遍 )
• GitHub 上的 Flutter 开源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 实战电子书 : https://book.flutterchina.club/chapter1/
• Dart 语言练习网站 : https://dartpad.dartlang.org/

重要的专题 :

• Flutter 动画参考文档 : https://flutterchina.club/animations/

博客源码下载 :

• GitHub 地址 : ( 随博客进度一直更新 , 有可能没有本博客的源码 )

• 博客源码快照 : ( 本篇博客的源码快照 , 可以找到本博客的源码 )