Flutter + FastAPI 30天速成计划自用并实践-第8天

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

学习目标

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

知识点详解

1. Flutter 简介

概念：

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

优势：

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

2. Dart 语言基础

特点：

面向对象编程语言
类型安全（支持类型推断）
支持异步编程（async/await）
与 Flutter 深度集成

3. 开发环境配置

必备工具：

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

开始操作

1.安装dart sdk

win电脑打开win+x选择 powershell或者直接打开powershell

运行下面命令

bash 复制代码

   Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

运行完成后执行

bash 复制代码

choco --version

输出类似这样的版本号2.6.0

继续运行命令

bash 复制代码

choco install dart-sdk -y

等待下载和安装完成，这可能需要一些时间。

下载Flutter SDK

https://docs.flutter.cn/community/china/

访问这个网址，往下拉，看到这样的教程

bash 复制代码

以下步骤需要使用 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

bash 复制代码

d:\flutter

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

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

7配置镜像站点-清华

bash 复制代码

$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运行看下安装成功没有

bash 复制代码

flutter --version

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

bash 复制代码

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这样就安装成功啦，如果第4步下载不下来，就找我要下吧，我上传到了云盘

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

bash 复制代码

flutter doctor -v

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

bash 复制代码

[!] 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/": 信号灯超时时间已到

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

bash 复制代码

打开环境变量设置：
按 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，其它浏览器一样

bash 复制代码

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

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

创建第一个 Flutter 应用

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

bash 复制代码

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

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

bash 复制代码

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

然后启动前端

bash 复制代码

cd myflutter
flutter run -d chrome

就会出现一个浏览器打开，然后就可以看到一个计数器了

如何用代码表示出来flutter的经典web页面

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

Flutter Demo Home Page

复制代码

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

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