Flutter 安装与初体验：从零搭建开发环境-殇恋社区

前言

Flutter 是 Google 推出的跨平台移动应用开发框架，使用 Dart 语言编写。它最大的特点是自绘引擎——不依赖原生平台的 UI 控件，而是通过 Skia 图形引擎自己绘制界面。这意味着你只需要写一套代码，就可以同时生成 Android、iOS、Web、Windows、macOS、Linux 六个平台的应用。

本文聚焦于 Windows 平台的安装流程，将官方文档中的关键步骤提炼出来，让新手可以顺畅地跑通第一个 Flutter 项目。macOS 或 Linux 用户请参考 Flutter 官方安装文档。

一、安装前的准备工作

在正式安装 Flutter SDK 之前，需要先准备好以下三个基础工具：

工具	作用	下载地址
Git	用于下载和管理 Flutter SDK 版本	git-scm.com
Android Studio	提供 Android SDK、模拟器以及编译工具链	developer.android.com/studio
VS Code	轻量级编辑器，配合 Flutter 扩展使用	code.visualstudio.com

⚠️ 重要提醒：请确保你的 Windows 用户名是纯英文（例如 C:\Users\zhangsan）。如果用户名包含中文、空格或特殊符号，编译 Flutter 项目时可能会因为路径问题报错。

二、安装 Flutter SDK

官方提供了手动下载和 VS Code 自动安装两种方式。推荐使用 VS Code 自动安装，步骤最少，也最不容易出错。

2.1 通过 VS Code 安装（推荐）

打开 VS Code。
按下 Ctrl + Shift + P（或直接按 F1）打开命令面板。
在命令面板中输入 flutter，选择 Flutter: New Project。
VS Code 会询问 Flutter SDK 的位置：
- 如果已经安装过 SDK，点击 Locate SDK 手动指定。
- 如果尚未安装，点击 Download SDK 自动下载。
当弹出 Select Folder for Flutter SDK 对话框时，选择一个安装目录。注意：该路径不能包含空格或特殊字符，也不能放在有权限限制的文件夹（如 C:\Program Files）。推荐放在用户目录下，例如 C:\Users\你的用户名\flutter。
点击 Clone Flutter，等待下载完成。如果网络不稳定导致下载卡住，可以取消后重试。
安装成功后，点击 Add SDK to PATH，将 Flutter 添加到系统环境变量中。

2.2 验证安装

打开终端（命令提示符或 PowerShell），输入：

flutter --version

如果能正常显示 Flutter 版本号，说明 SDK 安装成功。接下来运行环境诊断命令：

flutter doctor

该命令会全面检查开发环境，输出类似以下内容：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.x.x, on Microsoft Windows)
[✓] Windows version
[✓] Android toolchain
[✓] Chrome
[✓] Visual Studio - develop Windows apps
[✓] Android Studio
[✓] VS Code
[✓] Connected device

所有项目前面都是绿色的 [✓] 即表示环境已配置完毕。如果出现 [✗] 或 [!]，请根据提示修复对应的工具链。

三、配置 Android 开发环境

要运行和调试 Flutter 应用，需要 Android SDK 以及模拟器。这些都可以通过 Android Studio 来安装。

3.1 首次启动 Android Studio

如果是第一次打开 Android Studio，会进入安装向导。请确保在向导中勾选安装以下组件：

Android SDK Platform（建议选择最新的 API 版本，如 API 35）
Android SDK Command-line Tools
Android SDK Build-Tools
Android SDK Platform-Tools

3.2 安装 Flutter 和 Dart 插件

在 Android Studio 中，点击 File → Settings（Windows）或 Preferences（macOS）。
左侧菜单选择 Plugins。
搜索 Flutter，点击 Install。该插件会自动安装所需的 Dart 插件。
安装完成后，点击 Restart IDE 重启 Android Studio。

四、创建第一个 Flutter 项目

4.1 使用 Android Studio 创建项目

重启 Android Studio 后，首页会出现 New Flutter Project 按钮，点击它。
确认 Flutter SDK path 是否正确指向你之前安装的路径，然后点击 Next。
填写项目信息：
- Project name：项目名称（只能使用小写字母和下划线，如 my_first_app）。
- Project location：项目存放的本地路径。
- Description：项目描述（可选）。
- Platforms：勾选你需要的目标平台（至少勾选 Android 和 Web）。
点击 Finish，等待项目创建完成。

4.2 项目结构概览

项目创建后会看到如下目录结构：

android/       — Android 原生配置
ios/           — iOS 原生配置
linux/         — Linux 桌面配置
macos/         — macOS 桌面配置
windows/       — Windows 桌面配置
web/           — Web 配置
lib/           — 核心代码目录（你的所有 Dart 文件都在这里）
pubspec.yaml   — 项目配置文件（管理依赖、资源等）

我们所有的 Flutter 代码都写在 lib/ 文件夹中，入口文件是 lib/main.dart。

五、解读第一个 Flutter 程序

打开 lib/main.dart，你会看到自动生成的计数器应用代码。我们分段来理解它。

5.1 程序入口

import 'package:flutter/material.dart';

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

main() 是所有 Dart 程序的入口函数。
runApp() 是 Flutter 提供的方法，接收一个 Widget 并将其渲染到屏幕上。这里的 MyApp() 就是整个应用的根组件。

5.2 无状态组件 StatelessWidget

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),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

StatelessWidget 是无状态组件。它没有可变状态，创建后内容就不会改变。
build() 方法负责描述该组件的 UI 结构。Flutter 在需要渲染时会调用它。
MaterialApp 是一个遵循 Material Design 规范的应用外壳，封装了导航、主题等配置。home 属性指定了应用的首页。

5.3 有状态组件 StatefulWidget

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

StatefulWidget 是有状态组件。它可以持有可能变化的数据，并通过 setState() 通知框架刷新界面。
createState() 方法返回一个 State 对象，真正的数据和逻辑都放在这个 State 对象中。

5.4 State 和 setState

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        child: const Icon(Icons.add),
      ),
    );
  }
}

State 对象持有数据（这里是 _counter）并实现 build() 方法。
setState() 是修改数据的唯一正确方式。当你调用 setState() 并修改其中的变量时，Flutter 会重新执行 build() 方法，从而刷新界面。
Scaffold 是一个常用的页面骨架组件，提供了 appBar（顶部栏）、body（主体内容）和 floatingActionButton（悬浮按钮）等标准布局。

整个应用的交互流程是：点击右下角的 + 按钮 → 触发 _incrementCounter() → 调用 setState() 将 _counter 加 1 → Flutter 重新调用 build() → 界面上的数字更新。

六、运行你的第一个 Flutter 应用

6.1 创建模拟器

在 Android Studio 中，点击右侧工具栏的 Device Manager 图标。
点击 Add Device（添加设备）。
选择设备型号（推荐 Pixel 系列），系统镜像选择 API 35 或最新版本。
按照向导下载并安装镜像。安装完成后，在设备列表中点击启动按钮。

6.2 运行项目

确保模拟器已成功开机并进入桌面。
在 Android Studio 顶部工具栏中，选择你已启动的模拟器作为目标设备。
点击绿色的 Run 按钮（或按 Shift + F10）。
等待编译完成，应用会自动安装到模拟器并启动。

如果一切顺利，你会看到一个带有标题栏的页面，点击右下角的 + 按钮，数字会随之增加。

七、常见问题排查

Q1：运行 `flutter doctor` 后 Android 相关项显示 `[✗]`

通常是 Android SDK 未安装完整。打开 Android Studio → SDK Manager，确保安装了 Android SDK Platform、Build-Tools 和 Command-line Tools。也可以尝试运行 flutter doctor --android-licenses 接受所有许可证。

Q2：VS Code 中找不到 Flutter 命令

检查是否正确安装了 Flutter 扩展（在 VS Code 扩展商店搜索 Flutter）。同时确保 Flutter SDK 的 bin 目录已加入系统环境变量 PATH。

Q3：模拟器启动后一直黑屏或卡在开机动画

可以尝试在 Device Manager 中对模拟器选择 Cold Boot Now（冷启动）。如果仍然失败，考虑创建新的模拟器，选择不同的系统镜像或分辨率。

Q4：项目编译报错“用户名包含非 ASCII 字符”

Flutter 在某些环节依赖于用户目录下的缓存文件。如果你的 Windows 用户名是中文或包含特殊字符，建议创建一个新的英文用户账号进行开发，或修改 Flutter 的缓存路径。

八、总结

恭喜！你已经完成了从零搭建 Flutter 开发环境，并成功运行了第一个 Flutter 应用。回顾整个过程：

安装 Git、Android Studio、VS Code。
通过 VS Code 自动下载安装 Flutter SDK。
用 flutter doctor 检查并修复环境配置。
在 Android Studio 中创建 Flutter 项目。
理解 StatelessWidget、StatefulWidget 和 setState()。
安装模拟器并运行项目。

环境搭好后，下一步就可以深入学习 Flutter 的各种 Widget，开始构建你自己的 App 了。

分享是一种美德！

THE END

Flutter 安装与初体验：从零搭建开发环境

前言

一、安装前的准备工作

二、安装 Flutter SDK

2.1 通过 VS Code 安装（推荐）

2.2 验证安装

三、配置 Android 开发环境

3.1 首次启动 Android Studio

3.2 安装 Flutter 和 Dart 插件

四、创建第一个 Flutter 项目

4.1 使用 Android Studio 创建项目

4.2 项目结构概览

五、解读第一个 Flutter 程序

5.1 程序入口

5.2 无状态组件 StatelessWidget

5.3 有状态组件 StatefulWidget

5.4 State 和 setState

六、运行你的第一个 Flutter 应用

6.1 创建模拟器

6.2 运行项目

七、常见问题排查

Q1：运行 `flutter doctor` 后 Android 相关项显示 `[✗]`

Q2：VS Code 中找不到 Flutter 命令

Q3：模拟器启动后一直黑屏或卡在开机动画

Q4：项目编译报错“用户名包含非 ASCII 字符”

八、总结

软件无法安装 – 解决方案

最全网站搭建保姆级教程，附源码！值得收藏！

Meting API 搭建教程 – 为你的网站添加在线音乐播放功能

十二：从入门到进阶——后端工程师的成长手册

请登录后发表评论

Flutter 安装与初体验：从零搭建开发环境

前言

一、安装前的准备工作

二、安装 Flutter SDK

2.1 通过 VS Code 安装（推荐）

2.2 验证安装

三、配置 Android 开发环境

3.1 首次启动 Android Studio

3.2 安装 Flutter 和 Dart 插件

四、创建第一个 Flutter 项目

4.1 使用 Android Studio 创建项目

4.2 项目结构概览

五、解读第一个 Flutter 程序

5.1 程序入口

5.2 无状态组件 StatelessWidget

5.3 有状态组件 StatefulWidget

5.4 State 和 setState

六、运行你的第一个 Flutter 应用

6.1 创建模拟器

6.2 运行项目

七、常见问题排查

Q1：运行 flutter doctor 后 Android 相关项显示 [✗]

Q2：VS Code 中找不到 Flutter 命令

Q3：模拟器启动后一直黑屏或卡在开机动画

Q4：项目编译报错“用户名包含非 ASCII 字符”

八、总结

软件无法安装 – 解决方案

最全网站搭建保姆级教程，附源码！值得收藏！

Meting API 搭建教程 – 为你的网站添加在线音乐播放功能

十二：从入门到进阶——后端工程师的成长手册

请登录后发表评论

Q1：运行 `flutter doctor` 后 Android 相关项显示 `[✗]`