flutter学习第 1 节：Flutter 简介与环境搭建

叽哥
343 阅读7分钟

Flutter 已经成为跨平台应用开发的热门框架，本节课将带你了解 Flutter 的基本概念、优势，并详细讲解如何在不同操作系统上搭建完整的开发环境，为后续的 Flutter 开发打下基础。

一、什么是 Flutter？

Flutter 是 Google 于 2017 年推出的开源 UI 软件开发工具包（SDK），用于构建高性能、高保真的跨平台应用。它允许开发者使用单一代码库构建在 Android、iOS、Windows、macOS、Linux 以及 Web 平台上运行的应用。

Flutter 的核心特点是：

  • 单一代码库：一次编写，多平台运行
  • 自绘 UI：不依赖平台原生控件，而是自己绘制界面，保证多平台一致性
  • 高性能：接近原生应用的性能，60fps（每秒帧数）的平滑滚动
  • 热重载：快速查看代码更改效果，开发效率极高
  • 丰富的组件库：提供大量现成的 Material Design 和 Cupertino（iOS 风格）组件

二、跨平台优势与应用场景

跨平台开发的优势

  1. 开发效率高

    • 一套代码运行在多个平台，减少开发和维护成本
    • 热重载功能让开发者几乎实时看到代码更改效果

  2. UI 一致性

    • 在不同平台上保持一致的用户体验和视觉效果
    • 避免因平台原生控件差异导致的界面不一致问题

  3. 性能优异

    • 相比 React Native 等桥接技术，Flutter 直接编译为原生代码
    • 自绘 UI 引擎减少了跨平台通信开销

  4. 社区支持强大

    • Google 官方支持和持续更新
    • 丰富的第三方库和插件生态系统

典型应用场景

  1. 创业公司产品：快速验证产品想法，降低初期开发成本
  2. 内部企业应用：需要在多平台部署，功能相对固定的工具类应用
  3. 内容展示类应用：新闻、电商、博客等以 UI 展示为主的应用
  4. MVP（最小可行产品） ：快速开发产品原型，进行市场测试
  5. 需要高度定制 UI 的应用：Flutter 的自绘引擎可以实现复杂的 UI 效果

知名应用如阿里巴巴、腾讯、Google Ads、BMW 等都采用了 Flutter 开发部分或全部功能。


三、开发环境配置

Flutter 开发环境需要安装多个组件，不同操作系统的配置步骤略有差异。

1. Windows 系统配置

步骤 1：安装 Flutter SDK

  1. 访问 Flutter 官网下载页面：flutter.dev/docs/get-st…

  2. 下载最新的 Flutter SDK 压缩包

  3. 解压到你希望安装的目录（例如：C:\src\flutter）

  4. 配置环境变量：

    • 打开「控制面板 > 系统和安全 > 系统 > 高级系统设置 > 环境变量」
    • 在用户变量中找到 Path，点击「编辑」
    • 点击「新建」，添加 Flutter 的 bin 目录路径（例如：C:\src\flutter\bin）
    • 点击「确定」保存设置

步骤 2：安装 Android Studio

  1. 下载 Android Studio：developer.android.com/studio
  2. 运行安装程序，按照向导进行安装
  3. 首次启动时，会提示安装 Android SDK、Android SDK Platform、Android Virtual Device 等组件，全部勾选安装

步骤 3：配置 Android 环境

  1. 启动 Android Studio

  2. 打开「File > Settings > Appearance & Behavior > System Settings > Android SDK」

  3. 确保安装了与你的目标设备对应的 Android 版本

  4. 配置 Android 环境变量：

    • 新建系统变量 ANDROID_HOME，值为你的 Android SDK 路径（通常为 C:\Users\你的用户名\AppData\Local\Android\Sdk）
    • 将 %ANDROID_HOME%\platform-tools 添加到 Path 变量

2. macOS 系统配置

步骤 1：安装 Flutter SDK

  1. 访问 Flutter 官网下载页面：flutter.dev/docs/get-st…

  2. 下载最新的 Flutter SDK 压缩包

  3. 解压到你希望安装的目录（例如：~/development/flutter）

  4. 配置环境变量：

    • 打开终端，输入 open ~/.bash_profile 或 open ~/.zshrc（取决于你使用的 shell）
    • 添加以下内容：export PATH="$PATH:~/development/flutter/bin"
    • 保存文件，运行 source ~/.bash_profile 或 source ~/.zshrc 使配置生效

步骤 2：安装 Android Studio

  1. 下载 Android Studio：developer.android.com/studio
  2. 将下载的 android-studio-ide-xxx-mac.dmg 文件打开，拖到 Applications 文件夹
  3. 首次启动时，安装推荐的组件

步骤 3：安装 Xcode（开发 iOS 应用必需）

  1. 打开 App Store，搜索并安装 Xcode（约 10GB 以上，需要 Apple ID）
  2. 安装完成后，打开 Xcode，同意许可协议
  3. 安装 Xcode 命令行工具：
xcode-select --install
  1. 确保 Xcode 许可协议已签署：
sudo xcodebuild -license accept

四、配置模拟器 / 真机调试环境

配置 Android 模拟器

  1. 启动 Android Studio
  2. 点击欢迎界面的「Configure > AVD Manager」
  3. 点击「Create Virtual Device」
  4. 选择一个设备型号（如 Pixel 6），点击「Next」
  5. 选择一个系统镜像（建议选择带有 Google APIs 的版本），点击「Download」下载
  6. 下载完成后，点击「Next」，然后点击「Finish」创建模拟器
  7. 点击模拟器操作栏中的「启动」按钮运行模拟器

配置 iOS 模拟器（仅 macOS）

  1. 打开 Xcode
  2. 点击「Xcode > Open Developer Tool > Simulator」
  3. 首次启动可能需要几分钟时间
  4. 可以通过「Hardware > Device」菜单选择不同的设备和 iOS 版本

配置真机调试

Android 真机

  1. 在 Android 设备上，打开「设置 > 关于手机」
  2. 连续点击「版本号」7 次，开启开发者模式
  3. 返回设置，进入「开发者选项」
  4. 启用「USB 调试」和「安装应用通过 USB」选项
  5. 用 USB 数据线连接手机和电脑
  6. 在手机上出现的授权提示中，勾选「始终允许这台计算机」并点击「允许」

iOS 真机（仅 macOS）

  1. 用 USB 数据线连接 iPhone 和 Mac

  2. 打开 Xcode，点击「Xcode > Preferences > Accounts」

  3. 添加你的 Apple ID（免费账号也可以用于调试）

  4. 在 Xcode 中打开 Flutter 项目的 ios 目录（ios/Runner.xcworkspace）

  5. 在项目设置中，选择你的设备作为运行目标

  6. 首次运行时，需要在 iPhone 上信任开发者证书：

    • 打开 iPhone 的「设置 > 通用 > 设备管理」
    • 选择你的 Apple ID，点击「信任」

五、验证环境：flutter doctor 命令解析与问题解决

flutter doctor 是 Flutter 提供的一个非常有用的命令，用于检查开发环境是否配置正确。

运行 flutter doctor

  1. 打开终端（Windows 用命令提示符或 PowerShell）
  2. 输入以下命令：
flutter doctor
  1. 命令会检查所有必要的组件，并显示检查结果

输出结果解析

命令输出会以列表形式展示各个组件的状态：

  • ✅ 表示组件已正确安装和配置
  • ❌ 表示组件缺失或配置错误
  • ⚠️ 表示存在警告，可能影响部分功能

典型的成功输出如下：

[✓] Flutter (Channel stable, 3.10.0, on macOS 13.3.1 22E261 darwin-arm64, locale zh-Hans-CN)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.2)
[✓] Connected device (3 available)
[✓] Network resources

常见问题及解决方法

  1. Android license status unknown
flutter doctor --android-licenses

然后按提示输入 y 接受所有许可协议

  1. Android Studio 相关问题

    • 确保安装了 Flutter 和 Dart 插件：
      在 Android Studio 中，进入「File > Settings > Plugins」，搜索并安装「Flutter」插件（会自动安装 Dart 插件）

  2. Xcode 相关问题

    • 确保 Xcode 已正确安装并更新到最新版本
    • 运行 sudo xcode-select -s /Applications/Xcode.app/Contents/Developer 配置 Xcode 路径

  3. 连接设备未检测到

    • 确保设备已开启调试模式
    • 尝试重新连接设备
    • 重启 adb 服务（Android）：
    adb kill-server
adb start-server

  4. 网络问题

    • Flutter 可能需要访问 Google 服务，如果网络受限，可以配置镜像：
    # 临时配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

# 永久配置（macOS/Linux）
echo 'export PUB_HOSTED_URL=https://pub.flutter-io.cn' >> ~/.bash_profile
echo 'export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn' >> ~/.bash_profile
source ~/.bash_profile

六、集成开发环境（IDE）选择

虽然 Flutter 可以使用任何文本编辑器开发，但推荐使用以下 IDE 以获得更好的开发体验：

  1. Android Studio

    • Google 官方 IDE，对 Flutter 支持完善
    • 内置模拟器管理、调试工具
    • 提供代码补全、重构、语法高亮等功能

  2. Visual Studio Code

    • 轻量级编辑器，启动速度快
    • 需要安装 Flutter 和 Dart 插件
    • 支持热重载、调试等核心功能
    • 跨平台，在 Windows、macOS 和 Linux 上体验一致

  3. IntelliJ IDEA

    • 与 Android Studio 基于同一平台，功能类似
    • 社区版免费，旗舰版需要付费
    • 同样需要安装 Flutter 和 Dart 插件
avatar
文章
阅读
粉丝