Day 8 详细学习计划：Flutter 环境搭建与 Hello World

学习目标

• 安装 Flutter SDK
• 配置开发环境
• 创建第一个 Flutter 应用
• 运行计数器示例

知识点详解

1. Flutter 简介

概念：

• Google 开源的 UI 工具包
• 用于构建跨平台应用（iOS、Android、Web、桌面）
• 使用 Dart 语言开发

优势：

• 高性能（原生编译）
• 丰富的组件库
• 热重载功能
• 单一代码库多平台部署

2. 开发环境配置

必备工具：

• Flutter SDK
• Android Studio 或 VS Code
• Android SDK（如果需要构建 Android 应用）
• Xcode（如果需要构建 iOS 应用，仅限 macOS）

开始操作

下面稍微有点复杂如果 没耐心 可以简单3步骤

======= 懒人方法开始=======

1、下载压缩文件（可以找我要）

https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.38.4-stable.zip?_gl=1*1rxw3t6*_ga*ODQ2NDg3MzUxLjE3NjQ5OTMzMDQ.*_ga_HPSFTRXK91*czE3NjQ5OTMzMDQkbzEkZzEkdDE3NjQ5OTUwNTEkajU5JGwwJGgw

2、解压到一个非中文目录
3、将bin文件夹添加到环境变量

======= 懒人方法结束=======

1.安装dart sdk:不用安装了直接安装下面的flutter里面带

2下载Flutter SDK

https://docs.flutter.cn/community/china/
访问这个网址，往下拉，看到这样的教程

以下步骤需要使用 PowerShell。

1在 PowerShell 中打开新窗口，准备运行 shell 命令。

2将 PUB_HOSTED_URL 设置为镜像站点。
$ $env:PUB_HOSTED_URL="https://pub.flutter-io.cn"

3将 FLUTTER_STORAGE_BASE_URL 设置为镜像站点。
$ $env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

4从镜像站点下载 Flutter 压缩包。

例如：要获取 CFUG 的 Flutter SDK，请访问 Flutter SDK 归档列表，并下载适用于你的平台和架构的 SDK。

1-3步骤按照教程执行命令

第4步从镜像站点下载下载地址是，下载不了找我要我存的有

https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.38.4-stable.zip?_gl=1*1rxw3t6*_ga*ODQ2NDg3MzUxLjE3NjQ5OTMzMDQ.*_ga_HPSFTRXK91*czE3NjQ5OTMzMDQkbzEkZzEkdDE3NjQ5OTUwNTEkajU5JGwwJGgw

5将压缩文件解压，并放到英文目录下相当于安装位置例如：D:\flutter

d:\flutter

6将flutter的bin目录添加到环境变量中

1. 打开系统设置
2. 点击高级系统设置
3. 点击环境变量
4. 在系统变量中添加
5. 在path中添加d:/flutter/bin

7配置镜像站点-清华

$env:PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub";
$env:FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"

8运行看下安装成功没有

flutter --version

不报错就是成功了，我的输入如下

Flutter 3.38.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 66dd93f9a2 (2 days ago) • 2025-12-03 14:56:10 -0800
Engine • hash 360877569ab6632a564a0a8a815b2e0fe5ae294a (revision a5cb96369e) (2 days ago) • 2025-12-03 20:56:06.000Z
Tools • Dart 3.10.3 • DevTools 2.51.1

9环境检查，运行命令看是否有正常的环境

flutter doctor -v

如果出现了网络连接错误，你需要添加下面环境变量来访问镜像站点,报错信息如下类似

[!] Network resources [21.2s]
✗ A cryptographic error occurred while checking "https://storage.googleapis.com/": Connection terminated during
handshake
You may be experiencing a man-in-the-middle attack, your network may be compromised, or you may have malware
installed on your computer.
✗ A network error occurred while checking "https://maven.google.com/": 信号灯超时时间已到

这个时候你需要添加两个环境变量就可以了

打开环境变量设置：
按 Win 键，输入“环境变量”，选择 “编辑系统环境变量”。
点击右下角的 “环境变量” 按钮。
新建用户变量（上面的那一栏）：
点击 “新建”，分别添加以下两条变量：

变量名: PUB_HOSTED_URL
变量值: https://pub.flutter-io.cn
变量名: FLUTTER_STORAGE_BASE_URL
变量值: https://storage.flutter-io.cn
保存 重新启动命令行窗口：

重要：关闭你当前的命令行窗口（CMD、PowerShell 或 VS Code），然后重新打开一个新的，以便配置生效。_

然后再次运行flutter doctor -v命令出现下面就是成功了

    • All expected network resources are available.

其它的错误

flutter doctor -v命令出现下面错误 例如

[✗] Android toolchain - develop for Android devices [45ms]
    ✗ Unable to locate Android SDK

或者

[✗] Visual Studio - develop Windows apps [14ms]
    ✗ Visual Studio not installed; this is necessary to develop Windows apps.

暂时先不用管，只有有web的就行，类似于下面这种，我用的是chrome，其它浏览器一样

[✓] Chrome - develop for the web [15ms]
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

======================

创建第一个 Flutter 应用

找一个目录英文的，中文的好像不行，例如D:/flutter_project

# flutter create myflutter # 这个会创建win、ios、android、linux、mac等平台的目录如果只需要web用下面命令
flutter create --platforms web myflutter

会得到至少有以下文件的结构

├── lib/
│   └── main.dart          # 应用入口文件(主要用这个)
├── pubspec.yaml           # 项目配置文件
├── test/                  # 测试文件
└── web/                   # 平台特定代码

然后启动前端

cd myflutter
flutter run -d chrome

就会出现一个浏览器打开，然后就可以看到一个计数器了
如何用代码表示出来flutter的经典web页面

======================
Flutter Demo Home Page

      0


                +

======================

点击加号就能显示点击的次数了