Flutter 环境搭建

Windows

  • 系统与开发工具

配置Flutter前需要先确认自己是Windows系统还是mac系统或者其他系统，不同系统配置方法也不一样，而且根据你的开发工具的不同，Flutter的配置也会不同。这里我是按照自己的Windows系统，在AndroidStudio下配置Flutter。其他配置方法可以上面给出的资源链接参考。

  • 下载Flutter SDK

通过以下链接下载Flutter SDK最新稳定版。https://storage.googleapis.com/flutter_infra/releases/stable/windows/flutter_windows_v1.0.0-stable.zip

下载完成后解压文件，得到如下目录。
3. Flutter 环境搭建 - 图1
对上图中红色标注flutter_console.bat双击启动。启动成功之后我们可以运行Flutter命令。输入Flutter doctor进行测试。
TIM截图20190220104927.png

  • 配置网络环境变量
  1. export PUB_HOSTED_URL=https://pub.flutter-io.cn
  2. export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

下载好Flutter SDK后，我们可以通过SDK目录下的flutter_console.bat来执行Flutter命令，但是如果每次都需要通过这样来执行的话未免有些麻烦，我们可以通过配置环境变量让Flutter命令可以运行在任何平台。包括Windows系统下默认的命令行窗口或者AndroidStudio下的 Terminal 。
Flutter环境变量配置和其他的环境变量配置差不多，先进入计算机高级系统设置—>环境变量—> 系统变量。然后在系统变量下找到Path路径，点击编辑，添加Flutter SDK下的bin目录。具体操作如图：
TIM截图20190220110354.png

当配置好环境变量后，我们就可以在系统或者其他地方使用Flutter命令了。如在Window系统下输入cmd启动系统命令窗口，然后输入flutter doctor也可以成功执行。
TIM截图20190220110801.png
到这里我们就把环境变量配置好了，接下来要配置的就是开发工具了。下面以AndroidStudio为例，如果是其他工具也可以参照官网去配置。

  • 证书安装
    1. flutter doctor --android-licenses

然后会提示你选Y/N，不要犹豫，一律选择Y，就可以把证书安装好。（说的都是一大堆一大堆的英文，我也看不懂是啥）

  • AndroidStudio下配置Flutter

在AndroidStudio下配置Flutter其实特别简单，只需要安装 Flutter 插件即可。至于Flutter插件的安装，简单说一下，在AndroidStudio下点击File—>Settings—> Plugins—> Browse repositories…。然后输入Flutter点击安装后重启即可。安装成功后我们就可以直接通过AndroidStudio创建Flutter项目了。
TIM截图20190220112245.png

  • 创建运行你的第一个Flutter项目

通过将AndroidStudio安装Flutter插件后，我们就可以直接通过AndroidStudio来创建Flutter项目了。创建Flutter项目也很简单，当安装好了插件后，在你需要新建项目的时候，会多出一个Flutter Project的选项出来，我们只需要新建Flutter Project即可。具体操作看图。
1.png
2.png
3.png
注意：上面这里需要指定Flutter SDK路径，当然在你next到这里的时候AndroidStudio已经自动帮你选好了路径，只要确认路径没问题就不需要去修改。到这里之后接下来也可以一路Next最后Finish即可创建好Flutter项目。（创建项目需要等待一会）

创建成功后点击绿色运行按钮即可成功运行你的第一个Flutter项目。
111.png

看下最后运行效果：
TIM图片20190220113910.jpg

Flutter 搭建常见错误

    1. android Studio 的 android sdk 镜像原因下载失败

    遇到这种情况非常正常，因为网络原因，所以你拉不下android sdk，如果网络非常好，就另当别论，
    打开 C:\Windows\System32\drivers\etc\host 文件image.png

image.png

加上这句 就可以下载成功 了 203.208.41.65 dl.google.com

    1. Android Studio安装 Flutter 插件后找不到设备（no devices）

设置下面的命令，注意 双引号的原因是因为，我的第二条路径有空格，你也可以不加，为了协调，所以我才全用双引号，命令的意思就是告诉flutter这个框架，咱俩的安卓的编辑器在这个路径，你去这里找模拟机

  1. flutter config --android-sdk "E:\test-learning\test\software\Appium-software\androidsdk"
  2. flutter config --android-studio-dir "E:\IDE\JetBrains\Android Studio"
    1. 在Android Studio中运行App时，如果卡在“Running 'gradle assembleDebug”时间过长，是因为Gradle中Maven仓库默认使用国外仓库, 可以使用阿里云的镜像地址：
    1. Emulator: emulator: ERROR: VkCommonOperations.cpp:537: Failed to create Vulkan instance.
    1. The Flutter SDK instalaion is incomplete; please see: htps:/lutterio/docs/get-started/install.
    1. 无法将”Unblock-File”项识别为cndlet、 函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后重试:
    1. 安装升级powershell时出现0x80240037
  • 10 git Unable to find git in your PATH
    • 把 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中

其他类似问题大佬的解决: https://blog.csdn.net/qwe1314225/article/details/88072689

MacOS

  • 一、系统配置要求

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

  • 操作系统：macOS（64 位）
  • 磁盘空间：700 MB（不包含 IDE 或其余工具所需要的磁盘空间）

  • 命令工具：Flutter 需要你的开发环境中已经配置了以下命令行工具。

    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which

  • 二、获取 Flutter SDK

1.下载以下安装包来获取最新的 stable Flutter SDK：
flutter_macos_v1.5.4-hotfix.2-stable.zipstorage.flutter-io.cn
想要获取到其他版本的安装包，可以查看 SDK 归档 页面。
2. 将文件解压到目标路径, 比如:

  1. $ cd ~/development
  2. $ unzip ~/Downloads/flutter_macos_v1.5.4-hotfix.2-stable.zip
  1. 配置 flutter 的 PATH 环境变量：
    1. $ export PATH="$PATH:`pwd`/flutter/bin"
    这个命令配置了PATH环境变量，且只会在你当前命令行窗口中生效。 如果想让它永久生效，请查看更新 PATH 环境变量。
    4. 开发二进制文件预下载（可选操作）
    flutter 命令行工具会下载不同平台的开发二进制文件，如果需要一个封闭式的构建环境，或在网络可用性不稳定的情况下使用等情况，你可能需要通过下面这个命令预先下载 iOS 和 Android 的开发二进制文件：
    1. $ flutter precache
    更多使用方式，请使用 flutter help precache 命令查看。
    现在你可以愉快地运行 Flutter 的命令行啦！ 备忘如果想要升级当前的 Flutter 版本，可以查看> 升级 Flutter。
  • 2.1 运行 flutter doctor 命令

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

  1. $ flutter doctor

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

  1. [-] Android toolchain - develop for Android devices
  2.     • Android SDK at /Users/obiwan/Library/Android/sdk
  3.     ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
  4.     • Try re-installing or updating your Android SDK,
  5.       visit https://flutter-io.cn/setup/#android-setup for detailed instructions.

之后的部分会向你描述如果执行这些命令来完成整体的配置过程。
当你安装了任一缺失部分的依赖后，可以再次运行 flutter doctor 命令来确认是否成功安装。

flutter工具使用了 Google Analytics 来对基本使用情况和崩溃报告进行匿名的统计。这些数据用来帮助改善 Flutter 工具。在第一次运行或者任何涉及到> flutter config的信息都不会进行发送，所以你可以在发送分析数据之前选择禁止分析数据的统计。要禁用这一功能，只需要输入> flutter config --no-analytics即可，想要查看当前设置使用命令> flutter config即可。你可以在 Google> 隐私政策中查看更详细的内容。

  • 2.2 更新 PATH 环境变量

正如获取 Flutter SDK 一文中所展示你可以仅仅在当前命令行会话中更新你的 PATH 环境变量。但你也许想让这个配置永久生效，这样就可以在任意一个命令行会话中使用 flutter 命令了。
以下配置环境变量让其永久生效的方法在不同的机器上有略微的差别。基本上方法都是在某一个文件中增加一句命令，让它在每次新的命令行窗口打开时都执行一遍。比如：
1. 首先决定你想要将 Flutter SDK 放置在哪一个目录内，获取并记录这个目录的路径，你将要在第 3 步中用到它。
2. 打开（或者创建）$HOME/.bash_profile，这里的路径和文件名在你的机器上可能会有所不同。
3. 在文件中增加下列这行命令，并将其中的 [PATH_TO_FLUTTER_GIT_DIRECTORY] 更改为你第一步获取到的路径：

  1. $ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
  1. 运行 source $HOME/.bash_profile 来刷新当前命令行窗口。
    5. 通过运行以下命令来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中：
    1. $ echo $PATH
    想要查看更加详细的内容，请查看StackExchange 中的一个提问。
  • 三、平台配置

macOS 可以允许开发 iOS 和 Android 两个平台的 Flutter 应用，你可以任选一个平台完成初始配置，以此来搭建并运行起来你的第一个 Flutter 应用。

  • 四、设置 iOS 开发环境
  • 4.1 安装 Xcode

开发 iOS 平台上的 Flutter 应用，你需要一个安装了 Xcode 9.0 或者更高版本的 Mac 设备：
1. 通过直接下载或者Mac App Store来安装 Xcode 9.0 或者更高版本；
2. 通过在命令行中运行以下命令来配置 Xcode command-line tools:

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

当你安装了最新版本的 Xode，大部分情况下，上面的路径都是一样的。但如果你安装了不同版本的 Xcode，你可能要更改一下上述命令中的路径。
3. 运行一次 Xocde 或者通过输入命令 sudo xcodebuild -license 来确保已经同意 Xcode 的许可协议。
安装了 Xcode 之后，你就可以在 iOS 真机或者模拟器上运行 Flutter 应用了。

  • 4.2 配置 iOS 模拟器

如果想要在 iOS 模拟器中运行和测试 Flutter 应用，按照以下步骤即可：
1. 在你的 Mac 中，通过 Spotlight 或者以下命令来运行模拟器：

  1. $ open -a Simulator
  1. 通过模拟器菜单中的 Hardware > Device 选项检查当前模拟器是否是 64 位机型（iPhone 5S 或之后的机型）。
    3. 根据你当前开发机器的屏幕尺寸，模拟器模拟出来的高密度屏幕的设备可能会占满你的屏幕，你可以通过菜单中的 Window > Scale 选项来更改模拟器的缩放比例。
  • 4.3 创建并运行一个简单的 Flutter 应用

通过以下步骤来创建你的第一个 Flutter 应用并进行测试：
1. 通过运行以下命令来创建一个新的 Flutter 应用：

  1. $ flutter create my_app
  1. 上述命令创建了一个 my_app 的目录，包含了 Flutter 初始的应用模版，切换路径到这个目录内：
    1. $ cd my_app
  2. 确保模拟器已经处于运行状态，输入以下命令来启动应用：
    1. $ flutter run
  • 部署到 iOS 真机上

如果你想把 Flutter 应用部署到 iOS 的真机上，你还需要一些别的工具和一个 Apple 开发者账号。另外，你还需要在 Xcode 上针对你的机器做一些设置。
1. 安装homebrew
2. 确保 homebrew 已经是最新版以及确保所有 formula 都已经更新：

  1. $ brew update
  1. 通过运行以下命令来安装将 Flutter 应用分发到 iOS 真机的工具：
    1. $ brew install --HEAD usbmuxd
    2. $ brew link usbmuxd
    3. $ brew install --HEAD libimobiledevice
    4. $ brew install ideviceinstaller ios-deploy cocoapods
    5. $ pod setup

    备忘The first two commands above are necessary as a temporary workaround until the next release of libusbmuxd, as explained in> libusbmuxd issue #46and> Flutter issue #22595. 如果运行上述命令报错了，运行以下 brew doctor 命令，并通过命令给出的报告来解决相应的问题。
    4. 按照Xcode签名流程来配置你的项目：
    a. 通过在命令行中于你当前 Flutter 项目目录下运行 open ios/Runner.xcworkspace 命令来打开默认的 Xcode 工程；
    b. 在 Xcode 中左侧的导航面板中选择 Runner 项目；
    c. 在 Runner 项目的设置页面中，确保 General > Signing > Team 选项下的 Development Team 选中状态。当你选择一个 team 后，Xcode 会为其创建并下载相应的 Development Certificate，并将你的账号在设备上进行注册，然后根据实际需求进行 provisioning profile 的配置。

  • 在开始你的第一个 iOS 项目开发之前，你需要先在 Xcode 中登陆你的 Apple 开发者账号

3. Flutter 环境搭建 - 图13
Apple ID 都可以进行开发和测试。如果想将应用上架 App Store，你需要加入 Apple Developer Program，你可以在Choosing a Membership页面中查看详细的说明。

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

3. Flutter 环境搭建 - 图14
然后在 iOS 开发机上进入 Settings 应用，选择 General > Device Management然后信任相应的证书。

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

3. Flutter 环境搭建 - 图15
执行 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 options 和 USB 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 选项，模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。