Flutter 学习笔记 - 搭建(macOS 版)

📌 本文记录我第一次使用 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

从官方获取最新稳定版本:

docs.flutter.dev/get-started...

下载 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 的组件开发、状态管理和平台适配部分,欢迎关注 👋

相关推荐
小码编匠24 分钟前
物联网数据大屏开发效率翻倍:Vue + DataV + ECharts 的标准化模板库
前端·vue.js·echarts
欧阳天风43 分钟前
分段渲染加载页面
前端·fcp
艾小码44 分钟前
TypeScript在前端的实践:类型系统助力大型应用开发
前端·typescript
今禾1 小时前
前端工程化的范式革命:从 Webpack 的“全量打包”到 Vite 的“按需编译”
前端·webpack·vite
Cache技术分享1 小时前
168. Java Lambda 表达式 - 专用比较器
前端·后端
颜漠笑年1 小时前
前端必看:img标签不可忽视的width与height属性
前端·html
GHOME1 小时前
Vue2知识点详细回顾(以及自己的一些思考和解答)-2
前端·vue.js·面试
摸着石头过河的石头1 小时前
大模型时代的前端开发新趋势
前端·javascript·ai编程
Bottle4141 小时前
ServiceWorker 报 MIME 类型错误
前端
吴楷鹏1 小时前
如何同时打开多个 Chrome 呢?
前端·chrome