flutter：环境搭建

运维与工具 vscode android studio xcode flutter
发布时间 :
字数:2.5k 阅读 :
  1. Android Studio
    1. 安装
    2. 配置
  2. XCode
    1. 安装
    2. 卸载Command Line Tools
    3. 安装cocoapods
    4. 安装最新的Ruby
    5. 配置pod的环境变量
    6. 启动模拟器
  3. Flutter SDK
    1. 安装SDK
    2. 配置环境变量
  4. VSCode
    1. 安装VSCode
    2. 创建一个项目
  5. 验证虚拟机是不是正常工作
    1. 选择虚拟机
      1. 测试Android
    2. IOS
  6. 测试Android Studio
    1. 安装插件
    2. 测试安卓的虚拟机
    3. 测试IOS

Android Studio

安装

Android Studio 是 Google 官方推出的 Android 应用开发集成环境（IDE），专门用于开发 Android 应用程序。它基于 IntelliJ IDEA（JetBrains 公司开发的强大 Java IDE）构建而成，提供了一整套适用于 Android 开发的工具。

官网：https://developer.android.com/studio/index.html?hl=zh-cn

一直点击下一步，下一步就可以。

配置

如果需要使用特殊版本的SDK：

另外需要选择一个command-line的工具

虚拟机的管理：

已经有一个人，如何还需要其他类型的，可以点击+新增：

然后点击Next

点击下载图标就可以下载了：

如果需要的话，在Additional settings里面还有许多额外配置

点击运行，看看是否可以正常运行：

跑起来的样子：

XCode

安装

Xcode 是 苹果开发者开发 App 的 唯一官方支持工具，包括：

  • 代码编辑器
  • UI 设计器（Storyboard / SwiftUI）
  • 模拟器（可以模拟各种 iPhone、iPad）
  • 构建系统（支持调试、打包、签名）
  • 调试工具（如内存分析器、性能工具 Instruments）

如果你要在 Mac 上开发原生 iOS 应用或运行模拟器，必须安装 Xcode。

你的目标 是否需要 Xcode 说明
原生 iOS 开发（用 Swift / Objective-C） ✅ 必须 不装 Xcode 就不能编译或运行
使用 Flutter 开发 iOS 应用 ✅ 需要安装 Xcode 虽然主要用 Flutter 编码，但打包/运行 iOS 模拟器需要 Xcode
使用 React Native、Unity 等跨平台框架 ✅ 同样需要 Xcode iOS 编译链都依赖 Xcode
仅做 Android 开发或 Web 开发 ❌ 不需要 可不安装，节省空间

下载XCode直接去苹果的应用商城下载就可以了

接着就是去安装了，安装的时候会遇到这个页面：意思是你正在选择 Xcode 要安装的“开发组件”，也就是开发某些平台所需的功能模块。

组件名称 说明 适合你选吗？
macOS development 用来开发 macOS App 的 ✅ 可以选（除非你完全不开发 mac App）
iOS development 开发 iPhone、iPad App 的必选组件 ✅ 必选！（Flutter iOS 开发必须）
tvOS development Apple TV 应用的开发环境 ⛔️ 不开发 Apple TV 可不选
watchOS development Apple Watch 应用的开发环境 ⛔️ 不开发手表应用可不选

卸载Command Line Tools

Command Line Tools（简称 CLT） 是 macOS 系统下为开发者提供的一套轻量级开发工具集，不需要安装完整 Xcode 就能使用一些基础开发功能。Command Line Tools 是从 Xcode 中提取出来的一套“轻量版工具”，供终端开发使用，不需要图形界面。

它们安装后大多位于：/Library/Developer/CommandLineTools

CLT 是为那些使用 终端（Terminal）开发 的开发者准备的。

  • 用 Homebrew 安装软件
  • 编译 C/C++ 工程
  • 运行 Git 命令
  • 开发一些轻量级脚本、程序
# 当你首次在 macOS 上运行某些开发命令（如 git 或 brew）时，系统会自动提示你安装 CLT：
xcode-select --install

# 查看是否安装成功，会输出：/Library/Developer/CommandLineTools
xcode-select -p

# 卸载：需要输入 Mac 的管理员密码
sudo rm -rf /Library/Developer/CommandLineTools

安装cocoapods

CocoaPods 是 macOS 和 iOS 开发中使用最广泛的依赖管理工具，它可以帮助你轻松地将第三方库（如网络请求库 AFNetworking、UI 库 SnapKit 等）集成到你的 Xcode 项目中。

它的本质是一个 包管理工具，类似于：

语言/平台 包管理器
Java Maven / Gradle
Node.js npm / yarn
Python pip
Flutter pub
iOS (Swift/Obj-C) ✅ CocoaPods

官网：https://cocoapods.org

# 安装命令：会要求输入密码
sudo gem install cocoapods
# 下面是报错的日志
ERROR:  Error installing cocoapods:
	The last version of securerandom (>= 0.3) to support your Ruby & RubyGems was 0.3.2. Try installing it with gem install securerandom -v 0.3.2 and then running the current command again
	securerandom requires Ruby version >= 3.1.0. The current ruby version is 2.6.10.210.
	
# 确认是否安装好了cocoapods

上面安装错误是因为 gem securerandom >= 0.3 只支持 Ruby ≥ 3.1，我的 macOS 自带 Ruby 是 2.6.10，太老了。

安装最新的Ruby

# 用 Homebrew 安装新版本 Ruby
brew install ruby

# 配置环境变量（添加到 ~/.zshrc 或 ~/.bash_profile）
echo 'export PATH="/usr/local/opt/ruby/bin:$PATH"' >> ~/.zshrc

# 重新加载配置
source ~/.zshrc

# 确认 Ruby 版本 ≥ 3.1
ruby -v

配置pod的环境变量

# 找到 pod 安装路径
sudo gem which cocoapods
/usr/local/lib/ruby/gems/3.4.0/gems/cocoapods-1.16.2/lib/cocoapods.rb


# 查找 pod 可执行文件所在目录
find /usr/local/lib/ruby/gems/3.4.0/ -name pod

/usr/local/lib/ruby/gems/3.4.0/bin/pod # 这个
/usr/local/lib/ruby/gems/3.4.0/gems/cocoapods-trunk-1.6.0/lib/pod
/usr/local/lib/ruby/gems/3.4.0/gems/cocoapods-plugins-1.0.0/lib/pod
/usr/local/lib/ruby/gems/3.4.0/gems/cocoapods-try-1.2.0/lib/pod
/usr/local/lib/ruby/gems/3.4.0/gems/cocoapods-1.16.2/bin/pod

# 正确添加 pod 命令到 PATH（环境变量）
echo 'export PATH="/usr/local/lib/ruby/gems/3.4.0/bin:$PATH"' >> ~/.zshrc
source ~/.zshrc

# 验证：如看到版本号，如1.16.2，说明已经配置好了环境，安装好了cocoapods
pod --version

启动模拟器

command+空格，然后搜索simulator

右键 —> Device : 可以选择机型

Flutter SDK

安装SDK

SDK（Software Development Kit）中文叫：软件开发工具包。它是一组帮助你“开发某个平台上的应用”的工具集合，通常包括：

组成 举例
编译器 编译源代码（如 dart, javac, clang）
运行时库 支持代码运行的基础库
调试器 找 bug 的工具（如 debugger）
文档 API 说明书、示例代码
工具 构建工具、打包工具、模拟器（某些 SDK 包含）

不同平台有不同的 SDK，例如：

  • Android SDK（开发 Android App）

  • iOS SDK（随 Xcode 提供）

  • Flutter SDK（开发跨平台 App）

  • Windows SDK（开发 Windows 应用）

JDK（Java Development Kit）是 Java 的官方 SDK。

Flutter SDK 是用于开发 Flutter 应用的一整套工具，包括：

模块 说明
Dart SDK 包括 Dart 编译器和运行环境
Flutter 框架 UI 组件、动画库、Material 设计组件
Flutter 工具链 flutter doctor, flutter build, flutter run 等命令
DevTools 性能分析、调试工具
示例代码 官方模板与文档示例

当你下载 Flutter SDK 时，其实也包含了 Dart SDK，这是开发 Flutter 的基础语言。

下载网址：https://docs.flutter.dev/install/manual。文件是一个`.zip`的压缩包。下载好之后，解压安装包就可以了。

配置环境变量

# 使用VSCode编辑 .zshrc； 或者用：vim ~/.zshrc 
code ~/.zshrc 


# 将下面内容粘贴进.zshrc
#----------------------------------环境变量的内容--------------------------------------#
# flutter sdk
export PATH=~/dev/SDK/flutter/bin:$PATH

# dart sdk
export PATH=~/dev/SDK/flutter/bin/cache/dart-sdk/bin:$PATH
export PATH=~/.pub-cache/bin:$PATH


# flutter-io 国内镜像: 如果需要的话
# export PUB_HOSTED_URL=https://pub.flutter-io.cn
# export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# android
export ANDROID_HOME=~/Library/Android/sdk
export PATH=${ANDROID_HOME}/platform-tools:$PATH
export PATH=${ANDROID_HOME}/tools:$PATH
#----------------------------------环境变量的内容--------------------------------------#


# 配置好之后，激活配置
source ~/.zshrc 


# 检查flutter是否正常
flutter doctor
#----------------------------------关键日志--------------------------------------#
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.8, on macOS 15.4.1 24E263 darwin-x64, locale en-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.4)
[✓] VS Code (version 1.102.3)
[✓] Connected device (3 available)            
[✓] Network resources

! Doctor found issues in 1 category.
#----------------------------------关键日志--------------------------------------#


# 接受协议：一直选择 y（接受就可以了）
flutter doctor --android-licenses


# 再次检查一遍：
flutter doctor 
#----------------------------------关键日志--------------------------------------#
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.8, on macOS 15.4.1 24E263 darwin-x64, locale en-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 36.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] IntelliJ IDEA Ultimate Edition (version 2023.3.4)
[✓] VS Code (version 1.102.3)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found! # 表明好了
#----------------------------------关键日志--------------------------------------#

VSCode

安装VSCode

直接去官网下载就可以了。

安装Flutter的插件

创建一个项目

使用Flutter: New Project创建一个项目

刚开始创建的时候，VSCode会报错，说找不到SDK。这是因为还没有配置。点击Locate SDK配置好就可以

接着，继续使用Flutter: New Project创建一个项目，VSCode会让你选择一个工作区，然后写Project Name.

写好Project Name，就创建好了

验证虚拟机是不是正常工作

选择虚拟机

在VSCode的右下角，可以选择当前的虚拟机

测试Android

点击运行Run and Debug：

运行的时候，报如下错误：

Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/xieshaolin/workpalce/flutterTest/flutter_demo/android/build.gradle.kts' line: 16

* What went wrong:
A problem occurred configuring project ':app'.
> [CXX1101] NDK at /Users/xieshaolin/Library/Android/sdk/ndk/26.3.11579264 did not have a source.properties file

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

BUILD FAILED in 1s

这个错误提示是：

[CXX1101] NDK at /Users/xieshaolin/Library/Android/sdk/ndk/26.3.11579264 did not have a source.properties file

你的 Flutter 项目在构建时找不到 NDK（Native Development Kit）的 source.properties 文件，说明：

⚠️ 这个 NDK 安装 不完整或已损坏，无法用于构建包含原生代码的 Android 项目（例如含 C/C++ 的依赖包）。

解决方法：删除损坏的 NDK，重新下载

  1. 查看有哪些 NDK：

    ls ~/Library/Android/sdk/ndk

26.3.11579264

  2. 删除损坏的 NDK

    rm -rf ~/Library/Android/sdk/ndk/26.3.11579264

  3. 打开Android Studio，找到SDK Manager

  4. 找到 SDK Tools，下载NDK(Side by side)

等我们再次点击运行Run and Debug，然后点击安卓虚拟机上的+号按钮，能够在对应断点停下来，说明环境目前没问题。

IOS

接着我们选择IPhone 16 这个模拟器

还是同样点击运行，然后点击+号，等够debug住，就说明环境没问题。

测试Android Studio

安装插件

用Android Studio打开上面用VSCode创建的那个项目

配置插件：安装Flutter插件

测试安卓的虚拟机

在右边的侧边栏就有地方可以启动Android的虚拟机

点击运行，可以正常运行就没有问题。

测试IOS

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1909773034@qq.com

赏

©2017 XieShaoLin

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏