深入解析：第1课：Flutter环境搭建与Hello World

第1课：Flutter环境搭建与Hello World

学习目标

• 理解Flutter框架的基本概念和优势
• 掌握Flutter开发环境的搭建方法
• 学会创建和运行第一个Flutter项目
• 理解Flutter项目的基本结构
• 掌握基础的Widget概念

课程内容

1.1 Flutter简介

1.1.1 什么是Flutter

Flutter是Google开发的开源UI框架，具有以下特点：

• 跨平台开发：一套代码同时支持Android、iOS、Web、Desktop
• 热重载：快速开发，实时预览修改效果
• 丰富的组件库：内置Material Design和Cupertino风格组件
• 高性能：直接编译为原生代码，性能接近原生应用
• 开源免费：完全免费，社区活跃

1.1.2 Flutter架构

┌─────────────────────────────────────┐
│               应用层                 │
├─────────────────────────────────────┤
│              Flutter引擎            │
├─────────────────────────────────────┤
│           平台特定代码               │
└─────────────────────────────────────┘

1.2 环境搭建

1.2.1 系统要求

• 操作系统：Windows 10+、macOS 10.14+、Linux
• 内存：至少8GB RAM（推荐16GB）
• 磁盘空间：至少10GB可用空间
• 网络：稳定的网络连接（下载SDK和依赖）

1.2.2 安装Flutter SDK

# Windows用户
# 1. 下载Flutter SDK
# 访问 https://flutter.dev/docs/get-started/install/windows
# 2. 解压到指定目录（如 C:\flutter）
# 3. 添加环境变量
# 将 C:\flutter\bin 添加到 PATH 环境变量
# 4. 验证安装
flutter --version
# 5. 运行Flutter医生检查
flutter doctor

1.2.3 安装开发工具

# 推荐使用VS Code
# 1. 下载安装VS Code
# 2. 安装Flutter和Dart插件
# 3. 重启VS Code
# 或者使用Android Studio
# 1. 下载安装Android Studio
# 2. 安装Flutter和Dart插件
# 3. 配置Android模拟器

1.2.4 配置Android开发环境

# 1. 安装Android Studio
# 2. 安装Android SDK
# 3. 创建Android模拟器
# 4. 接受Android许可证
flutter doctor --android-licenses
# 5. 验证配置
flutter doctor

1.3 第一个Flutter项目

1.3.1 创建项目

# 创建新的Flutter项目
flutter create my_first_app
# 进入项目目录
cd my_first_app
# 运行项目
flutter run

1.3.2 项目结构解析

my_first_app/
├── android/          # Android平台特定代码
├── ios/             # iOS平台特定代码
├── lib/             # Dart代码主目录
│   └── main.dart    # 应用入口文件
├── test/            # 测试文件目录
├── web/             # Web平台特定代码
├── pubspec.yaml     # 项目配置文件
└── README.md        # 项目说明文档

1.3.3 核心文件说明

# pubspec.yaml - 项目配置文件
name: my_first_app
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.17.0 <4.0.0"
flutter: ">=3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter:
uses-material-design: true

1.4 基础概念理解

1.4.1 Widget概念

在Flutter中，“一切皆Widget”：

• StatelessWidget：无状态组件，不可变
• StatefulWidget：有状态组件，可以改变
• MaterialApp：Material Design风格的应用根组件
• Scaffold：页面的基本布局结构

1.4.2 基础组件

// lib/main.dart - 第一个Flutter应用
import 'package:flutter/material.dart';
void main() {

runApp(MyApp());
}
/// 主应用类
/// 这是一个StatelessWidget，表示应用本身
class MyApp
extends StatelessWidget {

@override
Widget build(BuildContext context) {

return MaterialApp(
// 应用标题，会显示在任务管理器中
title: '我的第一个Flutter应用',
// 关闭调试标签
debugShowCheckedModeBanner: false,
// 应用主题
theme: ThemeData(
// 主色调
primarySwatch: Colors.blue,
// 视觉密度
visualDensity: VisualDensity.adaptivePlatformDensity,
// 应用栏主题
appBarTheme: AppBarTheme(
backgroundColor: Colors.blue,
foregroundColor: