Flutter 开发第一个应用：新手完整入门指南

2025-12-11

2025-12-16

Flutter, Tutorials

Flutter 是 Google 推出的跨平台 UI 框架，使用一套代码即可同时构建 iOS、Android、Web 和桌面应用。
如果你是第一次接触 Flutter，这篇文章将带你从 0 开始，真正跑起第一个应用。

不需要任何 Flutter 经验，只要你能跟着步骤操作即可。

一、Flutter 适合谁学习？

Flutter 特别适合以下人群：
• 想同时开发 iOS 和 Android 的开发者
• 有前端经验（React / Vue）的人
• 希望快速做出 App 原型
• 初学移动开发的新手

如果你只学一门跨平台框架，Flutter 是非常好的选择。

二、开发第一个 Flutter 应用前的准备

1️⃣ 安装 Flutter SDK

前往 Flutter 官方网站下载 SDK，并按照你的系统选择对应版本。

安装完成后，在终端执行：

flutter –version

如果能正常显示版本号，说明 Flutter 已安装成功。

2️⃣ 检查开发环境

运行以下命令：

flutter doctor

Flutter 会自动检查你的环境，包括：
• Flutter SDK
• Dart SDK
• Android Studio / Xcode
• 连接设备状态

如果某项未完成，Flutter 会提示你如何修复。

⸻

三、创建你的第一个 Flutter 项目

在终端中进入你希望存放项目的目录，然后执行：

flutter create first_flutter_app

Flutter 会自动生成一个完整的示例项目。

进入项目目录：

cd first_flutter_app

⸻

四、用 VS Code 或 Android Studio 打开项目

你可以选择：
• VS Code（轻量，推荐新手）
• Android Studio（功能完整）

用 VS Code 打开项目后，你会看到如下结构：

1 2	lib/ └── main.dart

main.dart 是 Flutter 应用的入口文件。

⸻

五、运行 Flutter 示例应用

方法一：使用模拟器
• Android：启动 Android Emulator
• iOS：启动 iOS Simulator（macOS）

方法二：使用真机
• Android 手机开启 USB 调试
• iPhone 通过 Xcode 配置开发证书

在项目根目录执行：

flutter run

如果一切正常，你会看到一个蓝色的计数器示例应用。

🎉 恭喜，你已经成功运行了第一个 Flutter 应用！

六、理解第一个 Flutter 应用在做什么

打开 lib/main.dart，你会看到一个示例代码。

Flutter 应用的核心是 Widget（组件）。

1
2
3

void main() {
  runApp(const MyApp());
}

•	main() 是程序入口
•	runApp() 用来启动 Flutter 应用

一个最简单的 Flutter 页面示例

你可以把示例代码简化为：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Flutter')),
        body: Center(child: Text('这是我的第一个 Flutter 应用')),
      ),
    ),
  );
}

保存后，应用会自动热更新。

七、Flutter 的几个核心概念（新手必懂）

• 页面
• 按钮
• 文本
• 布局

在 Flutter 中，全都是 Widget。

⸻

2️⃣ 热重载（Hot Reload）

修改代码后，无需重启应用即可看到效果，这是 Flutter 的一大优势。

⸻

3️⃣ 状态（State）

• StatelessWidget：静态组件
• StatefulWidget：可变组件

初学阶段先理解概念即可，不用急着深入。

八、新手常见问题与解决方法

❓ flutter run 找不到设备？
• 检查模拟器是否启动
• 确认 USB 连接
• 重新运行 flutter doctor

❓ iOS 无法运行？
• 确保使用 macOS
• Xcode 已安装并配置
• 执行 sudo xcode-select –switch /Applications/Xcode.app

九、下一步你可以学习什么？

完成第一个应用后，建议继续学习：
• Flutter 页面布局（Row / Column）
• 常用组件（Text / Button / ListView）
• 页面跳转（Navigator）
• 状态管理基础

十、总结

Flutter 的上手门槛并不高，只要环境配置完成，你就能快速跑起第一个应用。

这一步非常重要，它意味着你已经真正进入 Flutter 的世界。

接下来，只需要不断实践，你就能逐步构建出完整的 App。

Tutorials