第一章 Flutter介绍

Flutter 是什么

  • Flutter 是谷歌推出的 UI 工具包,可用于从单一代码库构建美观且可原生编译的移动(Android and iOS)、网页(web)和桌面(macOS, Windows 和 Linux)应用。
  • Flutter工具包采用基于Widget构建的声明式用户界面(declarative UI)。

历史

  • 2015年第一版SKy,运行在Android,使用Dart语言开发;
  • 2018年,发布Flutter1.0;
  • 2021年,发布Flutter2.0,采用基于Canvas的网页引擎,并支持早期桌面端,首次引入null safety;
  • 2021 年,Flutter 2.5 版本正式发布,该版本新增了 Material Design 设计规范的支持。
  • 2022 年,Flutter 3 版本问世,不仅实现了完整的桌面端支持,还新增了对 iOS 平台 Objective-C 和 Swift 语言的互操作能力。

Flutter 架构

Flutter的优势

  1. Flutter 采用的声明式 UI------ 可使用嵌套结构的Widget,且框架仅会更新那些发生变化的组件,无需手动操作 DOM 或组件状态。

  2. Flutter "杀手锏" 功能热重载Hot reload:在目标开发平台启动应用后,对代码进行任意修改,只需点击热重载按钮,应用就能实时更新。无论是新增软件包、开发新页面、调整业务逻辑,都能实现应用的即时同步。不过新增插件时需要重启程序,但在常规开发流程中,绝大多数功能都能在单次开发会话中完成。

  3. 与多数其他跨平台框架不同,Flutter 应用具备**原生级性能,,**因为它会被编译为对应平台的原生代码。

  4. Flutter 是开源框架,开发者可查看其源码、甚至参与功能优化

  5. Flutter 支持全平台构建:仅需维护一套代码库就能适配多端,既提升了开发效率,也减少了项目所需的工程师数量。Flutter 也可用于 Web 端开发,其 Web 端产物可通过三种形式输出:HTML 方案、基于画布(Canvas)的渲染方案,以及 WebAssembly(Wasm)方案。

补充术语说明

  1. declarative UI(声明式 UI):开发者只需描述 UI "应该是什么样子",无需关注 "如何更新 UI",框架会自动处理状态变化与 UI 渲染的关联,区别于传统的命令式 UI。
  2. hot reload(热重载):Flutter 的核心开发特性,修改代码后无需重启应用即可同步变更,能大幅缩短调试与迭代周期。
  3. Web Assembly(Wasm):一种可在浏览器中运行的二进制指令格式,可实现接近原生的 Web 端性能,常用于高性能 Web 应用开发。
  4. SEO(搜索引擎优化):通过优化网页结构与内容,提升其在搜索引擎结果中的排名,从而增加曝光量的技术手段。
相关推荐
向哆哆8 小时前
打造高校四六级报名管理系统:基于 Flutter × OpenHarmony 的跨端开发实践
flutter·开源·鸿蒙·openharmony·开源鸿蒙
2501_940007898 小时前
Flutter for OpenHarmony三国杀攻略App实战 - 设置功能实现
flutter
lbb 小魔仙9 小时前
【Harmonyos】开源鸿蒙跨平台训练营DAY9:获取分类数据并渲染
flutter·华为·harmonyos
mocoding10 小时前
Flutter 3D 翻转动画flip_card三方库在鸿蒙版天气预报卡片中的实战教程
flutter·3d·harmonyos
2601_9498095911 小时前
flutter_for_openharmony家庭相册app实战+我的Tab实现
java·javascript·flutter
2601_9498683612 小时前
Flutter for OpenHarmony 电子合同签署App实战 - 已签合同实现
java·开发语言·flutter
一起养小猫13 小时前
Flutter for OpenHarmony 实战:别踩白方块游戏完整开发指南
flutter·游戏
●VON14 小时前
Flutter for OpenHarmony 21天训练营 Day03 总结:从学习到输出,迈出原创第一步
学习·flutter·openharmony·布局·技术
程序员清洒14 小时前
Flutter for OpenHarmony:Text — 文本显示与样式控制
开发语言·javascript·flutter
雨季66614 小时前
Flutter 三端应用实战:OpenHarmony 简易“动态内边距调节器”交互模式深度解析
javascript·flutter·ui·交互·dart