flutter自学笔记1:介绍一下flutter

864 阅读24分钟

笔记1:介绍一下flutter

笔记2-了解Flutter UI 页面和跳转

笔记3- 常用 Widget 整理

笔记4- dart 语法快速学习

笔记5- dart 编码规范

笔记6- 网络请求、序列化、平台通道介绍

笔记7- 状态管理、数据持久化

笔记8- package、插件、主题、国际化

笔记9 - 架构、调试、打包部署

笔记10- Widget 构建、渲染流程和原理、布局算法优化

笔记11- 性能、渲染、包体积、懒加载、线程、并发隔离

学习笔记1: 本人将通过大模型学习flutter完整开发,因此大部分内容由大模型生成,以此提高学习效率


hi,介绍一下flutter

Flutter是由Google推出的一个开源跨平台UI框架,主要用于开发Android、iOS、Web和桌面应用。以下是对Flutter的详细介绍:

一、核心特性

  1. 跨平台开发:Flutter通过一套代码库实现跨平台开发,提供原生般的性能和一致的用户体验。开发者可以使用Dart编程语言编写一套代码,然后在多个平台上运行,包括Android、iOS、Web和桌面应用(Windows、macOS和Linux)。
  2. 高性能:Flutter不依赖于操作系统的UI组件,直接在设备上绘制所有的界面元素,因此能提供接近原生应用的性能。它使用了Dart的JIT(Just-In-Time)和AOT(Ahead-Of-Time)编译,确保了开发时的热重载(hot reload)和发布时的高效运行。
  3. 丰富的UI组件:Flutter提供了丰富的可定制UI组件库,开发者可以通过这些组件轻松构建现代化、响应式和美观的界面。此外,Flutter还支持自定义组件,允许开发者创建与品牌一致的UI元素。
  4. 热重载功能:热重载功能允许开发者在不重新启动应用的情况下实时预览代码的更改,这显著提高了开发效率,尤其在UI调整和调试阶段。
  5. 开源社区支持:Flutter作为一个开源项目,有着庞大的开发者社区,提供了丰富的文档、教程和第三方库。这使得开发者能够更快地上手,并能够获得良好的支持。

二、发展历程

  1. 2015年:Google内部开始开发一个名为Sky的项目,旨在创建一个高性能的移动应用开发框架,后来这个项目演变成了Flutter。
  2. 2017年5月:在Google I/O大会上,Flutter被正式宣布为移动UI框架,这是Flutter首次对外公开介绍。
  3. 2017年12月:Flutter的预览版(Beta 0.0.20)发布,标志着Flutter框架对外开发者的开放。
  4. 随后几年,Flutter不断更新和完善,增加了对Web、桌面应用的支持,并引入了Material 3等新的UI设计规范。

三、应用场景

Flutter适用于多种应用场景,特别是需要快速推出跨平台应用的创业公司,以及需要频繁迭代的移动应用。它不仅可以用于移动应用开发,还可以用于Web和桌面应用的开发,使得开发者能够使用同一套框架来开发跨设备、跨平台的完整生态系统应用。

四、与其他跨平台框架的对比

与React Native等其他跨平台开发框架相比,Flutter在UI渲染和性能方面具有显著优势。然而,Flutter的应用包体积相对较大,且Dart语言的生态相对较小。此外,Flutter在初期可能需要较高的学习成本,因为开发者需要熟悉Dart语言和Flutter框架的特定概念。

原生开发的一些概念

  1. 原生开发定义

    • 原生应用程序是为特定移动平台(如iOS或Android)开发的应用。
    • 使用相应平台的开发工具和语言,直接调用系统提供的SDK API。
  2. 原生开发优势

    • 可访问平台全部功能(如GPS、摄像头)。
    • 速度快、性能高,可实现复杂动画及绘制。
    • 整体用户体验好。
  3. 原生开发缺点

    • 平台特定,开发成本高。
    • 不同平台需维护不同代码,人力成本大。
    • 内容固定,动态化弱,新功能更新需发版。
  4. 原生开发面临的挑战

    • 动态化内容需求增大,版本升级周期长。
    • 业务需求变化快,开发成本变大,需维护Android、iOS两个团队。

Flutter开发的一些概念

  1. Flutter简介

    • Flutter是Google推出的开源移动应用开发框架。
    • 主打跨平台、高保真、高性能。
    • 使用Dart语言开发,一套代码可同时在iOS和Android平台上运行。
  2. 跨平台自绘引擎

    • Flutter不使用WebView或操作系统原生控件。
    • 使用自己的高性能渲染引擎(Skia)来绘制widget。
    • 保证在Android和iOS上UI的一致性,避免原生控件依赖的限制和高昂维护成本。
  3. 支持平台与高性能

    • 默认支持iOS、Android、Fuchsia三个移动平台,也支持Web和PC开发。
    • 高性能主要通过Dart语言的JIT和AOT模式以及Flutter自己的渲染引擎来保证。
  4. Dart语言的选择

    • Flutter选择Dart而非JavaScript的原因包括开发效率高、高性能、快速内存分配、类型安全以及Dart团队的积极投入。
    • Dart支持JIT和AOT模式,开发阶段采用JIT模式节省时间,发布时通过AOT生成高效ARM代码。
    • Dart的类型安全特性可以在编译前发现类型错误,排除潜在问题。
  5. 跨平台技术简介

    • 为解决原生开发面临的问题,已诞生多种跨平台框架。
    • 跨平台框架主要分为三类:H5+原生、JavaScript开发+原生渲染、自绘UI+原生。
    • 将在后续章节详细讨论这三类框架的原理及优缺点。

image.png

6.Flutter框架结构

image.png

Flutter Framework

纯Dart实现的SDK:Flutter Framework是用Dart语言实现的,提供了一套基础库。

  1. dart:ui层

    • 底层,对应Flutter中的dart:ui包。
    • 是Flutter引擎暴露的底层UI库。
    • 提供动画、手势及绘制能力。
  2. Rendering 层

    • 抽象的布局层,依赖于dart:ui层。
    • 构建UI树,计算并更新有变化的部分。
    • 类似于React中的虚拟DOM。
    • 确定UI元素的位置、大小,进行坐标变换、绘制。
  3. Widgets层

    • 提供基础组件库。
    • 在基础组件库之上,提供Material和Cupertino两种视觉风格的组件库。
    • 开发者主要与这两层打交道。

Flutter Engine

  1. 纯C++实现的SDK:Flutter Engine是用C++语言实现的。

  2. 包含内容

    • Skia引擎:用于绘制。
    • Dart运行时:用于执行Dart代码。
    • 文字排版引擎:用于文字排版。
  3. 调用关系:调用dart:ui库时,最终会走到Engine层实现真正的绘制逻辑。

五、Dart语言简介

Dart是由Google开发的一种编程语言,最初于2011年发布。它设计简洁、易于上手,并支持多种编程风格。Dart是一门纯面向对象的语言,支持类、继承、多态、封装等面向对象编程的基本特性。此外,Dart还支持静态类型检查和动态类型检查,提供了自动垃圾回收机制,并内置了丰富的标准库。Dart最著名的用途就是为Flutter提供支持。

综上所述,Flutter是一个功能强大且灵活的跨平台开发框架,它提供了丰富的UI组件、高性能的渲染引擎和强大的开发者工具。然而,在选择是否使用Flutter时,开发者需要根据自己的项目需求、团队技能和资源情况来做出决策。

Flutter 就是一个开源、跨平台的 UI框架, 编程还需要借助Dart语言


介绍一下Dart语言

Dart是Google开发的一种面向对象的编程语言,以下是对Dart编程语言的详细介绍:

一、概述

Dart最初发布于2011年,旨在提供一种高效、简洁且可扩展的编程语言,适用于构建现代Web、服务器和移动应用。虽然Dart最初是为了替代JavaScript而设计的,但随着时间的推移,它的应用范围已经扩展到包括服务器端开发、移动应用开发(尤其是通过Flutter框架)等多个领域。

二、主要特点

  1. 面向对象:Dart是一种纯面向对象的语言,所有一切都是对象,包括基本类型如int和double。
  2. 类型安全:Dart支持静态类型检查,可以在编译时捕获类型错误,提高代码的可靠性和可维护性。同时,Dart也具有强大的类型推断能力,允许开发者在需要时省略类型声明。
  3. 可选类型:虽然Dart支持静态类型,但类型是可选的,允许开发者在需要时省略类型声明。
  4. 步编程支持,使用async和await关键字简化了异步代码的编写。同时,Dart还支持Future和Stream等工具来处理异步任务和事件。
  5. 垃圾回收:Dart运行时环境自动管理内存,使用垃圾回收机制释放不再使用的对象,减轻了开发者的内存管理负担。
  6. 跨平台:Dart可以编译成JavaScript代码,运行在浏览器中;也可以编译成原生代码,运行在服务器和移动设备上。这使得Dart成为一种具有广泛适用性的编程语言。
  7. 丰富的标准库:Dart提供了丰富的标准库,涵盖了从基本数据结构到网络通信的各种功能。这些标准库为开发者提供了便捷的开发工具和函数库。

三、工作原理

  1. 编译过程:Dart代码可以通过不同的方式进行编译和执行。其中,AOT(Ahead-of-Time)编译将Dart代码编译成原生机器码,适用于移动应用(如Flutter应用);JIT(Just-In-Time)编译在运行时动态编译Dart代码,适用于Web应用和开发调试;编译成JavaScript则允许Dart代码在任何支持JavaScript的浏览器中运行。
  2. 运行时环境:Dart虚拟机(Dart VM)负责解释和执行Dart代码。Dart VM可以在服务器和命令行环境中运行,并支持AOT和JIT编译。此外,通过编译成JavaScript,Dart代码也可以在浏览器中运行。
  3. 内存管理:Dart运行时环境使用堆和栈来管理内存。堆用于存储对象,栈用于存储局部变量和函数调用信息。Dart使用垃圾回收机制自动管理内存,确保不再使用的对象能够被及时释放。

四、应用场景

Dart语言在多个领域都有广泛的应用场景。在Web开发方面,Dart可以用于构建高性能的Web应用程序,特别是使用Flutter框架进行前端开发时。在移动应用开发方面,Dart是Flutter框架的核心编程语言,使得开发者可以使用同一套代码来构建iOS和Android平台上的原生应用程序。此外,Dart还可以用于构建桌面应用程序和服务器端应用程序。

综上所述,Dart是一种具有面向对象、类型安全、异步编程支持和跨平台能力等特性的现代编程语言。它在Web开发、移动应用开发、桌面应用开发和服务器端开发等多个领域都有广泛的应用前景。


开发一个app需要准备什么?

开发准备

  1. 硬件系统

    • 选择合适的操作系统,如64位的Windows 10或以上版本,或MacOS。
    • 确保有足够的磁盘空间,建议预留约30GB,用于安装Flutter SDK、Android SDK、编辑器、浏览器等工具。
  2. 软件环境

    • Dart SDK:Dart是Flutter的开发语言,因此需要安装Dart SDK。可以从Dart官网下载安装包,并按照提示进行安装。
    • Flutter SDK:Flutter是构建用户界面的UI框架,同样需要从Flutter官网下载安装包,并配置环境变量。
    • 编辑器:推荐使用Android Studio或Visual Studio Code作为开发编辑器。Android Studio提供了全面的Android开发支持,并且与Flutter高度集成。Visual Studio Code则是一个轻量级的编辑器,通过安装Dart和Flutter插件,也可以很好地支持Flutter开发。
    • 浏览器:需要安装Chrome浏览器,用于预览和调试WebApp页面。
    • 其他工具:如Git等版本控制工具,以及Java SE(如果开发Android应用)。
  3. 开发环境配置

    • 配置Flutter镜像(非必须,但在中国地区访问Flutter官网可能受限,因此建议配置)。
    • 在编辑器中安装Dart和Flutter插件。
    • 根据需要配置iOS或Android开发环境。

开发一个app需要哪些功能?

使用Flutter和Dart打造一个项目App,需要综合考虑功能、组件库以及架构设计等多个方面。以下是对这些方面的详细介绍:

一、所需功能

一个项目App通常需要具备以下功能:

  1. 用户认证与授权:包括用户注册、登录、密码找回、第三方登录(如微信、QQ、微博等)、权限管理等。
  2. 数据持久化:使用SQLite、Room等数据库或SharedPreferences等方式,实现用户数据的本地存储,包括用户信息、配置、历史记录等。
  3. 网络通信:使用dio、Retrofit等HTTP网络请求库,实现与后端服务器的数据交互,包括API请求、数据解析、错误处理等。
  4. UI界面:提供丰富的UI组件,如按钮、文本框、图片、列表、导航栏等,并支持自定义UI组件。同时,需要实现响应式布局,以适应不同屏幕尺寸和分辨率的设备。
  5. 多媒体处理:支持图片、音频、视频等多媒体文件的上传、下载、播放和录制。
  6. 第三方服务集成:集成地图、支付、社交分享等第三方服务,提升App的功能性和用户体验。
  7. 性能优化:包括代码优化、资源优化、网络优化等方面,以提高App的运行效率和响应速度。
  8. 测试与调试:提供单元测试、集成测试、性能测试等测试工具和方法,确保App的质量和稳定性。

二、所需组件库

Flutter和Dart拥有丰富的组件库和框架,可以帮助开发者快速构建大型项目App。以下是一些常用的组件库:

  1. Flutter官方组件库

    • Material Design组件库:提供了一套基于Material Design规范的UI组件,如按钮、文本框、对话框等。
    • Cupertino组件库:提供了一套模仿iOS风格的UI组件,使App在iOS设备上具有原生般的外观和感觉。
  2. 第三方组件库

    • Provider、Riverpod等状态管理库:用于管理App的全局状态,实现数据在组件间的共享和同步。
    • dio、Retrofit等网络请求库:用于处理HTTP请求和响应,实现与后端服务器的数据交互。
    • image_picker、video_player等多媒体处理库:用于处理图片、音频、视频等多媒体文件的上传、下载、播放和录制。
    • geolocator、google_maps_flutter等地理定位与地图库:用于实现地理定位和地图功能。
    • shared_preferences、room等数据存储库:用于实现数据的本地存储和持久化。

三、架构设计

一个项目App的架构设计需要综合考虑系统的可扩展性、可维护性、稳定性和性能等多个方面。以下是一些常用的架构设计方法和策略:

  1. 分层架构设计

    • 表现层(Presentation Layer) :负责与用户交互,显示数据和接收用户输入。通常使用Flutter的Widgets和UI组件来实现。
    • 业务逻辑层(Business Logic Layer) :处理App的核心业务逻辑,包括数据验证、业务规则执行等。通常使用Dart语言编写。
    • 数据访问层(Data Access Layer) :负责与后端服务器或本地数据库进行交互,实现数据的存储和检索。可以使用dio等网络请求库和SQLite等数据库。
  2. MVVM、MVP或MVC架构模式

    • MVVM(Model-View-ViewModel) :一种将视图(View)与模型(Model)分离的设计模式,通过ViewModel来连接视图和模型。
    • MVP(Model-View-Presenter) :一种将视图(View)与模型(Model)通过Presenter进行解耦的设计模式。
    • MVC(Model-View-Controller) :一种将应用程序划分为模型(Model)、视图(View)和控制器(Controller)的设计模式。
  3. 模块化设计

    • 将App划分为多个独立的模块,每个模块负责特定的功能或业务逻辑。通过模块化设计,可以提高系统的可扩展性和可维护性。
  4. 依赖注入

    • 使用依赖注入框架(如GetX、Hilt等)来管理App中的依赖关系,降低组件间的耦合度,提高系统的可测试性和可维护性。
  5. 响应式编程

    • 使用响应式编程框架(如RxDart等)来处理异步数据流和事件流,实现数据的实时更新和界面刷新。

综上所述,使用Flutter和Dart打造一个项目App需要综合考虑功能、组件库以及架构设计等多个方面。通过合理的规划和选择,可以构建出功能丰富、性能优越、易于维护和扩展的App产品。


为啥我要用flutter 而不用原生开发app呢?

选择使用Flutter而不是原生开发APP,主要基于以下几个原因:

  1. 跨平台开发
    Flutter允许开发者使用一套代码同时构建Android和iOS应用,甚至还能扩展到Web、桌面(Windows、macOS、Linux)等平台。这意味着开发者不需要为每个平台分别编写和维护代码,从而节省了时间和资源。
  2. 快速迭代
    Flutter的热重载(Hot Reload)功能允许开发者在代码更改后立即看到效果,无需重启应用。这大大加快了开发速度,使得快速迭代和测试成为可能。
  3. 丰富的UI组件
    Flutter提供了丰富的Material Design和Cupertino(iOS风格)的UI组件库,使得开发者可以轻松构建高质量的用户界面。此外,Flutter还支持自定义组件,以满足特定需求。
  4. 性能优越
    Flutter使用Dart语言编写,并通过Skia图形库进行渲染。这使得Flutter应用具有出色的性能和流畅的用户体验。同时,Flutter还支持硬件加速和60fps的刷新率。
  5. 社区支持和资源
    Flutter拥有一个活跃的开发者社区和丰富的在线资源,包括文档、教程、插件和开源项目。这些资源可以帮助开发者快速解决问题并学习新的技能。
  6. 一致的UI体验
    使用Flutter开发的应用可以在不同平台上提供一致的UI体验。这对于希望在不同设备上提供相同用户体验的品牌和开发者来说是一个重要的优势。
  7. 降低维护成本
    由于Flutter支持跨平台开发,因此可以减少代码库的数量和复杂性,从而降低维护成本。此外,Flutter的组件化设计也使得代码更加模块化和易于管理。
  8. 未来可扩展性
    Flutter是Google支持的开源项目,并且持续得到更新和改进。这意味着Flutter具有强大的未来可扩展性,可以适应不断变化的技术和市场需求。

然而,也需要注意到Flutter的一些潜在缺点,如与原生平台的集成可能不如原生开发紧密、在某些特定功能上可能不如原生应用性能优越等。因此,在选择使用Flutter还是原生开发时,需要根据具体项目需求、团队技能水平和市场趋势进行综合考虑。


有哪些缺点?

Flutter作为一个流行的跨平台开发框架,虽然具有许多优点,但也存在一些缺点或潜在的挑战。以下是对Flutter缺点的详细归纳:

一、学习曲线较陡
  • Dart语言:Flutter使用Dart语言进行开发,对于没有使用过Dart语言或类似跨平台框架的开发者来说,需要花费一定的时间和精力来掌握Dart语言的语法和特性。
  • 框架理解:开发者还需要理解Flutter框架的工作原理和组件库,这需要一定的学习和实践过程。
二、原生集成问题
  • 插件生态:虽然Flutter的插件生态系统在不断发展,但与一些成熟的跨平台框架相比,其插件数量和质量可能仍有一定差距。在某些特定功能或服务的集成方面,可能需要自己编写插件或依赖于较少的第三方插件。
  • 深度集成:对于需要与原生系统深度集成的功能,如某些硬件访问、系统级服务等,Flutter可能不如原生开发灵活和方便。
三、性能问题
  • 复杂动画和图形:尽管Flutter在性能方面表现出色,但在处理复杂的动画和图形效果时,可能会出现性能瓶颈。这可能会影响应用的流畅性和用户体验。
  • 包体积:Flutter应用打包后的体积通常比原生应用大,这可能会增加用户的下载和安装时间。
四、适配和兼容性问题
  • 版本升级:随着Flutter和原生系统的不断更新,可能会出现一些适配和兼容性问题。开发者需要关注这些更新,并及时调整代码以适应新的版本。
  • 设备差异:不同品牌和型号的设备在硬件和软件上存在差异,这可能导致Flutter应用在某些设备上出现兼容性问题。
五、代码可读性和维护性
  • 代码结构:Flutter的代码结构相对复杂,尤其是当应用规模较大时,可能会增加代码的可读性和维护性难度。
  • Widget选择:Flutter提供了大量的Widget供开发者选择,但这也可能导致在选择合适的Widget时感到困惑和迷茫。
六、依赖Google支持
  • 长期发展:Flutter是由Google开发和维护的,因此其长期的发展和支持可能会受到Google战略调整的影响。这可能会对一些企业或开发者产生一定的担忧。

综上所述,Flutter虽然具有许多优点,但也存在一些缺点和潜在的挑战。在选择使用Flutter进行开发时,开发者需要权衡这些优缺点,并根据具体项目需求做出决策。同时,随着Flutter的不断发展和完善,相信这些缺点和挑战也会逐渐得到解决和改进。


介绍几个flutter 开源项目给我参考一下

Flutter作为一个广受欢迎的跨平台开发框架,拥有众多优秀的开源项目。以下是一些较为完善的Flutter开源项目参考:

1. Flutter Go
  • 简介:一个展示Flutter组件的Flutter应用,提供Flutter基本Widget的详细介绍和示例,帮助理解Flutter的widget系统。
  • 特点:包含多个示例应用,覆盖Flutter的各种功能和最佳实践;精选Flutter相关的库、工具等,满足寻找各种资源的需求;简化并增强Flutter应用的动画功能。
2. Flutter Gallery
  • 简介:由Flutter团队自己开发的开源应用,目的是帮助开发者学习Flutter的各种UI组件和设计模式。
  • 特点:提供了如何实现不同部件和功能的真实例子,成为初学者和经验丰富的Flutter开发人员的绝佳资源;支持Android、iOS、Web、macOS、Linux和Windows几乎所有的系统,实现了跨平台。
3. Flutter E-commerce
  • 简介:一个强大的开源电子商务应用程序,为使用Flutter构建电子商务应用程序提供了完整的解决方案。
  • 特点:提供了一系列的基本功能,如产品列表、购物车功能、用户认证和支付集成;具有模块化的架构和完善的代码库,可作为建立自己电子商务应用程序的宝贵参考。
4. Flutter News
  • 简介:一个用Flutter构建的流行的开源新闻应用程序。
  • 特点:聚合了来自不同来源的新闻文章,并在一个干净和视觉上吸引人的界面中展示它们。
5. Flutter Chat
  • 简介:一个开源的消息应用模板,允许开发者轻松创建聊天应用。
  • 特点:为构建实时聊天功能提供了基础,包括发送文本信息、媒体共享和推送通知等功能;具有精心设计的用户界面和灵活的架构,是希望在其应用程序中添加聊天功能的开发者的热门选择。
6. Feather
  • 简介:一个使用Flutter开发的美丽而直观的开源天气应用。
  • 特点:提供实时的天气信息,包括当前条件、每小时的预测和扩展预测;具有吸引人的视觉效果和流畅的动画。
7. Flutter Travel
  • 简介:一个开源的旅游应用程序,展示了Flutter在构建视觉上令人惊叹和功能丰富的应用程序方面的能力。
  • 特点:允许用户探索流行的旅游目的地,查看有关景点的详细信息,并计划他们的旅行;利用Flutter强大的动画框架来创建令人愉快的过渡和互动。
8. FlutterGram
  • 简介:一个社交分享开源项目,旨在复制流行的社交媒体应用程序Instagram的核心功能和用户界面。
  • 特点:为使用Flutter构建照片分享和社交网络应用提供了一个基础;包括上传照片、应用过滤器、对帖子进行喜欢和评论以及关注其他用户等功能。
9. BlackHole
  • 简介:一个音乐播放器的开源应用程序,提供了一个全功能的音乐播放器界面。
  • 特点:支持浏览和播放音乐、创建播放列表和管理音乐库等功能;具有视觉上吸引人的用户界面和流畅的动画效果。
10. AIdea
  • 简介:一款支持GPT以及国产大语言模型通义千问、文心一言等,支持Stable Diffusion文生图、图生图、SDXL1.0、超分辨率、图片上色的全能型APP。
11. API Dash
  • 简介:一个使用Flutter构建的漂亮且开源的跨平台API客户端。
  • 特点:可以轻松创建和自定义API请求,可视化检查响应并生成API集成代码;支持macOS、Windows、Linux、Android和iOS系统,是Postman和Insomnia的一个轻量级替代方案。
12. MMAS
  • 简介:一个基于Flutter的用于日常消费跟踪和财务管理的应用。
13. Bloomee
  • 简介:一款跨平台开源音乐播放器,旨在带来来自各种来源的无广告音乐。
14. AppFlowy
  • 简介:一款知识库和任务管理工具,其灵感来源于Notion,但允许用户掌控自己的数据,并提供了丰富的个性化选项。
15. Flutter Server Box
  • 简介:一款使用Flutter开发的Linux服务器工具箱,提供服务器状态图表和管理工具。

这些开源项目涵盖了Flutter开发的多个方面,包括UI组件、电子商务、新闻、聊天、天气、旅游、社交分享、音乐播放、API客户端、财务管理、知识库管理工具以及服务器工具箱等。这些项目不仅可以帮助新手快速上手Flutter开发,还可以为有经验的开发者提供实用的参考和灵感。