美文网首页
搭建Flutter开发环境

搭建Flutter开发环境

作者: flutter开发精选 | 来源:发表于2020-09-02 13:23 被阅读0次

    1.2 搭建Flutter开发环境

    本节会介绍macOS下Flutter SDK的安装和IDE的配置。

    1.2.1 安装Flutter

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

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

    bash
    curl
    git 2.x
    mkdir
    rm
    unzip
    which
    zip

    使用镜像

    由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

    export PUB_HOSTED_URL=https://pub.flutter-io.cn
    export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
    

    注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考https://flutter.io/community/china 以获得有关镜像服务器的最新动态。

    获取Flutter SDK

    1. 去flutter官网下载其最新可用的安装包,下载地址:https://flutter.cn/docs/development/tools/sdk/releases?tab=macos ,打开后如图1-2所示:
    1-2.png
    1. 将文件解压到目标路径, 比如:
        cd ~/development
        unzip ~/Downloads/flutter_macos_1.20.2-stable.zip
    

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

    1. 配置 flutter 的 PATH 环境变量:
       export PATH="$PATH:`pwd`/flutter/bin"
    

    这个命令配置了 PATH 环境变量,且只会在你 当前 命令行窗口中生效。如果想让它永久生效,需要更新 PATH 环境变量。

    1. 开发二进制文件预下载(可选操作)
    flutter precache
    

    运行 flutter doctor 命令

    在Flutter命令行运行如下命令来查看是否还需要安装其它依赖,如果需要,安装它们:

    flutter doctor
    

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

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

    [-] Android toolchain - develop for Android devices
        • Android SDK at D:\Android\sdk
        ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
        • Try re-installing or updating your Android SDK,
          visit https://flutter.io/setup/#android-setup for detailed instructions.
    

    第一次运行flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。缺失的依赖需要安装一下,安装完成后再运行flutter doctor命令来验证是否安装成功。

    设置 iOS 开发环境

    1. 安装 Xcode
      开发 iOS 平台上的 Flutter 应用,你需要一个安装了 Xcode 的 Mac 设备。通过Mac App Store 来安装最新稳定版 Xcode;然后通过在命令行中运行以下命令来配置 Xcode command-line tools:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    

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

    1. 配置 iOS 模拟器,如果想要在 iOS 模拟器中运行和测试 Flutter 应用,按照以下步骤即可:
      • 在你的 Mac 中,通过 Spotlight 或者以下命令来运行模拟器:
       open -a Simulator
    
    • 通过模拟器菜单中的 Hardware > Device 选项检查当前模拟器是否是 64 位机型(iPhone 5S 或之后的机型)。
    • 根据你当前开发机器的屏幕尺寸,模拟器模拟出来的高密度屏幕的设备可能会占满你的屏幕,你可以通过菜单中的 Window > Scale 选项来更改模拟器的缩放比例。

    设置 Android 开发环境

    1. 安装 Android Studio

      • 下载并安装(https://developer.android.google.cn/studio)
      • 运行 Android Studio,并进入 ‘Android Studio Setup Wizard’,这会安装最新的 Android SDK, Android SDK Platform-Tools 以及 Android SDK Build-Tools,这些都是在开发 Android Flutter 应用时所需要的。
    2. 配置 Android 设备
      在 Android 设备上运行或测试 Flutter 应用之前,你需要一个运行 Android 4.1(API 版本 16)或者更高的设备。

      • 在设备上打开 Developer options 和 USB debugging 选项,你可以- 在 Android documentation (https://developer.android.google.cn/studio/debug/dev-options)上查看更详细的方法介绍。

      • 如果是在 Windows 平台上使用,需要安装 Google USB Driver

      • 通过 USB 接口连接手机和电脑,如果在设备上弹出需要授权弹窗,允许授权以便让电脑能够访问你的开发设备。

      • 在命令行中,使用 flutter devices 命令来确保 Flutter 能够识别出你所连接的 Android 设备。

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

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

      • 激活机器上的 VM acceleration 选项。

      • 打开 Android Studio,点击 AVD Manager 按钮,选择 Create Virtual Device…

      • 在一些旧的 Android Studio 版本里,需要通过 Android Studio > Tools > Android > AVD Manager,然后选择 Create Virtual Device 选项。(只有在 Android 项目中才会显示 Android 子选项。)

      • 选择相应的设备并选择 Next 选项。

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

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

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

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

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

    相关文章

      网友评论

          本文标题:搭建Flutter开发环境

          本文链接:https://www.haomeiwen.com/subject/fltwsktx.html