引言
Flutter是Google推出的一款跨平台移动应用开发框架，它允许开发者使用一套代码库同时构建iOS和Android应用。本教程将详细介绍如何从零开始搭建Flutter开发环境，让你快速上手Flutter开发。
1. Flutter SDK安装与配置
1.1 下载Flutter SDK
首先，我们需要从Flutter官网下载最新版本的Flutter SDK。
访问 Flutter官网
选择你的操作系统（Windows、macOS或Linux）
下载对应的SDK压缩包
Flutter官网下载页面
1.2 解压并配置环境变量
Windows系统：
将下载的压缩包解压到你想要安装的目录，例如 C:\src\flutter
配置环境变量：
右键"此电脑" → “属性” → “高级系统设置” → “环境变量”
在"系统变量"中找到Path，点击"编辑"
添加Flutter的bin目录路径：C:\src\flutter\bin
macOS/Linux系统：
# 解压到目标目录
cd ~/development
unzip ~/Downloads/flutter_macos_3.19.0-stable.zip
# 配置环境变量
echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.zshrc
source ~/.zshrc
AI写代码
bash
1
2
3
4
5
6
7
1.3 验证安装
打开命令行工具，运行以下命令检查Flutter是否安装成功：
flutter --version
AI写代码
bash
1
如果安装成功，你将看到类似以下的输出：
Flutter 3.19.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 6d1f6c8b3a (4 weeks ago) • 2024-02-21 16:33:06 -0800
Engine • revision 204e6b6c64
Tools • Dart 3.3.0 • DevTools 2.31.1
AI写代码
1
2
3
4
2. Android Studio/VSCode环境搭建
2.1 Android Studio安装与配置
安装Android Studio
访问 Android Studio官网 下载安装包
按照安装向导完成安装
安装Flutter和Dart插件
启动Android Studio
打开插件市场：
Windows/Linux: File → Settings → Plugins
macOS: Android Studio → Preferences → Plugins
搜索并安装以下插件：
Flutter
Dart
配置Android SDK和命令行工具
打开Android Studio
进入 Tools → SDK Manager
确保已安装以下组件：
Android SDK
Android SDK Platform-Tools
Android SDK Build-Tools
2.2 VSCode环境配置
安装VSCode
访问 VSCode官网 下载并安装
启动VSCode
安装必要的扩展
打开扩展面板（Ctrl+Shift+X 或 Cmd+Shift+X）
搜索并安装以下扩展：
Flutter (由Dart Code开发)
Dart
配置VSCode设置
在VSCode的设置中（Ctrl+, 或 Cmd+,），添加以下配置：
{
"dart.flutterSdkPath": "C:\\src\\flutter",
"dart.checkForSdkUpdates": true,
"dart.openDevTools": "flutter"
}
AI写代码
json
1
2
3
4
5
3. 模拟器配置与真机调试
3.1 Android模拟器配置
创建Android虚拟设备
打开Android Studio
进入 Tools → AVD Manager
点击 Create Virtual Device
选择设备类型（推荐Pixel系列）
选择系统镜像（推荐最新的Android版本）
完成配置并启动模拟器
命令行创建模拟器
# 查看可用的系统镜像
flutter emulators --create --name My_Emulator
# 启动模拟器
flutter emulators --launch My_Emulator
AI写代码
bash
1
2
3
4
5
3.2 iOS模拟器配置（仅限macOS）
# 查看可用的iOS模拟器
flutter emulators
# 启动iOS模拟器
flutter emulators --launch apple_ios_simulator
AI写代码
bash
1
2
3
4
5
3.3 真机调试配置
Android设备调试
在Android设备上启用开发者选项：
进入 设置 → 关于手机
连续点击"版本号"7次
启用USB调试：
设置 → 开发者选项 → USB调试
连接设备到电脑
运行 flutter devices 查看已连接的设备
iOS设备调试（仅限macOS）
安装Xcode（从App Store下载）
连接iOS设备
在Xcode中信任开发者证书
运行 flutter devices 确认设备连接
4. 创建第一个Flutter应用
4.1 使用命令行创建项目
# 创建新项目
flutter create my_first_app
# 进入项目目录
cd my_first_app
# 运行应用（请确保有可用的设备或模拟器）
flutter run
AI写代码
bash
1
2
3
4
5
6
7
8
4.2 项目结构说明
my_first_app/
├── android/ # Android平台特定代码
├── ios/ # iOS平台特定代码
├── lib/ # 主要的Dart代码
│ └── main.dart # 应用入口文件
├── test/ # 测试代码
├── pubspec.yaml # 项目依赖配置
└── README.md
AI写代码
1
2
3
4
5
6
7
8
4.3 理解初始代码
打开 lib/main.dart 文件，你将看到默认生成的代码：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headlineMedium,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}
AI写代码
dart
运行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
4.4 修改并运行应用
让我们简单修改一下应用，改变标题和颜色：
// 修改MyApp类的theme属性
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
// 修改MyHomePage的标题
home: const MyHomePage(title: '我的第一个Flutter应用'),
AI写代码
dart
运行
1
2
3
4
5
6
7
8
保存文件，应用将自动热重载并显示更新后的界面。
4.5 调试技巧
热重载 vs 热重启
热重载 (r): 保持应用状态，快速加载代码更改
热重启 (R): 重置应用状态，重新启动应用
完全重启: 停止并重新启动应用
使用DevTools
# 启动DevTools
flutter pub global activate devtools
flutter pub global run devtools
AI写代码
bash
1
2
3
DevTools提供了强大的调试功能，包括：
Widget检查器
性能分析
内存分析
网络监控
5. 常见问题解决
5.1 Flutter doctor问题
运行 flutter doctor 检查环境配置，常见问题及解决方案：
Android许可证未接受：
flutter doctor --android-licenses
AI写代码
bash
1
Xcode未配置（macOS）：
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch
AI写代码
bash
1
2
5.2 网络问题
在中国大陆地区，可能需要配置镜像：
# 设置环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
AI写代码
bash
1
2
3
5.3 设备连接问题
Android设备无法识别：
检查USB调试是否开启
安装对应的USB驱动程序
尝试不同的USB端口
iOS设备信任问题：
在设备上信任开发者证书
重新连接设备
结语
恭喜！你已经成功搭建了Flutter开发环境并创建了第一个Flutter应用。通过本教程，你学会了：
✅ Flutter SDK的安装与配置
✅ Android Studio和VSCode的开发环境搭建
✅ 模拟器和真机调试配置
✅ 创建和运行第一个Flutter应用
接下来，你可以继续学习Flutter的核心概念，如Widget、State管理、路由导航等，开始构建更复杂的应用。
扩展资源
Flutter官方文档
Flutter示例代码
Dart编程语言指南
Flutter包仓库
祝你Flutter开发之旅愉快！
浙公网安备 33010602011771号