Flutter 开发 IDE 环境的详细配置

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，您的开发环境必须满足以下最低要求:

  • 操作系统: macOS (64-bit)
  • 磁盘空间: 700 MB (不包括 Xcode 或 Android Studio 的磁盘空间）
  • 工具: Flutter 依赖下面这些命令行工具
    • bash, mkdir, rm, git, curl, unzip, which

获取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.

  • 当您第一次attach真机设备进行 iOS 开发时，您需要同时信任你的 Mac 和该设备上的开发证书。首次将 iOS 设备连接到 Mac 时，请在对话框中选择 Trust。
Trust Computer

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

  • 如果Xcode中的自动签名失败，请验证项目的 General > Identity > Bundle Identifier 值是否唯一.
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
  • VS Code，安装 1.20.1 或更高版本.
安装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 插件

需要安装两个插件:

  • Flutter插件：支持 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), 或者点击 热重载按钮 (绿色圆形箭头按钮)。

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

声明：本文并非由本人所创，仅整理一些开发技能知识，以作存档用于学习。

点赞+关注，第一时间获取技术干货和最新知识点，谢谢你的支持！

最后祝大家生活愉快~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 162,547评论 4赞 374
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 68,787评论 2赞 308
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 112,175评论 0赞 254
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,752评论 0赞 223
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 53,169评论 3赞 297
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 41,056评论 1赞 226
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 32,195评论 2赞 321
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,980评论 0赞 214
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,724评论 1赞 250
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,872评论 2赞 254
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,344评论 1赞 265
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,667评论 3赞 264
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,379评论 3赞 245
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,202评论 0赞 9
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,992评论 0赞 201
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 36,189评论 2赞 286
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,987评论 2赞 279