flutter ( windows 安装配置-vscode )

Author Avatar
Max Zhang 7月 19, 2018

Flutter 是谷歌的移动端 UI 框架，可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。 Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的.

[[toc]]

系统要求

要安装并运行 Flutter ，你的开发环境必须满足这些最低要求：

  • 操作系统：Windows 7 或者更高版本（64 位）。
  • 磁盘空间：400 MB（不包括 Android Studio 在内的磁盘空间）。
  • 工具： Flutter 依赖了你环境中可用的命令行工具。
  • Git for Windows (从 Windows 命令提示符选项中使用 Git )。

如果你已经安装了 Git for Windows ，确保你可以在 Windows 命令提示符或者 PowerShell 中运行 git 。

获取 Flutter SDK

为了获取 Flutter ， 使用 git 去克隆仓库然后添加 flutter 工具到你的环境变量。 运行 flutter doctor 来显示剩下你需要安装的的依赖。

克隆仓库

如果这是你第一次在电脑上安装 Flutter ，就要克隆这个远程仓库：

$ git clone -b beta https://github.com/flutter/flutter.git

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

更新你的环境变量
为了可以在任意的终端会话使用 flutter 命令，你需要添加它到你的 PATH 环境变量：

  • 打开 “控制面板 > 系统和安全 > 系统 > 高级系统设置 > 环境变量”。
  • 在用户变量下，检测是否存在 “Path” 的环境变量：
    • 如果这个 Path 变量已经存在了，就添加;到原来的 Path 值的末尾，并且加上 flutter\bin 的全路径。
    • 如果这个 Path 变量不存在，就要在用户变量下创建新的 Path 的变量名，并且它的变量值设置为 flutter\bin 的全路径。

重启 Windows 以完全应用此更改。

运行 flutter doctor
打开一个新的命令提示符或者 PowerShell 窗口，接着运行以下的命令，看是否需要安装任何依赖项来完成安装：

$ flutter doctor

要在命令提示符或者 PowerShell 窗口运行此命令。目前， Flutter 还不支持像 Git Bash 这样子的第三方 shell。

该命令会检测你的环境和在终端窗口生成报告。 Dart SDK 和 Flutter 捆绑在一起，没必要 单独去安装 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 命令就会很快了。

接下来的部分描述怎么去执行这些任务并完成这些设置过程。如果你选择了使用 IDE ，你会在 flutter doctor 的输出看到， IntelliJ IDEA ， Android Studio 和 VS Code 有可用插件。参阅编译器设置获取安装 Flutter 和 Dart 插件的步骤。

当你已经安装好缺失的依赖库，运行 flutter doctor 命令会再次验证你是否正确设置所有内容。

flutter 使用 Google Analytics 匿名报告功能使用情况统计信息和基本崩溃报告。 这些数据用于帮助改进 Flutter 。这些分析不会在 flutter 第一次运行就发送或则任何涉及到 flutter 配置的运行时发出。要禁用报告，请在终端输入 flutter config –no-analytics ，要显示当前设置可以输入 flutter config 。详情请参阅Google的隐私政策： www.google.com/intl/en/policies/privacy。

Android 设置

安装 Android Studio

为 Android 开发 Flutter 应用，你可以使用 Mac ，Windows 或者是 Linux（64 位）机器。

Flutter 要求安装和配置 Android Studio：

  1. 下载并安装 Android Studio。

  2. 启动 Android Studio，并执行 Android Studio 安装向导。这将会安装 Flutter 为 Android 开发所需的最新的 Android SDK ，Android SDK 平台工具和 Android SDK 构建工具。

设置你的 Android 设备

为了在 Android 设备上运行和测试你的 Flutter 应用，你需要一台运行 Android 4.1（ API 级别 16 ）或者更高版本的 Android 设备。

  1. 在你的设备上启动 开发者选项 和 USB 调试，详情说明可在 Android 文档中找到。
  2. 使用 USB 线将设备插入电脑。如果在设备上出现提示，请授权你的电脑访问你的设备。
  3. 在终端运行 flutter devices 命令来验证 Flutter 识别到你连接的 Android 设备。
  4. 运行 flutter run 来启动的你的应用。
    通常情况下， Flutter 使用了 adb 工具所基于的 Android SDK 版本，如果你要安装使用不同的 Android SDK 版本，就必须设置 ANDROID_HOME 环境变量设置为安装目录。

设置 Android 模拟器

准备在 Android 模拟器上运行和测试你的 Flutter 应用，需要按照以下几个步骤来操作：

  1. 在你的电脑上启动 VM 加速。
  2. 启动 Android Studio > Tools > Android > AVD Manager 和选择 Create Virtual Device 。
  3. 选择一个设备的定义和选择 Next 。
  4. 为你的模拟器 Android 版本选择一个或者多个系统镜像，和选择 Next 。推荐使用x86 or x86_64镜像。
  5. 为了提高模拟器性能，选择 Hardware - GLES 2.0 来启动 硬件加速。
  6. 验证 AVD 的配置是否正确，然后选择 Finish 。

有关上述步骤的详细信息,请查阅管理 AVDs 。

  1. 在 Android 虚拟设备管理器中，在工具栏点击 Run。模拟器启动和显示所选操作系统版本和设备的默认界面。
  2. 通过 flutter run 来启动你的应用，连接设备的名称是 Android SDK built for <platform> ，这里的 platform 是指设备 soc 芯片系列，比如 x86 。

Visual Studio Code (VS Code) 配置

VS Code: 包含了运行和调试 Flutter 应用程序的轻量级编辑器。

安装 VS Code

  • VS Code, 1.20.1 或更高版本。

    安装 Dart Code 插件

  1. 启动 VS Code
  2. 依次执行 View>Command Palette…
  3. 在扩展插件安装面板的输入框输入 dart code 关键词，在显示的列表中选择 ‘Dart Code’ 插件，然后点击 Install
  4. 点击 ‘OK’ 重新加载 VS Code

    使用 Flutter Doctor 来验证你的配置

  5. 依次执行 View>Command Palette…
  6. 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ 命令
  7. 在日志打印窗口的 ‘OUTPUT’ 标签中查看打印出的日志信息，看看有没有报错

创建应用程序

  1. 启动 VS Code
  2. 依次执行 View>Command Palette…
  3. 输入 ‘flutter’，选择 ‘Flutter: New Project’ 命令
  4. 输入项目名称（例如：myapp），回车
  5. 找到一个用于保存项目的目录，然后点击蓝色的确认按钮
  6. 项目会自动进行创建，创建完毕之后，main.dart 文件会被自动打开
    以上的命令创建了一个名叫 myapp 的 Flutter 项目，并且放在 ‘myapp’ 文件夹中。这是一个很简单的，基于 Material 组件 的项目。

在这个项目的文件夹中，和项目业务相关的代码都在 lib/main.dart 中。

运行这个程序

  1. 确保在 VS Code 的右下角能看到目标设备的名称
  2. 使用键盘上的 F5 按钮，或者依次执行 Debug>Start Debugging
  3. 等待应用程序启动
  4. 如果一切正常，构建完应用程序之后，你就可以在你的手机或者模拟器上看到应用程序的起始界面了：

http://doc.flutter-dev.cn/images/flutter-starter-app-android.png

尝试一下热重载

Flutter 提供了一种非常高效的开发方式，叫做 热重载 ，这个功能可以在应用程序运行的状态下替换部分代码，并且运行中的程序不会丢失任何状态。简单的对你的源代码做一些修改，告诉你的 IDE 或者命令行工具，你需要进行热重载，然后你就可以在模拟器或者手机中看到你的修改了。

  1. 在你最钟爱的 Dart 开发编辑器中打开 lib/main.dart 文件
  2. 把字符串
    'You have pushed the button this many times:' 修改为
'You have clicked the button this many times:'
    不需要点击 ‘Stop’ 按钮；让应用程序继续运行。
    只需要将代码 全部保存 (cmd-s / ctrl-s)，或者点击 热重载 按钮（那个绿色的带箭头的转圈图标按钮）你就可以看到你的修改已经被执行了。

你几乎可以立刻就在应用程序里看到你对字符串的修改。

下一步 更多

Powered by Hexo
Theme - Material