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

文章目录

一、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 插件 ;