📌 本文记录我第一次使用 Flutter 时的本地环境搭建过程,包括 SDK 安装、环境变量配置、遇到的问题及解决方案,适合刚入门 Flutter 的开发者参考。
🧱 一、我的开发环境
- 系统环境:macOS 15.2(Sequoia)
- Flutter SDK:3.32.8(stable channel)
- IDE:VS Code(也支持 Android Studio)
- Node.js:已安装(辅助工具链)
📦 二、下载并安装 Flutter SDK
✅ 步骤 1:下载 Flutter SDK
从官方获取最新稳定版本:
下载 flutter_macos_3.32.8-stable.zip
并解压:
bash
cd ~/Downloads
unzip flutter_macos_3.32.8-stable.zip -d ~/development
建议路径为 ~/development/flutter
✅ 步骤 2:添加环境变量
打开终端,编辑 ~/.zshrc
文件:
bash
nano ~/.zshrc
在末尾添加:
bash
export PATH="$PATH:$HOME/development/flutter/bin"
保存并刷新:
bash
source ~/.zshrc
✅ 三、验证安装
在终端运行:
bash
flutter doctor
确保各项依赖都准备好(Android SDK、Xcode、模拟器等),若有报错按提示安装。
💡 四、创建并运行项目
bash
flutter create my_app
cd my_app
flutter run -d chrome # 运行 Web
flutter run -d macos # 运行桌面
也可使用 VS Code 启动调试(需安装 Flutter 插件)。
🧠 五、遇到的常见问题及解决
❗ 问题:Web 模式字体加载失败,文字不显示
bash
Failed to load font Noto Sans HK ...
📌 原因:
Flutter Web 默认会从 Google Fonts 加载字体(如 Noto Sans、Roboto 等)。在一些网络环境(如公司内网)中,访问 fonts.gstatic.com
失败,导致文字内容不显示。
✅ 解决方法:
在 MaterialApp
中添加字体配置,使用系统字体避免网络加载:
php
theme: ThemeData(
fontFamily: 'Arial',
textTheme: const TextTheme(
bodyMedium: TextStyle(
fontFamilyFallback: ['PingFang SC', 'Helvetica', 'sans-serif'],
color: Colors.black,
),
),
)
✅ 常用命令速查
bash
flutter doctor # 检查环境
flutter create my_app # 创建项目
flutter run -d chrome # 运行 Web 应用
flutter run -d macos # 运行桌面
flutter devices # 查看设备列表
如你也准备尝试 Flutter,建议直接从 Web 或桌面版入手,不需要配置模拟器也能快速看到效果。
后续我会继续记录 Flutter 的组件开发、状态管理和平台适配部分,欢迎关注 👋