【Flutter入门】1. 从零开始的flutter跨平台开发之旅（概述、环境搭建、第一个Flutter应用）

前言

随着移动互联网的发展，跨平台开发已经成为一个不可忽视的技术方向。本文将带领读者从零开始学习 Flutter，循序渐进地掌握这个强大的跨平台开发框架。截至 2024 年 12 月，Flutter 已经发展到了 3.27 版本。在学习和使用的过程中，我发现国内现在网上可以找到的 Flutter 相关文章教程等并不多，且很多都是比较过时的。因此，我计划从 2025 年开始，分享自己平时做的笔记以及工作上积累的经验，希望能对正在学习或使用 Flutter 的同学有所帮助。同时，我也希望通过写作来磨练自己的技术。由于技术写作经验有限，文中可能存在逻辑表达不清、字词错误、代码错误或格式错误等问题，欢迎读者在评论区或私信中指出，以便及时修正优化，非常感谢！

Flutter 概述

什么是 Flutter？

Flutter 是 Google 推出的一个开源 UI 工具包，它彻底改变了我们对跨平台开发的认知。不同于传统的跨平台框架，Flutter 采用了自绘引擎 Skia 图形引擎，不依赖原生控件，这使得它可以完全控制渲染流程，保证多平台 UI 一致性，并提供更好的动画性能表现。此外，Flutter 支持 AOT（Ahead Of Time）编译，直接编译成原生代码，从而实现启动速度快、运行时性能好、内存占用小等优点。同时，Flutter 还支持 iOS、Android、Web、Windows、macOS 和 Linux 等多个平台，并提供了亚秒级的热重载功能，大大提升了开发效率。

AOT 与 JIT 编译

Flutter 根据不同场景使用两种编译模式：

• AOT (Ahead Of Time) 编译：在应用发布前将 Dart 代码预编译为本地机器码，主要用于 Release 模式下的生产环境发布。这种方式能保证运行性能好、无需运行时编译、启动速度快、内存占用小。
• JIT (Just In Time) 编译：在运行时动态将 Dart 代码编译为机器码，主要用于 Debug 模式下的开发环境。它支持热重载(Hot Reload)，方便调试和提高开发效率。

Flutter 巧妙地结合了这两种编译模式的优势：开发时使用 JIT 提供流畅的开发体验；发布时使用 AOT 确保最佳性能。

为什么选择 Flutter？

在众多跨平台方案中，Flutter 具有显著优势，包括但不限于：

• 开发效率：热重载支持、丰富的 Widget 库、完善的开发工具、统一的代码库。
• 性能表现：接近原生的性能、流畅的 60fps 动画、优秀的渲染性能、较小的安装包体积。
• 生态系统：活跃的开发者社区、丰富的第三方包、完善的文档支持、企业级支持。
• 学习曲线：简洁的 Dart 语言、声明式 UI 设计、统一的开发模式、完整的学习资源。

Flutter vs 其他框架对比

特性	Flutter	React Native	Uni-app
渲染引擎	Skia 自绘引擎	JSCore + 原生桥接	V8/JSCore + WebView
渲染性能	接近原生	接近原生(部分损耗)	依赖浏览器
动画性能	60fps 稳定	部分场景丢帧	依赖设备性能
首屏加载	较快	需要 JS 引擎预热	需要 WebView 初始化
学习曲线	中等	较低（如熟悉 React）	较低
生态系统	快速成长	成熟稳定	完善
热重载	支持	支持	支持
包大小	较大	较小	中等
使用场景	全平台应用	移动端应用为主	偏向小程序
中文社区	一般	活跃	活跃
开发语言	Dart	JavaScript	JavaScript/Vue
上手难度	中等	较易	较易
调试工具	完善	完善	一般
跨平台性	优秀	良好	优秀

Flutter 应用场景

商业应用案例

• 电商应用：阿里巴巴闲鱼，日活用户超过 3000 万，首屏加载时间小于 1 秒，开发效率提升 50%。
• 社交应用：腾讯微视，视频播放性能接近原生，跨平台代码复用率大于 95%。
• 金融应用：工商银行，交易模块性能达到原生水平，开发周期缩短 40%。
• 生活服务：美团外卖，用户体验显著提升，研发效率大幅提高。

技术特点

• 高性能渲染：自绘引擎保证性能，GPU 加速渲染，智能图层管理。
• 快速开发迭代：毫秒级热重载，丰富的调试工具，自动化测试支持。
• 优秀的动画支持：内置动画库，自定义动画支持，硬件加速。

适用场景

• 需要快速开发的项目
• 要求高性能的应用
• 需要精美 UI 的产品
• 跨平台一致性要求高的场景

开发环境搭建

系统要求

Windows 环境

• 操作系统：Windows 10（推荐）或 Windows 7 SP1（最低要求），64 位操作系统（必需），开启 Hyper-V（Windows 10 Pro 以上版本）。
• 硬件要求：CPU 需支持虚拟化技术，内存建议 8GB 以上（推荐 16GB），存储至少 10GB 可用空间。
• 开发工具：Git for Windows 2.x, PowerShell 5.0+, Android Studio（推荐）或 VS Code, Android 开发环境（JDK 8 或更高版本，Android SDK Platform 29 或更高版本，Android SDK Command-line Tools）。

macOS 环境

• 操作系统：macOS 10.15 (Catalina)或更高版本，建议使用最新版本以获得最佳性能。
• 硬件要求：CPU：Intel 或 Apple Silicon，内存建议 16GB，存储至少 15GB 可用空间。
• 开发工具：Xcode 13 或更高版本（iOS 开发必需），Android Studio 或 VS Code, CocoaPods（iOS 依赖管理），iOS 开发要求：Apple Developer 账号，iOS Simulator 或真机设备。

Flutter SDK 安装

Windows 详细步骤

# 创建开发目录
mkdir C:\src
cd C:\src

# 下载Flutter SDK
git clone https://github.com/flutter/flutter.git -b stable

# 添加Flutter到系统环境变量
setx PATH "%PATH%;C:\src\flutter\bin"

# 验证安装
flutter --version

# 检查环境变量是否生效
echo %PATH%

# 验证Flutter环境
flutter doctor -v

# 解决常见问题
flutter doctor --android-licenses

# 检查配置
flutter doctor

macOS 详细步骤

# 使用Homebrew安装
brew install --cask flutter

# 配置环境变量
# 添加到 ~/.zshrc 或 ~/.bash_profile
export PATH="$PATH:`pwd`/flutter/bin"

# iOS开发配置
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -license

开发工具配置

Android Studio 配置

• 插件安装：Flutter 插件, Dart 插件, Flutter Snippets, Flutter Enhancement Suite。

• SDK 配置：Preferences > Languages & Frameworks > Flutter，设置 Flutter SDK 路径。

• 模拟器配置：

  # 创建模拟器
  flutter emulators --create
  
  # 启动模拟器
  flutter emulators --launch <emulator_id>
  

VS Code 配置

• 必要插件：Flutter, Dart, Flutter Widget Snippets, Awesome Flutter Snippets。
• 配置设置：

  {
       
    "editor.formatOnSave"