深入解析:第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 {
Widget build(BuildContext context) {
return MaterialApp(
// 应用标题,会显示在任务管理器中
title: '我的第一个Flutter应用',
// 关闭调试标签
debugShowCheckedModeBanner: false,
// 应用主题
theme: ThemeData(
// 主色调
primarySwatch: Colors.blue,
// 视觉密度
visualDensity: VisualDensity.adaptivePlatformDensity,
// 应用栏主题
appBarTheme: AppBarTheme(
backgroundColor: Colors.blue,
foregroundColor: