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

系统要求

System requirements

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

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

  • 操作系统:64 位的 Chrome OS 系统(需开启 Linux (Beta) 功能)

    Operating Systems: Chrome OS (64-bit) with Linux (Beta) turned on

  • 磁盘空间: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

获取 Flutter SDK{#get-sdk}

Get the Flutter SDK

  1. 下载下面的安装包以获得最新的 Flutter SDK 的 stable发布包。

    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 archive page.

  2. 在文件管理应用中,将下载好的文件从 “Downloads” 拖拽到 “Linux Files” 中,以便能够从 Linux container 中访问到 Flutter。

    In the Files app, drag-and-drop the downloaded file from “Downloads” to “Linux Files” to access Flutter from your Linux container.

  3. 将文件解压到合适的地方,例如:

    Extract the file in the desired location, for example:

    $ cd ~/development
    $ tar xf ~/Downloads/flutter_linux_vX.X.X-stable.tar.xz
    

    如果你不想安装安装包的补丁,你可以跳过步骤 1 或步骤 2,直接获取 Github 上 Flutter 仓库 的源码并执行以下命令:

    If you don’t want to install a fixed version of the installation bundle, you can skip steps 1 and 2. Instead, get the source code from the Flutter repo on GitHub with the following command:

    $ git clone https://github.com/flutter/flutter.git
    

    你也可以按你的需要切换分支或者tag。例如,你可以使用 stable 版本的分支:

    You can also change branches or tags as needed. For example, to get just the stable version:

    $ git clone https://github.com/flutter/flutter.git -b stable --depth 1
    
  4. flutter 工具添加到环境变量中:

    Add the flutter tool to your path:

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

    用这个命令添加 PATH 仅在当前的命令行视窗生效。要将 Flutter 永久添加到环境变量中,请参阅 更新环境变量值

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

  5. 可选步骤,提前下载二进制开发文件:

    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

该命令将检查你的环境情况并显示汇报在命令行窗口中。 Dart SDK 已经绑在 Flutter 中了;你无需单独再安装 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.cn/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.

更新你的环境变量

Update your path

获取 Flutter SDk 中说的一样,你可以通过命令行更新当前窗口的环境变量。但你也许会想要让它一直生效,在任何终端中都可以运行 flutter 命令。

You can update your PATH variable for the current session 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 的文件夹,你需要在第三步用到它。

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

  2. 在你的 shell 中打开(或者创建)rc 文件。例如,Linux 默认使用 Bash shell,所以编辑 $HOME/.bashrc 文件。如果你使用不同的 shell,那么在你电脑上的文件路径以及文件名必须不同。

    Open (or create) the rc file for your shell. For example, Linux uses the Bash shell by default, so edit $HOME/.bashrc. If you are using a different shell, the file path and filename will be different on your machine.

  3. 添加下面内容,并将 [PATH_TO_FLUTTER_GIT_DIRECTORY] 改到你 clone Flutter 的 git 仓库目录下。

    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/.<rc file> 刷新当前窗口或者打开一个新的终端窗口就会自动更新这个文件。

    Run source $HOME/.<rc file> to refresh the current window, or open a new terminal window to automatically source the file.

  5. 通过运行以下命令验证 flutter/bin 确实加到环境变量中了:

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

    $ echo $PATH
    

    通过运行以下命令验证 flutter 命令:

    Verify that the flutter command is available by running:

    $ which flutter
    

直接更新环境变量

Update path directly

在某些情况下,你的分发可能无法长期获取使用上面提到的环境变量。发生这种情况时,你可以直接更改环境变量文件。但这需要管理员权限:

In some cases, your distribution may not permanently acquire the path when using the above directions. When this occurs, you can change the environment variables file directly. These instructions require administrator privileges:

  1. 找到你存放 Flutter SDK 的目录。

    Determine the directory where you placed the Flutter SDK.

  2. 定位系统根目录下的 etc 文件夹,然后用 root 权限打开 profile 文件。

    Locate the etc directory at the root of the system, and open the profile file with root privileges.

      $ sudo nano /etc/profile
    
  3. 更新 Flutter SDK 文件夹所在路径的字符串。

    Update the PATH string with the location of your Flutter SDK directory.

    if [ "`id -u`" -eq 0 ]; then
       PATH="..."
    else
       PATH="/usr/local/bin:...:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
    fi
    export PATH
    
  4. 结束当前会话并重启系统。

    End the current session or reboot your system.

  5. 当你重新启动了新会话,请确认 flutter 命令已经可以执行:

    Once you start a new session, verify that the flutter command is available by running:

    $ which flutter
    

更多关于如何在 Bash 中配置环境变量的信息请查看这条 StackExchange 提问。更多关于如何在 Z shell 中配置环境变量的信息请查看 这条 StackExchange 提问

For more details on setting the path in Bash, see this StackExchange question. For information on setting the path in Z shell, see this StackOverflow question.

Android 设置

Android setup

安装 Android Studio

Install Android Studio

  1. 下载并安装 Android Studio

    Download and install Android Studio.

  2. 启动 Android Studio,并前往 ‘Android Studio Setup Wizard’,这将会帮你安装最新版本的 Android SDK,Android SDK 命令行工具,以及 Android SDK 构建工具,等一系列你在构建 Android 应用时会需要用到的组件。

    Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Command-line Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

  3. 同意 Android 许可协议(Android licenses)。

    Accept Android licenses.

$ flutter doctor --android-licenses

设置你的 Android 设备

Set up your Android device

在 Android 设备上运行或测试你的 Flutter 之前,需要确保 Android 设备运行在 4.1(API 级别 16)或者更高的版本。

To prepare to run and test your Flutter app on an Android device, you need an Android device running Android 4.1 (API level 16) or higher.

  1. 在你的设备上启动开发者选项以及 USB 调试工具。详细步骤请查看 Android 文档

    Enable Developer options and USB debugging on your device. Detailed instructions are available in the Android documentation.

  2. 通过 USB 数据线连接你的手机与电脑。在 Chromebook 上,你可能会看到 “USB device detected”(USB 设备已连接)的通知。如果你的 Android 设备上出现点击 “Connect to Linux”(连接到 Linux)的提示,请授权计算机访问你的设备。

    Using a USB cable, plug your phone into your computer. On your Chromebook, you may see a notification for “USB device detected”. Click on “Connect to Linux” If prompted on your Android device, authorize your computer to access your device.

  3. 在命令行运行 flutter devices 命令以验证 Flutter 能够识别你的 Android 设备连接。默认情况下,flutter 使用基于 adb 工具的 Android SDK 版本。如果你想要 Flutter 运行并安装在不同的 Android SDK 中的话,你必须将 ANDROID_SDK_ROOT 环境变量设置为该 SDK 的安装目录。

    In the terminal, run the flutter devices command to verify that Flutter recognizes your connected Android device. By default, Flutter uses the version of the Android SDK where your adb tool is based. If you want Flutter to use a different installation of the Android SDK, you must set the ANDROID_SDK_ROOT environment variable to that installation directory.

在 Chromebook 上部署

Deploy to your Chromebook

在最新版本的 Chrome OS 中,你不再需要将设备置为开发者模式,就可以将你的应用部署到 Chrome OS 设备中。

With the latest version of Chrome OS, you no longer need to put your device into developer mode to push apps to your Chrome OS device.

  1. 在设置中开启 ADB。注意,这将会需要你重启一次电脑。

    Enable ADB in Settings. Note that this will require you to reboot your device once.

  2. 在终端中运行 flutter devices。如果出现提示,请授权访问安卓容器。通过 flutter devices 验证是否列出了您的 Chrome 操作系统设备作为识别的设备。

    In the Terminal, run flutter devices. If prompted, authorize access to the Android container. Verify that flutter devices lists your Chrome OS device as a recognized device.

下一步

Next step

编辑器设置。

Set up your preferred editor.

Flutter 和 Chrome OS 的小技巧

Flutter & Chrome OS tips & tricks

对于当前版本的 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

然后在你的 Chrome 浏览器里打开 URL: http://127.0.0.1:8000/#,上面最后一个 flutter run 命令会输出一个类似 http://127.0.0.1:8080/auth_code=/ 的 URL,使用这个 URL 并选择 “Connect” 来启动适用于 Android 应用的 Flutter DevTools。

Then, navigate to http://127.0.0.1:8000/# in your Chrome browser and enter the URL to your application. The last flutter run command you just ran should output a URL similar to the format of http://127.0.0.1:8080/auth_code=/. Use this URL and select “Connect” to start the Flutter DevTools for your Android app.

Chrome OS 上的 Flutter lint 分析

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, use the following command:

$ flutter analyze

运行后的输出如下:

Sample output for this command 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 for instructions on how you can make this functionality work with your Chrome OS targeted Flutter app.