Flutter:在macOS上搭建Flutter开发环境

文章目录

    • 系统配置要求
    • 获取 Flutter SDK
    • 运行 flutter doctor 命令
    • 平台配置
    • 设置iOS开发环境
      • 安装Xcode
      • 配置iOS模拟器
      • 创建并运行一个简单的 Flutter 应用
      • 部署到 iOS 真机上
    • 设置 Android 开发环境
      • 安装 Android Studio
      • 配置 Android 设备
      • 配置 Android 模拟器
    • Web 平台设置
    • 参考文档

系统配置要求

想要安装并运行 Flutter,你的开发环境需要最低满足以下要求:

  • 操作系统: macOS(64位)
  • 磁盘空间: 2.8 GB(不包含 IDE 或其余工具所需要的磁盘空间)
  • 命令工具: Flutter 需要你的开发环境中已经配置了以下命令行工具。
    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • zip

获取 Flutter SDK

  1. 下载以下安装包来获取最新的 stable Flutter SDK:

    flutter_masos_1.17.3-stable.zip

    注:此地址为清华大学开源软件镜像站的下载地址

    ​ 想要获取到其他版本的安装包,请参阅 SDK 版本列表 页面,也可以访问 清华大学开源镜像站 进行下载。

  2. 将文件解压到目标路径,比如:

    $ cd ~/development
    $ unzip ~/Downloads/flutter_macos_1.17.3-stable.zip
    

    如果你不想安装固定版本的安装包,你可以跳过步骤 1 和 2。或者是从 GitHub 上的 Flutter repo 获取源代码,并根据需要更改分支或标签。

    $ git clone https://github.com/flutter/flutter.git
    

    你也可以根据需要切换选择分支,比如用下面的参数获得稳定版本:

    $ git clone https://github.com/flutter/flutter.git -b stable --depth 1
    

    如您的开发设备访问 Github 速度慢,可以在 开发设备的 Flutter SDK 目录 运行下面的命令,将 Git 上游设置为 TUNA 镜像:

    $ git remote set-url origin https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git
    

    或者通过下面的命令,直接从 Master 构建渠道检出 Flutter 的 SDK:

    $ git clone -b master https://mirrors.tuna.tsinghua.edu.cn/git/flutter-sdk.git
    $ ./flutter-sdk/bin/flutter --version
    

    您也可以替换上述代码中 git clone -b 之后的 masterbeta 获取 Beta 渠道的构建、替换为 dev 获取 Dev 渠道的构建。 稳定版的构建可以通过修改 masterstable 获得,也可以帮助文档最上方提到的,通过 镜像站直接下载。

  3. 配置 flutter 的PATH环境变量:

    首先决定你想要将 Flutter SDK 放置在哪一个目录内,获取并记录这个目录的路径。

    export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTOR]/flutter/bin"
    

    注:更新PATH环境变量配置永久生效。

    ​ 将其中的 [PATH_TO_FLUTTER_GIT_DIRECTORY] 更改为你刚刚获取到的路径。

    Flutter 开发依赖于 SDK 的升级 和 Dart Package 生态, 因此,如果您的网络访问 Google 受阻,需要将您开发设备的如下两个环境变量设置指向 TUNA 镜像站:

    • PUB_HOSTED_URL
    • FLUTTER_STORAGE_BASE_URL

    设定方式如下:

    export FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"
    export PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub"
    

    若希望长期使用 TUNA 镜像:

    echo 'export FLUTTER_STORAGE_BASE_URL="https://mirrors.tuna.tsinghua.edu.cn/flutter"' >> ~/.bashrc
    echo 'export PUB_HOSTED_URL="https://mirrors.tuna.tsinghua.edu.cn/dart-pub"' >> ~/.bashrc
    

    注:macOS Catalina 操作系统默认使用 Z Shell,所以需要修改 $HOME/.zshrc 文件。

    在编译android项目时,flutter还会从 https://storage.googleapis.com/download.flutter.io 下载Java程序库,您可以在 Android 项目目录下的 build.gradle 中添加下面一行下载源,从而使用TUNA镜像。

    allprojects {
        repositories {
            google()
            jcenter()
            maven { url 'https://mirrors.tuna.tsinghua.edu.cn/flutter/download.flutter.io' }
        }
    }
    

运行 flutter doctor 命令

通过运行以下命令来查看当前环境是否需要安装其他的依赖(如果想查看更详细的输出,增加一个 -v 参数即可):

$ flutter doctor

这个命令会检查你当前的配置环境,并在命令行窗口中生成一份报告。安装 Flutter 会附带安装 Dart SDK,所以不需要再对 Dart 进行单独安装。你需要仔细阅读上述命令生成的报告,看看别漏了一些需要安装的依赖,或者需要之后执行的命令(这个会以 加粗的文本 显示出来)。

比如你可能会看到下面这样的输出:

[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from:
      https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK
      components.
      (or visit https://flutter.dev/docs/get-started/install/macos#android-setup
      for detailed instructions).
      If the Android SDK has been installed to a custom location, set
      ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

之后的部分会向你描述如果执行这些命令来完成整体的配置过程。

当你安装了任一缺失部分的依赖后,可以再次运行 flutter doctor 命令来确认是否成功安装。

注:

flutter 工具使用了 Google Analytics 来对基本使用情况和 崩溃报告 进行匿名的统计。这些数据用来帮助改善 Flutter 工具。

在第一次运行或者任何涉及到 flutter config 的信息都不会进行发送,所以你可以在发送分析数据之前选择禁止分析数据的统计。要禁用这一功能,只需要输入 flutter config --no-analytics 即可,想要查看当前设置使用命令 flutter config 即可。

在下载了 Flutter SDK 的时候,意味着你同意了 Google 的 ToS,你可以在 Google 隐私政策中查看更详细的内容。

另外,Flutter 包含了 Dart SDK,它可能会发送一些使用数据和崩溃信息给 Google。


平台配置

以下内容,完全拷贝自Flutter 中文资源网站

macOS 可以允许开发 iOS、Android 和 Web(技术预览版正式发布)三个平台的 Flutter 应用,你可以任选一个平台完成初始配置,以此来搭建并运行起来你的第一个 Flutter 应用。

设置iOS开发环境

安装Xcode

开发 iOS 平台上的 Flutter 应用,你需要一个安装了 Xcode 的 Mac 设备。

  1. 通过 直接下载 或者Mac App Store 来安装最新稳定版 Xcode;

  2. 通过在命令行中运行以下命令来配置 Xcode command-line tools:

    $ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
    $ sudo xcodebuild -runFirstLaunch
    

    当你安装了最新版本的 Xcode,大部分情况下,上面的路径都是一样的。但如果你安装了不同版本的 Xcode,你可能要更改一下上述命令中的路径。

  3. 运行一次 Xcode 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议。

旧版本可能也能够正常工作,但是不建议在 Flutter 开发环境中使用。旧版本的 Xcode 不支持定位代码,还可能无法正常工作。

安装了 Xcode 之后,你就可以在 iOS 真机或者模拟器上运行 Flutter 应用了。

配置iOS模拟器

如果想要在 iOS 模拟器中运行和测试 Flutter 应用,按照以下步骤即可:

  1. 在你的 Mac 中,通过 Spotlight 或者以下命令来运行模拟器:

    $ open -a Simulator
    
  2. 通过模拟器菜单中的 Hardware > Device 选项检查当前模拟器是否是 64 位机型(iPhone 5S 或之后的机型)。

  3. 根据你当前开发机器的屏幕尺寸,模拟器模拟出来的高密度屏幕的设备可能会占满你的屏幕,你可以通过菜单中的 Window > Scale 选项来更改模拟器的缩放比例。

创建并运行一个简单的 Flutter 应用

通过以下步骤来创建你的第一个 Flutter 应用并进行测试:

  1. 通过运行以下命令来创建一个新的 Flutter 应用:

    content_copy

    $ flutter create my_app
    
  2. 上述命令创建了一个 my_app 的目录,包含了 Flutter 初始的应用模版,切换路径到这个目录内:

    content_copy

    $ cd my_app
    
  3. 确保模拟器已经处于运行状态,输入以下命令来启动应用:

    content_copy

    $ flutter run
    

部署到 iOS 真机上

如果你想把 Flutter 应用部署到 iOS 的真机上,你还需要一些别的工具和一个 Apple 开发者账号。另外,你还需要在 Xcode 上针对你的机器做一些设置。

  1. 通过下面的代码安装和设置 CocoaPods:

    content_copy

    $ sudo gem install cocoapods
    $ pod setup
    
  2. 按照下面 Xcode 签名流程来配置你的项目:

    1. 通过在命令行中于你当前 Flutter 项目目录下运行 open ios/Runner.xcworkspace 命令来打开默认的 Xcode 工程。

    2. 在运行按钮的下拉列表里选择你想要部署到的设备;

    3. 在左侧的导航面板中选择 Runner 项目;

    4. Runner 项目的设置页面,请确保勾选你的开发团队。在不同的 Xcode 版本里,这一部分的操作界面不同:

      • 在 Xcode 10 版本中,请在这里设置:General > Signing > Team
      • 在 Xcode 11 版本以后,请在这里设置 Signing & Capabilities > Team

      Runner 项目的设置页面中,确保 General > Signing > Team 选项下的 Development Team 选中状态。

      • 在开始你的第一个 iOS 项目开发之前,你需要先在 Xcode 中登陆你的 Apple 开发者账号 Flutter:在macOS上搭建Flutter开发环境_第1张图片 任何 Apple ID 都可以进行开发和测试。如果想将应用上架 App Store,你需要加入 Apple Developer Program,你可以在 Choosing a Membership 页面中查看详细的说明。

      • 当你第一次将设备连接到开发机用于开发时,你需要分别在 Mac 和开发机上进行信任设备的操作。当你第一次连接时,会有个弹窗,点击 Trust 即可。

        Flutter:在macOS上搭建Flutter开发环境_第2张图片

        然后在 iOS 开发机上进入 Settings 应用,选择 General > Device Management 然后信任相应的证书。

      • 如果 Xcode 的自动签名失败了,你可以检查以下项目中 General > Identity > Bundle Identifier 里的值是否是唯一的。

        Flutter:在macOS上搭建Flutter开发环境_第3张图片

  3. 执行 flutter run 命令来运行你的应用。

设置 Android 开发环境

备忘

Flutter 依赖 Android Studio 的全量安装来为其提供 Android 平台的支持。但你也可以使用其他的编辑器来写 Flutter 应用,稍后会说明讨论这个问题。

安装 Android Studio

  1. 下载并安装 Android Studio。
  2. 运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。

配置 Android 设备

在 Android 设备上运行或测试 Flutter 应用之前,你需要一个运行 Android 4.1(API 版本 16)或者更高的设备。

  1. 在设备上打开 Developer optionsUSB debugging 选项,你可以在 Android documentation 上查看更详细的方法介绍。
  2. 如果是在 Windows 平台上使用,需要安装 Google USB Driver
  3. 通过 USB 接口连接手机和电脑,如果在设备上弹出需要授权弹窗,允许授权以便让电脑能够访问你的开发设备。
  4. 在命令行中,使用 flutter devices 命令来确保 Flutter 能够识别出你所连接的 Android 设备。

默认情况下,Flutter 会使用当前版本 adb 工具所依赖的 Android SDK 版本,如果你想让 Flutter 使用别的 Android SDK,你可以通过设置 ANDROID_HOME 环境变量来达到这个目的。

配置 Android 模拟器

根据以下步骤来将 Flutter 应用运行或测试于你的 Android 模拟器上:

  1. 激活机器上的 VM acceleration 选项。

  2. 启动 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device 选项。(只有在 Android 项目中才会显示 Android 子选项。)

  3. 选择相应的设备并选择 Next 选项。

  4. 选择一个或多个你想要模拟的 Android 版本的系统镜像,然后选择 Next 选项。推荐选择 x86 或者 x86_64 镜像。

  5. 在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启 硬件加速。

  6. 确保 AVD 选项配置正确,并选择 Finish 选项。

    想要查看上述步骤的更多详细信息,请查看 Managing AVDs 页面。

  7. 在 Android Virtual Device Manager 中,点击工具栏中的 Run 选项,模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

Web 平台设置

现在你已经可以通过使用 beta 渠道的 Flutter SDK 构建 Web 应用了。要开始,请通过阅读 这些步骤 完成设置。


参考文档

  • Flutter 中文资源网站 (flutter.cn)
  • 清华大学开源软件镜像站

你可能感兴趣的:(flutter)