Flutter: Flutter 简介与环境搭建
Flutter 让你用一套 Dart 代码同时构建 iOS、Android、Web 和 Desktop 应用——就像用一把万能钥匙打开四扇门。
📋 前置知识：零基础可学，无需先修课程
1. 你将学到
- Flutter 框架架构与 Dart 语言的关系
- Widget 树渲染原理（Everything is a Widget）
- Flutter 3.x 新特性：Impeller 渲染引擎、Foldable 支持
- Windows/macOS/Linux 环境下 Flutter SDK 安装与 PATH 配置
flutter create、flutter run、flutter doctor全流程验证
2. 一个创业者的真实故事
(1) 痛点：四个平台四套代码
Bob 是一名创业者，他的 ShopApp 电商项目需要同时覆盖 iOS、Android、Web 和 Desktop。如果每个平台各写一套原生代码，他需要 4 个开发团队、4 套代码库，人力成本超过 500 thousand USD/年。更糟糕的是，一个促销活动从需求到上线要 6 周——因为每个团队都要独立实现一遍。
(2) Flutter 的解法
Flutter 采用"一份代码，多端运行"的策略，用 Dart 语言编写 UI 层，通过自绘引擎直接渲染像素，不依赖原生 UI 组件。
DART
import 'package:flutter/material.dart';
// One codebase, four platforms
void main() => runApp(const ShopApp());
class ShopApp extends StatelessWidget {
const ShopApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ShopApp',
home: Scaffold(
appBar: AppBar(title: const Text('ShopApp')),
body: const Center(child: Text('Hello, Bob!')),
),
);
}
}
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
(3) 收益：1 个团队替代 4 个
Bob 用 Flutter 后，1 个团队维护 1 份代码，4 个平台同步上线。促销活动从 6 周缩短到 1 周，年开发成本从 500 thousand USD 降到 150 thousand USD。
3. Flutter 技术架构
Flutter 采用分层架构，从上层 Framework 到底层 Engine，各司其职。
graph TD
A[Flutter SDK] --> B[Dart SDK]
A --> C[Framework Layer]
A --> D[Engine Layer]
C --> E[Material Library]
C --> F[Cupertino Library]
D --> G[Skia / Impeller]
D --> H[Platform Embedder]
H --> I[Android]
H --> J[iOS]
H --> K[Web]
H --> L[Windows/macOS/Linux]
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
(1) Framework 层
Framework 层是开发者直接接触的部分，用纯 Dart 编写：
- Widget 层：声明式 UI 描述（StatelessWidget / StatefulWidget）
- Element 层：Widget 的实例化对象，管理树结构
- RenderObject 层：负责测量、布局和绘制
| 层级 | 职责 | 语言 |
|---|---|---|
| Widget | 声明 UI 配置 | Dart |
| Element | 管理 Widget 树 diff | Dart |
| RenderObject | 布局与绘制 | Dart |
| Engine | 渲染与 I/O | C++ |
(2) Engine 层
Engine 层用 C++ 编写，核心组件：
- Skia / Impeller：2D 图形渲染引擎，将 Dart UI 指令转为 GPU 指令
- Dart Runtime：JIT（开发）和 AOT（发布）编译
- Platform Embedder：各平台嵌入层，管理事件循环和线程
💡 提示： Flutter 3.x 默认启用 Impeller 渲染引擎替代 Skia，解决首帧卡顿和着色器编译延迟问题。
(3) 平台嵌入器
每个平台有不同的 Embedder 实现，负责：
| 平台 | Embedder | 渲染方式 |
|---|---|---|
| Android | flutter_shell (Java/Kotlin) |
GPU (Vulkan/OpenGL) |
| iOS | FlutterViewController (Swift/ObjC) |
GPU (Metal) |
| Web | HTML Canvas / WebGL | CanvasKit / HTML renderer |
| Desktop | GLFW / Win32 / Cocoa | GPU |
4. Everything is a Widget
Flutter 的核心理念：一切皆 Widget。按钮、字体、间距、甚至布局约束都是 Widget。
(1) Widget 分类
| 类型 | 说明 | 示例 |
|---|---|---|
| StatelessWidget | 不可变，build 一次 | Text, Icon, Image |
| StatefulWidget | 可变状态，可重建 | TextField, Checkbox |
| RenderObjectWidget | 控制布局和绘制 | Flex, Stack, Positioned |
| ProxyWidget | 向子树传递数据 | InheritedWidget, Provider |
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：StatelessWidget 商品卡片
DART
import 'package:flutter/material.dart';
class ProductCard extends StatelessWidget {
final String name;
final double price;
const ProductCard({
super.key,
required this.name,
required this.price,
});
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(name, style: const TextStyle(fontSize: 18)),
Text('\$${price.toStringAsFixed(2)}',
style: const TextStyle(color: Colors.green, fontSize: 16)),
],
),
),
);
}
}
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：StatefulWidget 计数器
DART
import 'package:flutter/material.dart';
class QuantitySelector extends StatefulWidget {
const QuantitySelector({super.key});
@override
State<QuantitySelector> createState() => _QuantitySelectorState();
}
class _QuantitySelectorState extends State<QuantitySelector> {
int _count = 1;
@override
Widget build(BuildContext context) {
return Row(
children: [
IconButton(
icon: const Icon(Icons.remove),
onPressed: () => setState(() => _count = (_count - 1).clamp(1, 99)),
),
Text('$_count', style: const TextStyle(fontSize: 20)),
IconButton(
icon: const Icon(Icons.add),
onPressed: () => setState(() => _count++),
),
],
);
}
}
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
5. 环境搭建
(1) Flutter SDK 安装
| 步骤 | Windows | macOS | Linux |
|---|---|---|---|
| 下载 SDK | flutter.dev/docs/get-started/install/windows | flutter.dev/docs/get-started/install/macos | flutter.dev/docs/get-started/install/linux |
| 解压路径 | C:\flutter |
~/development/flutter |
~/development/flutter |
| PATH 配置 | 系统环境变量添加 | ~/.zshrc 添加 |
~/.bashrc 添加 |
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：PATH 配置（macOS/Linux）
BASH
# Add Flutter to PATH in ~/.zshrc or ~/.bashrc
export PATH="$HOME/development/flutter/bin:$PATH"
# Verify installation
flutter --version
# Output: Flutter 3.x.x • channel stable
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：flutter doctor 检查
BASH
# Run doctor to check all dependencies
flutter doctor
# Expected output:
# [✓] Flutter (Channel stable, 3.x.x)
# [✓] Android toolchain
# [✓] Chrome - develop for the web
# [✓] Android Studio
# [!] VS Code (install Flutter extension)
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
(2) IDE 配置
| IDE | 必装插件 | 推荐插件 |
|---|---|---|
| VS Code | Flutter, Dart | Flutter Widget Snippets, Error Lens |
| Android Studio | Flutter, Dart | Flutter Intl, Riverpod Snippet |
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：创建第一个项目
BASH
# Create a new Flutter project
flutter create shop_app
# Navigate to project directory
cd shop_app
# Run on connected device or emulator
flutter run
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
6. 第一个 Hello World
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：ShopApp Hello World
DART
import 'package:flutter/material.dart';
void main() {
runApp(const ShopApp());
}
class ShopApp extends StatelessWidget {
const ShopApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'ShopApp',
theme: ThemeData(
colorSchemeSeed: Colors.blue,
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('ShopApp')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.shopping_bag, size: 80, color: Colors.blue),
const SizedBox(height: 16),
const Text('Welcome to ShopApp!',
style: TextStyle(fontSize: 24)),
const SizedBox(height: 8),
Text('Million-level products, USD settlement',
style: TextStyle(fontSize: 14, color: Colors.grey[600])),
const SizedBox(height: 24),
ElevatedButton(
onPressed: () {},
child: const Text('Start Shopping'),
),
],
),
),
);
}
}
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
▶ 示例
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
：热重载体验
BASH
# Start app with hot reload support
flutter run
# After modifying code, press:
# r - Hot reload (keep state, update UI)
# R - Hot restart (reset state, rebuild)
# q - Quit
# Hot reload updates UI in <1 second
# Try: change 'Welcome to ShopApp!' to 'Hello Bob!'
# Press r → UI updates instantly
TEXT
📖 仅展示
> **输出：** 在本地 Flutter SDK（Flutter 3.x / Dart 3.x）运行。Piston 服务器未安装 Flutter，请在本机 `flutter run` 实操对照。实际 UI/状态会因平台略有差异。
7. Flutter 3.x 新特性
| 特性 | 说明 | 影响 |
|---|---|---|
| Impeller 引擎 | 预编译着色器，消除首帧卡顿 | 渲染性能提升 30%+ |
| Foldable 支持 | 折叠屏自适应布局 | 拓展设备覆盖 |
| Material 3 | 新设计规范，动态颜色 | UI 更现代 |
| macOS / Linux 稳定 | Desktop 平台正式支持 | 4 端全覆盖 |
| 渲染引擎 | 首帧时间 | 着色器编译 | 适用版本 |
|---|---|---|---|
| Skia | 200-500ms | 运行时 JIT 编译 | Flutter 2.x |
| Impeller | <50ms | 构建时 AOT 编译 | Flutter 3.x |
❓ 常见问题
Q Flutter 和 React Native 有什么区别？
A Flutter 自绘引擎不依赖原生组件，UI 一致性更好；React Native 通过 JS Bridge 调用原生组件，性能有瓶颈。
Q Dart 语言难学吗？
A Dart 语法类似 Java 和 JavaScript，有这两门语言基础 1-2 天即可上手。
Q flutter doctor 报错 Android licenses not accepted 怎么办？
A 运行
flutter doctor --android-licenses，逐个接受许可即可。Q Flutter Web 能用于生产环境吗？
A Flutter 3.x Web 已稳定，但 SEO 支持有限，适合管理后台和工具类应用，不适合内容型 SEO 站点。
Q Impeller 引擎必须手动启用吗？
A Flutter 3.16+ 默认在 Android/iOS 启用 Impeller，无需手动配置。
Q 开发用 JIT 还是 AOT？
A 开发阶段用 JIT（支持热重载），发布阶段用 AOT（性能最优，Flutter 自动处理）。
📖 小节
- Flutter 采用 Framework + Engine 分层架构，Framework 用 Dart，Engine 用 C++
- 一切皆 Widget：StatelessWidget（不可变）和 StatefulWidget（可变）
- 环境搭建三步：安装 SDK → 配置 PATH → 运行
flutter doctor flutter create创建项目，flutter run启动调试，热重载秒级更新- Flutter 3.x Impeller 引擎消除首帧卡顿，Material 3 提供现代设计
📝 作业
- 基础题（难度⭐）：在你的电脑上安装 Flutter SDK，运行
flutter doctor，确保至少 4 项通过。 - 进阶题（难度⭐⭐）：修改 Hello World 示例，添加一个显示当前日期的 Text 组件。
- 挑战题（难度⭐⭐⭐）：创建一个包含 3 个商品卡片的 Column，每个卡片显示商品名和 USD 价格，点击卡片用 SnackBar 显示商品信息。
← 上一课 | 下一课 →
