IT/互联网

Flutter IDE 环境的详细配置

2020-06-06  本文已影响0人  腾飞tengfei

Flutter 是谷歌的移动 UI 框架，可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且Flutter 是完全免费、开源的。

Dart 是一种针对 web 和移动设备开发进行了优化的编程语言。基于 Dart 的以下特点，您可以通过它在不同的设备上创作华丽的、 高品质体验的应用：

在macOS上搭建Flutter开发环境

使用镜像

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

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

注意： 此镜像为临时镜像，并不能保证一直可用，读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

系统要求

要安装并运行 Flutter，您的开发环境必须满足以下最低要求:

获取Flutter SDK

  1. 去flutter官网下载其最新可用的安装包，转到下载页 。

    注意，Flutter 的渠道版本会不停变动，请以 Flutter 官网为准。另外，在中国大陆地区，要想正常获取安装包列表或下载安装包，可能需要翻墙，读者也可以去 Flutter github 项目下去下载安装包，转到下载页 。

  2. 解压安装包到你想安装的目录，如：

cd ~/development
unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip
  1. 添加 Flutter 相关工具到 path 中：
export PATH=`pwd`/flutter/bin:$PATH

此代码只能暂时针对当前命令行窗口设置PATH环境变量，要想永久将 Flutter 添加到 PATH 中，请参考下面更新环境变量部分。

注意： 由于一些flutter命令需要联网获取数据，如果您是在国内访问，由于众所周知的原因，直接访问很可能不会成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

要更新现有版本的Flutter，请参阅升级Flutter。

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装：

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务（以粗体显示）

例如:

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/obiwan/Library/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.

一般的错误会是 Xcode 或 Android Studio 版本太低、或者没有ANDROID_HOME 环境变量等，请按照提示解决。下面贴一个笔者本机(Mac)的环境变量配置，您可以对比修正：

  export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH
  export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录，替换为你自己的即可
  export PATH=${PATH}:${ANDROID_HOME}/tools
  export PATH=${PATH}:${ANDROID_HOME}/platform-tools
  export PUB_HOSTED_URL=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

第一次运行一个 flutter 命令（如flutter doctor）时，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在 flutter doctor 输出中， 如果你选择使用 IDE，我们提供了，IntelliJ IDEA，Android Studio 和 VS Code 的插件， 请参阅编辑器设置 以了解安装 Flutter 和 Dart 插件的步骤。

一旦你安装了任何缺失的依赖，再次运行 flutter doctor 命令来验证你是否已经正确地设置了。

该 flutter 工具使用 Google Analytics 匿名报告功能使用情况统计信息和基本崩溃报告。 这些数据用于帮助改进 Flutter 工具。Analytics 不是一运行或在运行涉及flutter config 的任何命令时就发送， 因此您可以在发送任何数据之前退出分析。要禁用报告，请执行 flutter config --no-analytics 并显示当前设置，然后执行 flutter config。 请参阅 Google 的隐私政策。

更新环境变量

您在命令行只能更新当前会话的 PATH 变量，如 Clone Flutter repo 所示。 但是，您可能需要的是永久更新此变量，以便您可以运行flutter命令在任何终端会话中。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常，您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如

  1. 确定您 Flutter SDK 的目录，您将在步骤3中用到。
  2. 打开(或创建) $HOME/.bash_profile，文件路径和文件名可能在您的机器上不同。
  3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆 Flutter 的 git repo 的路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你 flutter 的路径，比如“~/document/code”

 export PATH=~/document/code/flutter/bin:$PATH
  1. 运行 source $HOME/.bash_profile 刷新当前终端窗口

注意: 如果你使用的是zsh，终端启动时 ~/.bash_profile 将不会被加载，解决办法就是修改 ~/.zshrc ，在其中添加：source ~/.bash_profile

  1. 通过运行flutter/bin命令验证目录是否在已经在PATH中:
echo $PATH

更多详细信息，请参阅 this StackExchange question.

编辑器设置

使用 flutter 命令行工具，您可以使用任何编辑器来开发 Flutter 应用程序。输入flutter help在提示符下查看可用的工具。

我们建议使用我们的插件来获得 丰富的IDE体验，支持编辑，运行和调试Flutter应用程序。请参阅 编辑器设置 了解详细步骤。

平台设置

macOS 支持为 iOS 和 Android 开发 Flutter 应用程序。现在完成两个平台设置步骤中的至少一个，以便能够构建并运行您的第一个Flutter应用程序

iOS 设置

安装 Xcode

要为 iOS 开发 Flutter 应用程序，您需要 Xcode 7.2 或更高版本:

  1. 安装Xcode 7.2或更新版本(通过 链接下载 或 苹果应用商店 ).

  2. 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况，当您想要使用最新版本的Xcode时，这是正确的路径。如果您需要使用不同的版本，请指定相应路径。

  3. 确保Xcode许可协议是通过打开一次 Xcode 或通过命令sudo xcodebuild -license同意过了。

使用Xcode，您可以在 iOS 设备或模拟器上运行 Flutter 应用程序。

设置iOS模拟器

要准备在iOS模拟器上运行并测试您的Flutter应用，请按以下步骤操作：

  1. 在 Mac 上，通过 Spotlight 或使用以下命令找到模拟器:
open -a Simulator
  1. 通过检查模拟器 硬件>设备 菜单中的设置，确保您的模拟器正在使用64位设备（iPhone 5s 或更高版本）。
  2. 根据您的开发机器的屏幕大小，模拟的高清屏 iOS 设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例。
  3. 运行 flutter run 启动您的应用。
安装到 iOS 设备

要将您的 Flutter 应用安装到 iOS 真机设备，您需要一些额外的工具和一个 Apple 帐户，您还需要在 Xcode 中进行设置。

  1. 安装 homebrew （如果已经安装了brew，跳过此步骤）。
  2. 打开终端并运行这些命令来安装用于将 Flutter 应用安装到 iOS 设备的工具。
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

如果这些命令中的任何一个失败并出现错误，请运行 brew doctor 并按照说明解决问题。

  1. 遵循 Xcode 签名流程来配置您的项目:

    a. 在你 Flutter 项目目录中通过 open ios/Runner.xcworkspace 打开默认的 Xcode workspace.

    b. 在 Xcode 中，选择导航面板左侧中的 Runner 项目

    c. 在 Runner target 设置页面中，确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时，Xcode 会创建并下载开发证书，向您的设备注册您的帐户，并创建和下载配置文件（如果需要）

    • 要开始您的第一个 iOS 开发项目，您可能需要使用您的Apple ID 登录 Xcode。
Xcode Account

任何 Apple ID 都支持开发和测试。需要注册 Apple 开发者计划才能将您的应用分发到 App Store. 查看 differences between Apple membership types.

Trust Computer

然后，转到 iOS 设备上的设置应用程序，选择 常规>设备管理 并信任您的证书。

Bundle Identifier
  1. 运行启动您的应用程序 flutter run。

Android 设置

安装 Android Studio

要为 Android 开发 Flutter 应用，您可以使用 Mac，Windows 或 Linux（64位）机器.

Flutter 需要安装和配置 Android Studio:

  1. 下载并安装 Android Studio.

  2. 启动 Android Studio，然后执行 “Android Studio安装向导”。这将安装最新的 Android SDK，Android SDK 平台工具和 Android SDK 构建工具，这是 Flutter 为 Android 开发时所必需的。

设置您的 Android 设备

要准备在 Android 设备上运行并测试您的 Flutter 应用，您需要安装 Android 4.1（API level 16）或更高版本的 Android 设备.

  1. 在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在 Android文档 中找到。
  2. 使用 USB 将手机插入电脑。如果您的设备出现提示，请授权您的计算机访问您的设备。
  3. 在终端中，运行 flutter devices 命令以验证 Flutter 识别您连接的 Android 设备。
  4. 运行启动您的应用程序 flutter run。

默认情况下，Flutter 使用的 Android SDK 版本是基于你的 adb 工具版本。 如果您想让 Flutter 使用不同版本的 Android SDK，则必须将该 ANDROID_HOME 环境变量设置为 SDK 安装目录。

设置 Android 模拟器

要准备在 Android 模拟器上运行并测试您的 Flutter 应用，请按照以下步骤操作：

  1. 在您的机器上启用 VM acceleration .

  2. 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.

  3. 选择一个设备并选择 Next。

  4. 为要模拟的 Android 版本选择一个或多个系统映像，然后选择 Next. 建议使用 x86 或 x86_64 image .

  5. 在 Emulated Performance 下, 选择 Hardware - GLES 2.0 以启用 硬件加速.

  6. 验证 AVD 配置是否正确，然后选择 Finish。

    有关上述步骤的详细信息，请参阅 Managing AVDs.

  7. 在 Android Virtual Device Manager 中，点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.

  8. 运行 flutter run 启动您的设备。连接的设备名是 Android SDK built for <platform>，其中 platform 是芯片系列，如 x86。

配置编辑器

您可以使用任何文本编辑器与命令行工具来构建 Flutter 应用程序。 不过，我们建议使用我们的编辑器插件之一，以获得更好的体验。通过我们的编辑器插件，您可以获得代码补全、语法高亮、widget 编辑辅助、运行和调试支持等等。

按照下面步骤为 Android Studio、IntelliJ 或 VS Code 添加编辑器插件。如果你想使用其他的编辑器， 那没关系，直接跳到 下一步:创建并运行你的第一个应用程序。

Visual Studio Code (VS Code) 安装

VS Code: 轻量级编辑器，支持Flutter运行和调试.

安装 VS Code
安装Flutter插件
  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘install’，然后选择 Extensions: Install Extension action
  4. 在搜索框输入 flutter，在搜索结果列表中选择 ‘Flutter’，然后点击 Install
  5. 选择 ‘OK’ 重新启动 VS Code
通过Flutter Doctor验证您的设置
  1. 调用 View>Command Palette…
  2. 输入 ‘doctor’，然后选择 ‘Flutter: Run Flutter Doctor’ action
  3. 查看“OUTPUT”窗口中的输出是否有问题

Android Studio 安装

Android Studio: 为Flutter提供完整的 IDE 体验

安装Android Studio

或者，您也可以使用IntelliJ：

安装 Flutter 和 Dart 插件

需要安装两个插件:

要安装这些:

  1. 启动 Android Studio。
  2. 打开插件首选项 (Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux)。
  3. 选择 Browse repositories…, 选择 Flutter 插件并点击 install。
  4. 重启 Android Studio 后插件生效。

体验

本页介绍如何 “试驾” Flutter: 从我们的模板创建一个新的 Flutter 应用程序，运行它，并学习如何使用 Hot Reload 进行更新重载

Flutter 是一个灵活的工具包，所以请首先选择您的开发工具来编写、构建和运行您的 Flutter 应用程序。

VS Code: 轻量级编辑器，支持Flutter运行和调试.

创建新的应用

  1. 启动 VS Code
  2. 调用 View>Command Palette…
  3. 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action
  4. 输入 Project 名称 (如myapp), 然后按回车键
  5. 指定放置项目的位置，然后按蓝色的确定按钮
  6. 等待项目创建继续，并显示 main.dart 文件

上述命令创建一个 Flutter 项目，项目名为 myapp，其中包含一个使用 Material 组件的简单的 演示应用程序。

在项目目录中，您的应用程序的代码位于 lib/main.dart.

运行应用程序

  1. 确保在 VS Code 的右下角选择了目标设备
  2. 按 F5 键或调用Debug>Start Debugging
  3. 等待应用程序启动
  4. 如果一切正常，在应用程序建成功后，您应该在您的设备或模拟器上看到应用程序:

体验热重载

Flutter 可以通过 热重载（hot reload） 实现快速的开发周期，热重载就是无需重启应用程序就能实时加载修改后的代码，并且不会丢失状态（译者语: 如果是一个web开发者，那么可以认为这和 webpack 的热重载是一样的）。简单的对代码进行更改，然后告诉 IDE 或命令行工具你需要重新加载（点击 reload 按钮），你就会在你的设备或模拟器上看到更改。

  1. 用你喜欢的编辑器打开文件 lib/main.dart
  2. 将字符串
    'You have pushed the button this many times:'更改为
    'You have clicked the button this many times:'
  3. 不要按“停止”按钮，让您的应用继续运行。
  4. 要查看您的更改，请调用 Save (cmd-s / ctrl-s), 或者点击 热重载按钮 (绿色圆形箭头按钮)。

你会立即在运行的应用程序中看到更新的字符串。

点赞+关注，第一时间获取技术干货和最新知识点，谢谢你的支持！转发请注明出处。

最后祝大家生活愉快~

上一篇下一篇

猜你喜欢

热点阅读