前言
Flutter 是 Google 开源的应用开发框架,仅通过一套代码库,就能构建精美的、原生平台编译的多平台应用。也成为了越来越多的独立开发者/个人开发者的首选。
Flutter 开发优势
跨平台支持
同一套代码可以在 iOS、Android、Web、桌面应用等多个平台上运行。这极大地减少了开发成本和时间,让开发者能够更高效地覆盖更广泛的用户群体。特别适合用于创新项目、原型设计和快速验证想法。
良好的开发体验
Flutter 采用热重载(Hot Reload)技术,允许开发者在运行时快速查看代码修改后的效果,无需重新编译和重启应用,大大加快了开发速度。
优美的用户界面
丰富的 UI 组件,而且这些组件在不同平台上都能保持一致的外观和行为,让应用拥有统一美观的用户界面。
高性能
Flutter 使用自带的 Skia 图形引擎,可以直接绘制 UI 组件,不依赖平台的原生控件。这使得 Flutter 应用在性能方面表现出色,滚动流畅,响应迅速。(目前 iOS 正在使用性能更高的 Impeller 替换)
强大的社区支持
Flutter 拥有庞大的开发者社区,有许多优秀的第三方插件和工具,可以快速解决各种问题和需求。
Flutter 开发案例
可以看到,无论是大厂、小厂、创业公司还是个人都在 Flutter 上有自己的探索,这也会让 Flutter 的生态越来越好,对所有开发者来说都是一件有益的事情。
Flutter 生态介绍
Flutter 作为一个全面的 UI 框架,拥有庞大的生态系统,包含以下重要组件:
开发语言:
Flutter 使用 Dart 作为开发语言,Dart 是由谷歌开发的现代编程语言,易于学习和使用,目前最新的版本是 Dart3。
Flutter 框架:
Flutter 框架是构建应用程序的核心组件,也是 Flutter 生态的核心,它提供了丰富的 UI 组件。有前端或移动端开发经验的上手更快。对于 iOS 开发者它和 SwiftUI 很像,对于 Android 开发者它和 Jetpack Compose 很像。上手非常容易。
Flutter Plugin:
Flutter 框架从某种意义上来说是一个 UI 框架。有时候为了开发出功能更丰富的应用,我们需要访问更多原生的能力,比如定位、相机、电量信息等等。Flutter 插件是连接 Flutter 与原生平台(如 Android 和 iOS)的桥梁。通过插件,开发者可以使用原生平台的功能和特性,拓展应用的能力。
Flutter Packages:
Flutter 社区开发了大量的 Packages,涵盖了各种功能和工具,例如网络请求、数据库、状态管理等,这些 Packages 可供开发者直接使用,极大地提高了开发效率。开发者可以从 pub.dev 上搜索 flutter packages,也可以把自己开发的 package 贡献到pub.dev。它类似于前端领域的 npm 包管理,iOS 领域的 CocoaPods,以及 Android 领域的 Maven/Google 仓库。
Flutter 工具:
Flutter 提供了丰富的开发工具,包括 Flutter SDK、Dart SDK、Flutter DevTools 等,这些工具帮助开发者调试、测试和优化应用。
Flutter 环境搭建
对于独立开发者最好选择 macOS 系统,涉及 iOS 发布 AppStore,macOS 系统开发测试更方便。这部分内容不会介绍太多,因为官网给出的安装教程非常完备。虽然环境搭建对于开发者来说可能会耗费较多的时间和精力,但这是我们迈向独立开发的第一步。下面只介绍 windows 和 macOS 环境搭建的大体步骤,具体参考官网 windows 环境搭建指南、macOS 环境搭建指南。
macOS 系统
硬件要求
操作系统:macOS,需要 10.14 (Mojave) 以及以上版本的操作系统
磁盘空间:2.8 GB(不包含 IDE 或其余工具所需要的磁盘空间)
工具:Flutter 使用 git 进行安装和升级,我们建议您安装包含了 git 的 Xcode,或者您也可以 单独安装 git。
安装 Flutter SDK
运行 flutter doctor 命令
更新 PATH 环境变量
设置 iOS 开发环境
配置 iOS 模拟器
Windows 系统
硬件要求
操作系统:Windows 10 或更高的版本(基于 x86-64 的 64 位操作系统)。
磁盘空间:除安装 IDE 和一些工具之外还应有至少 1.64 GB 的空间。
设置: 必须在 Windows 10/11 上启用开发者模式。
工具:Windows PowerShell 5.0 或者更高的版本、Git。
安装 Flutter SDK
更新 path 环境变量
运行 flutter doctor
C:\src\flutter>flutter doctor
上述命令会检查你的现有环境,并将检测结果以报告形式呈现出来。
设置 Android 开发环境
1. 安装 Android Studio
2. 配置 Android 设备
3. 配置 Android 模拟器
4. 同意 Android 协议
环境配置检查
根据官方文档,搭建好开发环境之后,打开终端执行 flutter doctor
。输出结果:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.10.6, on macOS 13.4 22F66 darwin-x64, locale
en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version
32.0.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] IntelliJ IDEA Ultimate Edition (version 2019.2)
[✓] VS Code (version 1.80.1)
[✓] Connected device (2 available)
[✓] Network resources
• No issues found!
如果你的输出结果和我的一样,表明环境搭建完成,并且 Android 和 iOS 环境都没有问题,可以正式开始开发了。
实战
我们快速创建一个新项目,不改动任何别的代码,看一下默认项目的运行结果。
新建 Flutter 项目
填写项目基本信息
基本项目结构
iOS 模拟器运行效果
Android 模拟器运行效果
总结
Flutter 作为一个全面的移动应用 UI 框架,兼具快速开发、高性能、跨平台、美观等优势,逐渐成为移动应用开发的首选框架之一。希望本文对初学者了解 Flutter 生态和环境搭建有所帮助。并迈出独立开发者的第一步。
参考资料
Flutter 官方网站(中):https://flutter.cn
Flutter 官方网站(英):https://flutter.dev
Flutter GitHub 仓库:https://github.com/flutter/flutter