在 Chrome OS 上安装和配置 Flutter 开发环境

系统要求

System requirements

要安装并运行 Flutter,你的开发环境必须满足如下最低配置要求:

To install and run Flutter, your development environment must meet these minimum requirements:

  • 操作系统:Linux (64-bit )

    Operating Systems: Linux (64-bit)

  • 磁盘空间:600 MB (不包括 IDE/tools 所占的空间)

    Disk Space: 600 MB (does not include disk space for IDE/tools).

  • 工具:Flutter 需要环境中安装如下命令行工具

    Tools: Flutter depends on these command-line tools being available in your environment.

    • bash
    • curl
    • git 2.x
    • mkdir
    • rm
    • unzip
    • which
    • xz-utils
  • 共享库:Flutter 的 test 命令依赖下面的库

    Shared libraries: Flutter test command depends on this library being available in your environment.

    • libGLU.so.1 - 由 mesa 包提供,比如在 Ubuntu/Debian 系统上对应的包是 libglu1-mesa

      libGLU.so.1 - provided by mesa packages such as libglu1-mesa on Ubuntu/Debian

目前为了最佳体验,你需要把 Chrome OS 设备设置为开发者模式(因为需要向 Chrome OS 设备推送应用程序)。如果想了解更多详细信息,请参考 how to enable developer mode on you Chromebook

For the best experience right now, you should put your Chrome OS Device into developer mode (this is necessary to push apps on the Chrome OS Device). For more information, see how to enable developer mode on you Chromebook.

获取 Flutter SDK

Get the Flutter SDK

  1. 下载以下安装包来获取最新的 stable Flutter SDK:

    Download the following installation bundle to get the latest stable release of the Flutter SDK:

    (loading…)

    想要获取到其他版本的安装包,请参阅 SDK 版本列表 页面。

    For other release channels, and older builds, see the SDK releases page.

  2. 将文件解压到目标路径, 比如:

    Extract the file in the desired location, for example:

    $ cd ~/development
    $ tar xf ~/Downloads/flutter_linux_vX.X.X-stable.tar.xz
    
  3. 配置 flutter 的 PATH 环境变量:

    Add the flutter tool to your path:

    $ export PATH="$PATH:`pwd`/flutter/bin"
    

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

    This command sets your PATH variable for the current terminal window only. To permanently add Flutter to your path, see Update your path.

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

    Optionally, pre-download development binaries:

    flutter 命令行工具会下载不同平台的开发二进制文件,如果需要一个封闭式的构建环境,或在网络可用性不稳定的情况下使用等情况,你可能需要通过下面这个命令预先下载 iOS 和 Android 的开发二进制文件:

    The flutter tool downloads platform-specific development binaries as needed. For scenarios where pre-downloading these artifacts is preferable (for example, in hermetic build environments, or with intermittent network availability), iOS and Android binaries can be downloaded ahead of time by running:

    $ flutter precache
    

    更多使用方式,请使用 flutter help precache 命令查看。

    For additional download options, see flutter help precache.

现在你可以愉快地运行 Flutter 的命令行啦!

You are now ready to run Flutter commands!

运行 flutter doctor 命令

Run flutter doctor

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

Run the following command to see if there are any dependencies you need to install to complete the setup (for verbose output, add the -v flag):

$ flutter doctor

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

This command checks your environment and displays a report to the terminal window. The Dart SDK is bundled with Flutter; it is not necessary to install Dart separately. Check the output carefully for other software you might need to install or further tasks to perform (shown in bold text).

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

For example:

[-] 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.dev/setup/#android-setup for detailed instructions.

之后的部分会向你描述如果执行这些命令来完成整体的配置过程。

The following sections describe how to perform these tasks and finish the setup process.

当你安装了任一缺失部分的依赖后,可以再次运行 flutter doctor 命令来确认是否成功安装。

Once you have installed any missing dependencies, run the flutter doctor command again to verify that you’ve set everything up correctly.

更新 PATH 环境变量

Update your path

正如获取 Flutter SDK 一文中所展示你可以仅仅在当前命令行会话中更新你的 PATH 环境变量。但你也许想让这个配置永久生效,这样就可以在任意一个命令行会话中使用 flutter 命令了。

You can update your PATH variable for the current session only at the command line, as shown in Get the Flutter SDK. You’ll probably want to update this variable permanently, so you can run flutter commands in any terminal session.

以下配置环境变量让其永久生效的方法在不同的机器上有略微的差别。基本上方法都是在某一个文件中增加一句命令,让它在每次新的命令行窗口打开时都执行一遍。比如:

The steps for modifying this variable permanently for all terminal sessions are machine-specific. Typically you add a line to a file that is executed whenever you open a new window. For example:

  1. 首先决定你想要将 Flutter SDK 放置在哪一个目录内,获取并记录这个目录的路径,你将要在第 3 步中用到它。

    Determine the directory where you placed the Flutter SDK. You will need this in Step 3.

  2. 打开(或者创建)$HOME/.bash_profile,这里的路径和文件名在你的机器上可能会有所不同。

    Open (or create) $HOME/.bash_profile. The file path and filename might be different on your machine.

  3. 在文件中增加下列这行命令,并将其中的 [PATH_TO_FLUTTER_GIT_DIRECTORY] 更改为你第一步获取到的路径:

    Add the following line and change [PATH_TO_FLUTTER_GIT_DIRECTORY] to be the path where you cloned Flutter’s git repo:

    $ export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    
  4. 运行 source $HOME/.bash_profile 来刷新当前命令行窗口。

    Run source $HOME/.bash_profile to refresh the current window.

  5. 通过运行以下命令来验证 flutter/bin 文件夹是否已经添加到 PATH 环境变量中:

    Verify that the flutter/bin directory is now in your PATH by running:

    $ echo $PATH
    

想要查看更加详细的内容,请查看 StackExchange 中的一个提问

For more details, see this StackExchange question.

Android 安装(无需 Android Studio)

Android setup (without Android Studio)

安装 Java

Install Java

$ sudo apt update
$ sudo apt install default-jre
$ sudo apt install default-jdk

安装 Android SDK

Install the Android SDK’s

下载 Android SDK tools,然后勾选 “Command Line Tools only” 选项。

Download the Android SDK tools and select the “Command Line Tools only” option.

通过 Chrome OS Files 应用程序将下载的 zip 文件拖到 Linux Files 文件夹。本操作会将该文件添加到家目录下,相对路径用 $TOOLS_PATH 表示家目录下的目录(~/)。

Drag and drop the downloaded zip into your Linux Files folder through the Chrome OS Files app. This moves it to the home directory, notated as $TOOLS_PATH going forward (~/).

解压缩下载的工具并且将解压缩的文件添加到路径中。

Unzip the tools and then add it to your path.

$ unzip ~/sdk-tools-linux*
$ export PATH="$PATH:$TOOLS_PATH/tools/bin"

将 SDK 包放置到你熟悉的路径下(对应的路径变量是 $PLATFORM_PATH)。然后使用 sdkmanager 工具下载 SDK 包(这里的版本号是最新的发布版本):

Navigate to where you’d like to keep the SDK packages ($PLATFORM_PATH in these snippets) and download the SDK packages using the sdkmanager tool (version numbers here are the latest at time of publishing):

$ sdkmanager "build-tools;28.0.3" "emulator" "tools" "platform-tools" "platforms;android-28" "extras;google;google_play_services" "extras;google;webdriver" "system-images;android-28;google_apis_playstore;x86_64"

将 Android 平台工具添加到你的路径下(和 sdkmanager 所处的路径一致,也就是 $PLATFORM_PATH):

Add the Android platform tools to your path (you should find this where you ran the sdkmanager command: $PLATFORM_PATH):

$ export PATH="$PATH:$PLATFORM_PATH/platform-tools"

将 ANDROID_HOME 设置为你之前解压缩 sdk-tools 的路径(也是你的 $TOOLS_PATH 路径):

Set the ANDROID_HOME variable to where you unzipped sdk-tools before (aka your $TOOLS_PATH):

$ export ANDROID_HOME="$TOOLS_PATH"

现在,你可以运行 flutter doctor 来获取 android-licenses:

Now, run flutter doctor to accept the android-licenses:

$ flutter doctor --android-licenses

下一步

Next step

编辑器设置。

Set up your preferred editor.

Flutter 和 Chrome OS 的小技巧

Flutter & Chrome OS tips & tricks

如何运行应用程序?在 Chrome OS 上,你可以直接连接你的手机设备(目前只支持开发者频道的版本)或者直接推送到设备的 Android 容器中。你需要打开设备的开发者模式,然后通过 ADB 连接到本地容器中:

Wondering how to run your app? On Chrome OS, you can either connect your phone (currently on Dev channel only) or push directly to the Android container on device. To do that you must enable Developer mode on your machine, and then connect to the local container with ADB:

$ adb connect 100.115.92.2:5555

如何为 Chrome OS 构建你的第一个应用程序呢?克隆代码仓库 flutter-samples,然后直接编译我们的 Chrome OS Best Practices:

Want to build your first app optimized for Chrome OS? Clone the flutter-samples repo and build our specific Chrome OS Best Practices example:

$ git clone https://github.com/flutter/samples
$ cd samples/chrome-os-best-practices
$ flutter run

在 Chrome OS 的键盘上如何进入使用 F-Key 功能键?

Wondering how to access your favorite F-Key shortcuts on the Chrome OS keyboard?

  • 按住搜索按钮和数字 1 到 = 按钮来对应 F1 到 F12。

    Press the search key along with 1 through = to access F1–F12.

对于当前版本的 Chrome OS,只有 Crostini 的几个端口对环境开放。下面这个示例讲解了如何在可用端口上启动 Flutter DevTools:

For the current versions of Chrome OS, only certain ports from Crostini are exposed to the rest of the environments. Here’s an example of how to launch Flutter DevTools for an Android app with ports that will work:

$ flutter pub global run devtools -p 8000
$ cd path/to/your/app
$ flutter run --observatory-port=8080

然后在浏览器中打开地址 http://localhost:8000/?port=8080

Then, navigate to http://localhost:8000/?port=8080 in your Chrome browser.

Flutter Chrome OS lint analysis

Flutter 团队在 Chrome OS 中添加了 Lint Analysis 检查,用于保证所构建的应用程序在 Chrome OS 上运行正常。它会检查在 AndroidManifest 里是否存在所需的硬件是 Chrome OS 设备上所不支持的,是否向不支持的硬件请求了权限,以及是否存在会降低体验效果的代码。

The Flutter team is adding Chrome OS specific Lint Analysis checks that are available to make sure that the app that you’re building is going to work well on Chrome OS. It looks for things like required hardware in your Android Manifest that aren’t available on Chrome OS devices, permissions that imply requests for unsupported hardware, as well as other properties or code that would bring a lesser experience on these devices.

要启用上述的功能特性,你需要创建一个新的或者更新你现有的 analysis_options.yaml 文件,使其包含如下选项:

To activate these, you need to create a new analysis_options.yaml file to include these options.

(如果你已经有一个 analysis_options.yaml,直接更新它的内容即可)

(If you have an existing analysis_options.yaml file, you can update it)

include: package:flutter/analysis_options_user.yaml
analyzer:
 optional-checks:
   chrome-os-manifest-checks

从命令行运行下面的内容:

To run these from the command line:

$ flutter analyze

运行后的输出如下:

Sample output for these might look like:

Analyzing ...                                                      
warning • This hardware feature is not supported on Chrome OS • 
android/app/src/main/AndroidManifest.xml:4:33 • unsupported_chrome_os_hardware

目前该功能仍然处于开发阶段,不过你可以在未来返回来根据本文档的内容在 Chrome OS 上开发 Flutter 应用程序。

This functionality is still under development, but check back here for instructions on how you can make this functionality work with your Chrome OS targeted Flutter app.