第4章 - 第一个 Flutter 应用
嗨，朋友！我是长安。
终于到了激动人心的时刻——我们要亲手创建第一个 Flutter 应用了！这一章，我会带你从零开始，一步步把 App 跑起来。
🚀 创建项目
打开终端（命令行），进入你想存放项目的目录，运行：
flutter create my_first_app
等待几秒钟，Flutter 会自动创建项目结构：
my_first_app/
├── android/ # Android 原生代码
├── ios/ # iOS 原生代码
├── lib/ # Dart 代码（主要工作区）
│ └── main.dart # 入口文件
├── test/ # 测试代码
├── pubspec.yaml # 项目配置文件
└── ...
项目命名规范
Flutter 项目名必须是小写字母，多个单词用下划线连接，如 my_first_app
📂 进入项目目录
cd my_first_app
🏃 运行项目
方式一：命令行运行
# 查看可用设备
flutter devices
# 运行到指定设备
flutter run
# 运行到 Chrome（Web）
flutter run -d chrome
# 运行到 Android 模拟器
flutter run -d emulator-5554
方式二：VS Code 运行（推荐）
- 用 VS Code 打开项目文件夹
- 打开
lib/main.dart文件 - 点击右上角的
▶️ Run按钮，或按F5 - 选择目标设备
第一次运行可能需要几分钟，耐心等待...
🎉 成功了！ 你应该能看到一个带计数器的示例应用：
┌─────────────────────────────────┐
│ Flutter Demo Home Page │
│ │
│ │
│ 0 │
│ You have pushed the button │
│ this many times │
│ │
│ [+] │
└─────────────────────────────────┘
🔍 理解代码结构
打开 lib/main.dart，让我们逐行理解这段代码：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
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'),
);
}
}
关键点解析
| 代码 | 作用 |
|---|---|
import 'package:flutter/material.dart' | 导入 Flutter Material 组件库 |
void main() | 程序入口函数 |
runApp() | 启动 Flutter 应用 |
MaterialApp | Material 风格的应用根组件 |
StatelessWidget | 无状态组件 |
build() | 构建 UI 的方法 |
✏️ 修改代码，体验热重载
现在让我们修改代码，体验一下 Flutter 的热重载魔法！
1. 修改标题
找到这行代码：
home: const MyHomePage(title: 'Flutter Demo Home Page'),
改成：
home: const MyHomePage(title: '我的第一个 Flutter 应用'),
2. 保存并查看
按 Ctrl+S（Mac: Cmd+S）保存文件。
神奇的事情发生了！ 应用几乎瞬间就更新了，而且状态还保持着！
这就是 热重载（Hot Reload） 的魔力！🔥
🎨 从零写一个简单页面
现在我们把默认代码删掉，自己从零写一个简单的页面。
用以下代码完全替换 lib/main.dart 的内容：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hello Flutter',
debugShowCheckedModeBanner: false, // 隐藏 debug 标签
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
useMaterial3: true,
),
home: const HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Hello Flutter'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 图标
const Icon(
Icons.flutter_dash,
size: 100,
color: Colors.blue,
),
const SizedBox(height: 20),
// 文字
const Text(
'欢迎来到 Flutter 的世界！',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 10),
const Text(
'我是长安，这是我的第一个 App',
style: TextStyle(
fontSize: 16,
color: Colors.grey,
),
),
const SizedBox(height: 30),
// 按钮
ElevatedButton(
onPressed: () {
print('按钮被点击了！');
},
child: const Text('点击我'),
),
],
),
),
);
}
}
保存后，你应该能看到这样的界面：
┌─────────────────────────────────┐
│ ← Hello Flutter │
├─────────────────────────────────┤
│ │
│ 🐦 │
│ │
│ 欢迎来到 Flutter 的世界！ │
│ 我是长安，这是我的第一个 App │
│ │
│ [ 点击我 ] │
│ │
└─────────────────────────────────┘
🧩 代码详解
让我解释一下这段代码中的关键组件：
Scaffold - 页面脚手架
Scaffold(
appBar: AppBar(...), // 顶部导航栏
body: ..., // 页面主体内容
floatingActionButton: ..., // 浮动按钮（可选）
bottomNavigationBar: ..., // 底部导航栏（可选）
)
Scaffold 是 Material Design 的页面骨架，提供了 App 的基本布局结构。
AppBar - 顶部导航栏
AppBar(
title: const Text('Hello Flutter'), // 标题
leading: ..., // 左侧图标
actions: [...], // 右侧操作按钮
)
Center - 居中组件
Center(
child: Text('我会居中显示'),
)
让子组件在父容器中水平和垂直居中。
Column - 垂直排列
Column(
children: [
Text('第一行'),
Text('第二行'),
Text('第三行'),
],
)
让多个子组件垂直排列。
SizedBox - 间距盒子
SizedBox(height: 20) // 垂直间距 20 像素
SizedBox(width: 10) // 水平间距 10 像素
用来在组件之间添加固定间距。
ElevatedButton - 凸起按钮
ElevatedButton(
onPressed: () {
// 点击事件处理
},
child: Text('按钮文字'),
)
🔧 常用命令
| 命令 | 作用 |
|---|---|
flutter run | 运行应用 |
flutter run -d chrome | 运行到 Chrome |
r | 热重载（运行中按） |
R | 热重启（运行中按） |
q | 退出运行 |
flutter clean | 清理构建缓存 |
flutter pub get | 获取依赖包 |
📝 小结
这一章我们学习了：
- ✅ 使用
flutter create创建项目 - ✅ 理解项目目录结构
- ✅ 运行 Flutter 应用
- ✅ 体验热重载
- ✅ 认识基本组件：Scaffold、AppBar、Center、Column、Text、Icon、Button
核心概念
在 Flutter 中，一切皆 Widget！界面上的每一个元素（文字、按钮、图片、布局）都是 Widget。
💪 练习题
- 修改主题颜色为绿色（
Colors.green） - 在页面上添加一个
Image.network()显示网络图片 - 添加一个
FloatingActionButton浮动按钮
点击查看答案
练习1：修改主题颜色
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
useMaterial3: true,
),
练习2：添加网络图片
Image.network(
'https://flutter.dev/images/flutter-logo-sharing.png',
width: 150,
),
练习3：添加浮动按钮
Scaffold(
// ... 其他代码
floatingActionButton: FloatingActionButton(
onPressed: () {
print('FAB 被点击了！');
},
child: const Icon(Icons.add),
),
)
🚀 下一步
恭喜你成功运行了第一个 Flutter 应用！下一章我们来深入学习 Widget 基础，了解更多常用组件。
由 编程指南 提供