【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的 热重启 / 热加载 )(一)

简介: 【Flutter】Flutter 混合开发 ( 混合开发中 Flutter 的 热重启 / 热加载 )(一)

文章目录

前言

一、混合开发中启用 Flutter 的 热重启 / 热加载

二、混合开发中 Flutter 的 热重启 / 热加载 命令测试

三、指定混合应用连接的设备

四、相关资源

前言

上一篇博客 【Flutter】Flutter 混合开发 ( 安卓端向 Flutter 传递数据 | FlutterFragment 数据传递 | FlutterActivity 数据传递 ) 讲解了 Android 如何向 Flutter 中传递数据 ;


Flutter 混合开发集成步骤 :


① 在 Android Studio 中创建 Flutter Module ;

② 为 Native 应用添加 Flutter Module 依赖 ;

③ 在 Native 应用 ( Android / iOS 应用 ) 中 , 调用 Flutter Module 模块 ;

④ 编写 Flutter Module 中的 Dart 代码 ;

⑤ 运行 Flutter 混合应用 ;

⑥ 项目的 热重启 / 重新加载 ;

⑦ 调试 Dart 代码 ;

⑧ 应用发布 ;





一、混合开发中启用 Flutter 的 热重启 / 热加载


Flutter 开发时 , 默认自动开启 热重启 / 热更新 功能 , 改动代码后 , 一旦 Ctrl + S 保存代码 , 修改的内容马上会热更新到调试的手机中 ;


如果在 Android Native 应用 和 Flutter 应用混合开发时 , Flutter 无法进行 热重启 / 热更新 , 这样降低了开发调试的效率 ;



混合开发中启用 Flutter 的 热重启 / 热加载 :


① 打开模拟器 , 或连接真机 ;


② 关闭应用 : 注意 , 应用一定不能运行在手机中 , 先把手机中的应用关闭 ;


③ 关联 Flutter 与 Android 应用 :


在 Flutter Module 工程的 Android Studio 的 Terminal 面板中 ,


使用


flutter attach


命令 , 可以令 Android 应用 和 Flutter 应用进行关联 , 之后在该混合开发中 , 就可以实现 Flutter 的 热重启 / 热更新 ;


此时会输出 " Waiting for a connection from Flutter on Pixel 2… " 提示 , 等待将 Android 和 Flutter 混合应用安装到设备中 ;


注意 , 运行的是 混合应用 , 将 Android 项目运行 , 运行 Android Native 项目 ;


Y:\002_WorkSpace\001_AS\flutter_hybrid\flutter_module>flutter attach
Waiting for a connection from Flutter on Pixel 2...

image.png


在 Android 的 Native 应用中 , 运行 , 注意不是运行 Flutter 应用 ;

image.png



Android 手机中已经运行该应用 ;


image.png


flutter_module 的 Terminal 中还是现实如下信息 , 这是因为还没有在 Android 应用中加载 Flutter 页面 ;

image.png



在 Android 应用中 , 点击 " 方式一 " 按钮 , 加载 Flutter 应用 , Flutter 页面以 FlutterFragment 形式嵌入到了 Android 页面中 ;


image.png

目录
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
49 1
|
3月前
|
移动开发 前端开发 weex
移动端混合开发技术:React Native、Weex、Flutter 之争
在移动应用开发领域,React Native、Weex 和 Flutter 是备受关注的混合开发技术。本文将对它们进行全面比较与评估,以帮助开发者做出明智的选择。我们将从开发生态、性能、跨平台能力和易用性等方面进行比较,为读者提供全面的参考和指导。
|
3月前
|
移动开发 Dart 前端开发
移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动应用的开发已经成为现代社会中的重要一环。本文将比较并评估三种主流的移动端混合开发技术:React Native、Weex和Flutter。通过对它们的特点、优势和劣势的分析,帮助开发者在选择适合自己项目的技术方案时做出明智的决策。
|
3月前
|
移动开发 开发框架 前端开发
移动端混合开发技术探析:React Native、Weex、Flutter的比较与选择
随着移动应用开发的高速发展,混合开发技术成为了一种备受关注的选择。本文将对移动端混合开发技术中的React Native、Weex和Flutter进行比较与探讨,分析它们在性能、开发体验、生态系统和跨平台支持等方面的差异,以及如何根据项目需求进行选择。
59 1
|
4月前
|
Dart 开发工具 Android开发
Flutter混合开发:Android中如何启动Flutter
Flutter混合开发:Android中如何启动Flutter 如果你想在你的Android应用中使用Flutter,则需要遵循以下步骤:
|
7月前
|
Dart 开发工具 Android开发
Flutter与iOS原生混合开发
Flutter与iOS原生混合开发
342 2
|
Dart Android开发
Flutter 之原生混合开发
Flutter 之原生混合开发
424 0
Flutter 之原生混合开发
|
Dart Java API
Flutter 混合开发(下)
某些应用程序可能需要使用移动设备进行拍照或者选择相册中的照片,Flutter官方提供了插件:image_picker
566 0
Flutter 混合开发(下)
|
Dart Java Android开发
Flutter 混合开发(上)
某些应用程序可能需要使用移动设备进行拍照或者选择相册中的照片,Flutter官方提供了插件:image_picker
276 0
Flutter 混合开发(上)