当前位置： 首页 > news >正文

Flutter 开发环境配置教程

news 2025/11/3 8:20:56

Flutter 开发环境配置教程（macOS & Windows）

Flutter 是 Google 推出的跨平台 UI 框架，可快速构建 iOS、Android、Web、Desktop 应用。本教程将分系统详细讲解环境配置步骤，包含前置依赖、Flutter 安装、编辑器配置及环境验证，适用于零基础开发者。

一、通用前置知识

在开始配置前，需了解以下核心概念：

  • Flutter SDK：包含 Flutter 框架、命令行工具（flutter）、编译工具链的核心包。
  • Dart 语言：Flutter 的开发语言，SDK 已内置 Dart，无需单独安装。
  • 目标平台依赖：
    • 开发 iOS 需 macOS 系统 + Xcode；
    • 开发 Android 需 Windows/macOS + Android Studio；
    • 开发 Web/Desktop 需额外启用 Flutter 对应平台支持。

二、macOS 系统配置步骤

2.1 检查前置依赖

  1. 系统版本要求：macOS 10.15（Catalina）及以上（建议升级到最新稳定版）。
  2. 安装 Homebrew（包管理工具，可选但推荐）：
    打开「终端」，执行以下命令（若已安装可跳过）：
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    安装完成后，验证是否成功：
    brew --version  # 输出 Homebrew 版本即正常
  3. 安装 Git（版本控制工具，Flutter 依赖）：
    方式 1：通过 Homebrew 安装（推荐）：
    brew install git
    方式 2：安装 Xcode 后自动附带 Git（若后续需开发 iOS，建议直接安装 Xcode）。
    验证：git --version（输出 Git 版本即正常）。

2.2 下载并安装 Flutter SDK

  1. 下载 SDK：
    访问 Flutter 官网下载页，下载最新稳定版（Stable Channel）的 Flutter SDK 压缩包（如 flutter_macos_3.22.2-stable.zip）。

  2. 解压 SDK 到指定目录：
    建议将 SDK 放在用户目录下（如 ~/development/flutter，避免中文/空格路径）：

    • 打开「终端」，执行命令创建目录并解压（需替换压缩包路径）：
      mkdir -p ~/development  # 创建文件夹
unzip ~/Downloads/flutter_macos_3.22.2-stable.zip -d ~/development/  # 解压到目标目录

  3. 配置环境变量（关键步骤）：
    Flutter 命令需通过终端全局调用，需将 SDK 的 bin 目录添加到系统 PATH：

    1. 打开电脑根目录终端配置文件（根据 Shell 类型选择，默认 macOS 12+ 为 Zsh，文件是 ~/.zshrc；旧版为 Bash，文件是 ~/.bash_profile）：
      # Zsh 用户（推荐）
open ~/.zshrc
# 或 Bash 用户
open ~/.bash_profile
#或者使用vscode打开编辑
sudo code ~/.zshrc #zsh用户
sudo code ~/.bash_profile #bash用户
    2. 在文件末尾添加以下内容（指定 Flutter SDK 路径）：
      export PATH="$PATH:$HOME/development/flutter/bin"
      包管理镜像
      export PUB_HOSTED_URL=https://pub.flutter-io.cn
      资源存储镜像
      export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    3. 保存文件并生效配置：
      # Zsh 用户
source ~/.zshrc
# 或 Bash 用户
source ~/.bash_profile
    4. 验证环境变量：
      echo $PATH  # 输出中包含 "~/development/flutter/bin" 即正常
flutter --version  # 输出 Flutter 和 Dart 版本即成功（首次执行可能需要几秒）

2.3 配置目标平台依赖

2.3.1 配置 Android 开发环境（可选，开发 Android 需配置）

  1. 安装 Android Studio：
    访问 Android Studio 官网，下载 macOS 版本并安装（过程中默认勾选「Android SDK」「Android SDK Platform-Tools」「Android SDK Build-Tools」）。

  2. 安装 Android SDK 组件：
    打开 Android Studio，进入「Configure > SDK Manager」：

    • 勾选「SDK Platforms」中的 Android 14（UpsideDownCake）（或最新稳定版）；
    • 勾选「SDK Tools」中的 Android SDK Build-Tools 34（需与 Flutter 要求匹配，后续 flutter doctor 会提示）、Android Emulator、Android SDK Command-line Tools（latest）；
    • 点击「Apply」安装，需等待几分钟（建议保持网络稳定，可配置国内镜像加速）。

  3. 配置 Android 环境变量：

    1. 打开终端配置文件（~/.zshrc 或 ~/.bash_profile），添加以下内容（替换 [你的用户名] 为实际 macOS 用户名）：
      export ANDROID_HOME="$HOME/Library/Android/sdk"
export PATH="$PATH:$ANDROID_HOME/platform-tools"
export PATH="$PATH:$ANDROID_HOME/tools"
export PATH="$PATH:$ANDROID_HOME/tools/bin"
    2. 生效配置：source ~/.zshrc（或 source ~/.bash_profile）。
2.3.2 配置 iOS 开发环境（可选，开发 iOS 需配置）

  1. 安装 Xcode：
    打开「App Store」，搜索并安装 Xcode（约 10GB+，需 Apple ID，建议预留足够磁盘空间）。

  2. 安装 Xcode 命令行工具：
    打开终端，执行：

    xcode-select --install

    弹出安装窗口后点击「安装」，完成后验证：

    xcode-select -p  # 输出 "/Applications/Xcode.app/Contents/Developer" 即正常

  3. 配置 iOS 模拟器：
    打开 Xcode，进入「Xcode > Settings > Locations」，确保「Command Line Tools」选择已安装的 Xcode 版本（如 Xcode 15.0）。
    后续可通过 Flutter 命令启动模拟器：open -a Simulator。

2.4 配置编辑器（VS Code 或 Android Studio）

2.4.1 VS Code（轻量，推荐新手）
  1. 下载并安装 VS Code for macOS。
  2. 打开 VS Code，安装以下插件：
    • Flutter（官方插件，提供代码补全、调试、运行功能）；
    • Dart（Flutter 依赖的语言插件，通常会随 Flutter 插件自动安装）。
  3. 验证插件：打开 VS Code 终端（「终端 > 新建终端」），执行 flutter --version，若正常输出则插件生效。
2.4.2 Android Studio（功能全，适合复杂开发）
  1. 打开 Android Studio，进入「Plugins」（左侧菜单或「Configure > Plugins」）；
  2. 搜索并安装 Flutter 插件，安装过程中会提示自动安装 Dart 插件；
  3. 重启 Android Studio，插件生效。

2.5 验证 macOS 环境配置

打开终端，执行 Flutter 环境检查命令：

flutter doctor
  • 若输出 No issues found!，说明环境配置完全正常；
  • 若有警告（如「Android license status unknown」），按提示执行修复命令（如 flutter doctor --android-licenses，一路输入 y 确认）；
  • 若有缺失依赖（如 Xcode 未安装），根据提示补装对应工具。

三、Windows 系统配置步骤

3.1 检查前置依赖

  1. 系统版本要求：Windows 10 64 位（专业版/家庭版）及以上，关闭「S 模式」（若开启，需在「设置 > 应用 > Microsoft Store > 应用安装选项」中关闭）。
  2. 安装 Git（版本控制工具）：
    访问 Git 官网，下载 64 位版本（默认 Git-2.45.1-64-bit.exe）；
    安装时保持默认选项（关键：勾选「Add Git to PATH」，确保 Git 可全局调用）；
    验证：打开「命令提示符（CMD）」或「PowerShell」，执行 git --version，输出 Git 版本即正常。

3.2 下载并安装 Flutter SDK

  1. 下载 SDK：
    访问 Flutter 官网下载页，下载最新稳定版的 Flutter SDK 压缩包（如 flutter_windows_3.22.2-stable.zip）。

  2. 解压 SDK 到指定目录：
    建议解压到 非中文、无空格 的路径（如 C:\development\flutter，避免 C:\用户\张三\flutter 这类路径）：

    • 右键压缩包 > 「解压到当前文件夹」，将解压后的 flutter 文件夹移动到 C:\development\。

  3. 配置环境变量（关键步骤）：
    需将 Flutter SDK 的 bin 目录添加到系统 PATH，分「用户变量」和「系统变量」（推荐配置用户变量，无需管理员权限）：

    1. 打开环境变量设置：
      • 按下 Win + R，输入 sysdm.cpl 并回车；
      • 切换到「高级」选项卡 > 点击「环境变量」。
    2. 配置用户变量：
      • 在「用户变量」下找到「Path」，点击「编辑」>「新建」；
      • 输入 Flutter bin 目录路径（如 C:\development\flutter\bin），点击「确定」保存。
    3. 验证环境变量：
      • 关闭所有已打开的 CMD/PowerShell，重新打开一个；
      • 执行 flutter --version，输出 Flutter 和 Dart 版本即成功（首次执行可能需要几秒，会自动下载 Dart 依赖）。

3.3 配置目标平台依赖（Windows 仅支持 Android/Web/Desktop）

3.3.1 配置 Android 开发环境（核心，开发 Android 需配置）

  1. 安装 Android Studio：
    访问 Android Studio 官网，下载 Windows 版本（如 android-studio-2023.1.1.26-windows.exe）；
    安装时勾选「Android SDK」「Android SDK Platform-Tools」「Android SDK Build-Tools」，路径建议默认（如 C:\Users\[你的用户名]\AppData\Local\Android\Sdk）。

  2. 安装 Android SDK 组件：
    打开 Android Studio，进入「Configure > SDK Manager」：

    • 「SDK Platforms」：勾选 Android 14（UpsideDownCake）（或最新稳定版）；
    • 「SDK Tools」：勾选 Android SDK Build-Tools 34、Android Emulator、Android SDK Command-line Tools（latest）；
    • 点击「Apply」安装，过程中若提示「SDK License Agreement」，勾选同意并继续（建议配置国内镜像加速，避免下载失败）。

  3. 配置 Android 环境变量：

    1. 打开环境变量设置，在「用户变量」下点击「新建」：
      • 变量名：ANDROID_HOME；
      • 变量值：Android SDK 路径（默认是 C:\Users\[你的用户名]\AppData\Local\Android\Sdk，可在 Android Studio 的 SDK Manager 中查看）。
    2. 编辑「用户变量」中的「Path」，添加以下 3 条路径：
      • %ANDROID_HOME%\platform-tools；
      • %ANDROID_HOME%\tools；
      • %ANDROID_HOME%\tools\bin。
    3. 保存后关闭环境变量窗口，重启 CMD/PowerShell 使配置生效。
3.3.2 配置 Windows Desktop 开发环境（可选）

若需开发 Windows 桌面应用，需安装 Visual Studio 2022（社区版免费）：

  1. 访问 Visual Studio 官网，下载「Visual Studio 2022 社区版」；
  2. 安装时勾选「使用 C++ 的桌面开发」 workload（无需其他组件）；
  3. 安装完成后，执行 flutter config --enable-windows-desktop 启用 Windows 平台支持。

3.4 配置编辑器（VS Code 或 Android Studio）

3.4.1 VS Code（轻量，推荐新手）
  1. 下载并安装 VS Code for Windows（选择 64 位版本）；
  2. 打开 VS Code，安装「Flutter」和「Dart」插件（步骤同 macOS，搜索插件名称并安装）；
  3. 验证：打开 VS Code 终端，执行 flutter --version，正常输出即生效。
3.4.2 Android Studio（功能全）
  1. 打开 Android Studio，进入「Plugins」（左侧菜单或「File > Settings > Plugins」）；
  2. 搜索并安装「Flutter」插件（自动附带 Dart 插件）；
  3. 重启 Android Studio，插件生效。

3.5 验证 Windows 环境配置

打开 CMD 或 PowerShell，执行环境检查命令：

flutter doctor
  • 若输出 No issues found!，环境配置正常；
  • 若提示「Android license status unknown」，执行 flutter doctor --android-licenses，一路输入 y 确认授权；
  • 若提示「Visual Studio 未安装」（仅开发 Windows 桌面需处理），按提示补装 Visual Studio 2022 及对应 workload。

四、创建第一个 Flutter 项目（跨系统通用）

环境配置完成后，通过以下步骤创建并运行第一个项目，验证环境可用性：

  1. 打开终端/CMD/PowerShell，进入目标目录（如 cd ~/projects 或 cd C:\projects）；
  2. 创建 Flutter 项目：
    flutter create my_first_flutter_app  # 项目名需小写，用下划线分隔
  3. 进入项目目录：
    cd my_first_flutter_app
  4. 运行项目（需先启动模拟器或连接真机）：
    • 启动 Android 模拟器：打开 Android Studio > 「Tools > Device Manager」> 点击模拟器右侧「启动」按钮；
    • 运行项目：
      flutter run
  5. 验证结果：
    • 若模拟器中出现 Flutter 默认的「计数器应用」（可点击加号按钮增加数字），说明环境完全正常；
    • 按 q 键可退出运行。

五、常见问题解决

  1. Flutter 下载慢/失败：
    配置国内镜像（在终端/CMD 执行，临时生效；永久生效需添加到环境变量）：

    • macOS：export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    • Windows：set PUB_HOSTED_URL=https://pub.flutter-io.cn set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

  2. Android 模拟器启动失败：

    • 检查是否开启「虚拟化技术」（进入 BIOS 开启，不同主板快捷键不同，通常是 F2/F10/F12）；
    • 若提示「HAXM 未安装」，在 Android Studio 的 SDK Tools 中勾选「Intel x86 Emulator Accelerator (HAXM installer)」并安装。

  3. flutter doctor 提示「Xcode 版本过低」（macOS）：
    打开 App Store 更新 Xcode 到最新稳定版，或在 Xcode 官网下载对应版本。

通过以上步骤，即可完成 macOS 或 Windows 系统的 Flutter 开发环境配置，后续可专注于应用开发。

http://www.dtcms.com/a/561265.html

相关文章：

  • Go Gorm 深度解析：从内部原理到实战避坑指南
  • 保定企业建网站房产网站运营方案
  • 机械动力的能力
  • 山西省旅游网站建设分析廊坊网站制作网站
  • 【YashanDB认证】之二：Docker部署一体YashanDB(YDC,YCM)
  • C语言刷题（一）
  • 电子电气架构（EEA）最新调研-5
  • 【软考架构】案例分析-对比MySQL查询缓存与Memcached
  • 「经典图形题」集合 | C/C++
  • IT4IT是由The Open Group提出的面向数字化转型的IT管理参考架构框架
  • 学校网站怎么做的好南翔做网站公司
  • 解决 CentOS 8 报错：Failed to download metadata for repo ‘BaseOS‘
  • VS Code集成googletest-C/C++单元测试Windows
  • Vue 图片性能优化双剑客：懒加载与自动压缩实战指南
  • 网站之家查询qq空间网站是多少
  • Elasticsearch 与 Faiss 联合驱动自动驾驶场景检索：高效语义匹配 PB 级视频数据
  • 短租网站开发学术ppt模板免费
  • 设计模式——单例模式(singleton)
  • 【计算机软件资格考试】软考综合知识题高频考题及答案解析1
  • 计算机网络自顶向下方法25——运输层 TCP流量控制 连接管理 “四次挥手”的优化
  • LeetCode【高频SQL基础50题】
  • 清远做网站的有哪些wordpress判断浏览器
  • 自己做的网站怎样才有网址浏览找人做网站域名怎么过户
  • JavaScript中的闭包：原理与实战
  • 怎么看一个网站是否被k怎么找项目
  • 交易网站开发做的比较好的p2p网站
  • JavaScript异步编程：从回调地狱到优雅解决方案
  • 【MATLAB】matlab闪退问题（随时更新）
  • 有专门做最佳推荐的网站东莞网站制作十年乐云seo
  • React中的stopPropagation和preventDefault