清晰易懂的 Flutter 开发环境搭建教程

发布于:2025-04-04 ⋅ 阅读:(39) ⋅ 点赞:(0)

Flutter 是 Google 推出的跨平台应用开发框架,支持 iOS/Android/Web/桌面应用开发。本教程将手把手教你完成 Windows/macOS/Linux 环境下的 Flutter 安装与配置,从零到运行第一个应用,全程避坑指南!


一、安装 Flutter SDK

1. 下载 Flutter SDK

  1. 访问官网下载页面:https://flutter.dev/docs/get-started/install
  2. 根据系统选择安装包:
    • Windowsflutter_windows_3.xx.x-stable.zip
    • macOSflutter_macos_3.xx.x-stable.zip
    • Linuxflutter_linux_3.xx.x-stable.tar.xz

2. 解压并配置环境变量

  1. 将压缩包解压到目标目录(建议路径无空格和中文):
    • WindowsC:\src\flutter
    • macOS/Linux~/development/flutter
  2. 配置环境变量:
    • Windows
      • 右键“此电脑” → 属性 → 高级系统设置 → 环境变量 → 编辑 Path → 添加 C:\src\flutter\bin
    • macOS/Linux
      echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bashrc  # 或 ~/.zshrc
      source ~/.bashrc
      

3. 验证安装

flutter --version
# 输出示例:Flutter 3.13.9 • channel stable • ...

二、安装平台依赖

1. Windows 用户

  1. 安装 Android Studio
    • 勾选 Android SDKAndroid EmulatorAndroid SDK Platform-Tools
  2. 安装 Visual Studio
    • 勾选 “使用 C++ 的桌面开发”(用于 Windows 桌面应用编译)

2. macOS 用户

  1. 安装 Xcode:
    xcode-select --install  # 安装命令行工具
    sudo xcodebuild -license  # 接受 Xcode 许可协议
    
  2. 安装 CocoaPods(iOS 依赖管理):
    sudo gem install cocoapods
    

3. Linux 用户

sudo apt-get install clang cmake ninja-build libgtk-3-dev

三、配置 Android 开发环境

1. 安装 Android Studio

  1. 下载并安装 Android Studio
  2. 打开 Android Studio → 安装 FlutterDart 插件:
    • File → Settings → Plugins → 搜索安装

2. 配置 Android SDK

  1. 打开 Android Studio → Tools → SDK Manager
  2. 确保安装以下组件:
    • Android SDK 33+
    • Android SDK Platform-Tools
    • Android Emulator

3. 接受 Android 许可证

flutter doctor --android-licenses  # 按提示输入 y 确认

四、运行第一个 Flutter 应用

1. 创建项目

flutter create my_first_app
cd my_first_app

2. 启动模拟器

flutter emulators --launch Pixel_5_API_33  # 或连接真实设备

3. 运行应用

flutter run
# 看到手机屏幕显示 "Hello World" 即成功!

五、国内用户加速配置

1. 配置镜像环境变量

# Windows:在系统环境变量中添加
# macOS/Linux:添加到 ~/.bashrc 或 ~/.zshrc
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2. 切换 Flutter 国内镜像源

flutter channel stable
flutter config --enable-web
flutter config --android-sdk /path/to/android/sdk  # 指定 Android SDK 路径

六、新手必看:容易忽略的坑点

1. 未安装平台工具链

  • 现象flutter doctor 提示 Android toolchainXcode 未配置
  • 解决:根据提示安装对应组件(如 Android SDK Build-Tools)

2. 模拟器无法启动

  • 现象flutter emulators 列表为空
  • 解决:通过 Android Studio → AVD Manager 创建虚拟设备

3. iOS 编译失败(macOS)

  • 现象pod install 报错
  • 解决
    sudo arch -x86_64 gem install ffi  # Apple Silicon 芯片需额外步骤
    cd ios && pod install
    

4. 网络问题导致依赖下载失败

  • 现象flutter pub get 卡住
  • 解决
    • 确认镜像环境变量已配置
    • 使用代理工具(如 Clash)设置全局代理

七、开发工具推荐

工具 用途
VS Code 轻量级代码编辑器(安装 Flutter/Dart 插件)
Android Studio 官方 IDE,集成模拟器和调试工具
Xcode iOS 应用编译与发布(仅 macOS)

八、总结

通过本教程,你已经:

  1. 完成 Flutter SDK 安装与环境变量配置
  2. 配置 Android/iOS 开发环境
  3. 创建并运行首个 Flutter 应用
  4. 掌握国内加速配置方案

下一步建议

  • 学习 Dart 语言基础(官方文档
  • 尝试 Flutter Widget 库(Widget Catalog
  • 探索跨平台功能(如调用摄像头、访问网络)

遇到问题可查阅 Flutter 中文文档 或留言讨论! 🚀


网站公告

今日签到

点亮在社区的每一天
去签到