安装 Flutter 开发环境

移动应用开发框架,也适用于桌面和网页应用。

目录

现在我需要在 Google Play Store 上更新应用,使用新的 Android SDK,因此我正在打磨并发布这篇几年前写的老版指南。

Google PlayStore 页面截图,显示 Logical Fallacy Detector 应用

来自 PlayStore 应用页面的截图。

这篇指南最初写于 2022 年 8 月,于 2024 年 4 月更新并发布。因此,它可能包含一些过时的内容。

步骤

在 Linux 电脑上安装 Flutter 的步骤

安装开发工具

https://docs.flutter.dev/get-started/install/linux/android

检查工具

which bash file mkdir rm which

安装软件包

sudo apt-get update -y && sudo apt-get upgrade -y;
sudo apt-get install -y curl git unzip xz-utils zip libglu1-mesa

安装 Android 应用开发所需的软件包

sudo apt-get install \
    libc6:i386 libncurses5:i386 \
    libstdc++6:i386 lib32z1 \
    libbz2-1.0:i386

安装 Linux 应用开发所需的软件包

sudo apt-get install \
      clang cmake git \
      ninja-build pkg-config \
      libgtk-3-dev liblzma-dev \
      libstdc++-12-dev

安装 VSCode

https://code.visualstudio.com/docs/setup/linux

有一个链接可以下载适用于 Linux 的 VSCode Debian 包:https://go.microsoft.com/fwlink/?LinkID=760868

然后像这样安装它:

sudo apt install ./<file>.deb

# 如果你使用的是较旧的 Linux 发行版,你需要运行以下命令:
# sudo dpkg -i <file>.deb
# sudo apt-get install -f # 安装依赖项

其他 Linux 发行版也可以在 “setup/linux” 页面上找到。

安装 VSCode 的 Flutter 扩展:https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

启动 VS Code 快速打开(Ctrl+P),粘贴以下命令并按回车。

ext install Dart-Code.flutter

安装 Chrome

为了网页开发 - 安装 Chrome:

https://www.google.com/chrome/dr/download/

安装 Android Studio

https://developer.android.com/studio/install#linux

Ubuntu 64 位系统所需的库:

sudo apt-get install libc6:i386 libncurses5:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

基于 Ubuntu 24.04 的系统:

sudo apt-get install libc6:i386 libncurses6:i386 libstdc++6:i386 lib32z1 libbz2-1.0:i386

从以下链接下载最新版本的 Android Studio:https://developer.android.com/studio

进入 “{installation home}/bin” 并输入:

./studio.sh

编辑 ~/.bash_profile

export PATH=$PATH:~/Apps/android-studio/bin

启用 KVM 加速模式

https://developer.android.com/studio/run/emulator-acceleration?utm_source=android-studio#vm-linux

sudo apt-get install cpu-checker
egrep -c '(vmx|svm)' /proc/cpuinfo

输出为 1 或更大意味着虚拟化是被支持的。输出为 0 意味着你的 CPU 不支持硬件虚拟化。

预期输出:

INFO: /dev/kvm exists
KVM 加速可以使用

在 Linux 上安装 KVM 使用以下命令安装 KVM:

Cosmic (18.10) 或更高版本:

sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils

安装 Flutter SDK

安装 SDK https://docs.flutter.dev/get-started/install/linux

https://docs.flutter.dev/get-started/install/linux/android

可以手动安装 SDK 或通过 VSCode 安装

手动安装说明:

下载 https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.2-stable.tar.xz

cd prj

tar xf ~/Downloads/flutter_linux_3.3.2-stable.tar.xz

export PATH=$PATH:~/prj/flutter/bin

which flutter

flutter precache

flutter config --no-analytics

flutter config

VSCode 说明:

在 VS Code 命令(Ctrl+p)中:

ext install Dart-Code.flutter

在命令面板(Ctrl+shift+p)中,输入 flutter。

选择 Flutter: New Project。

VS Code 会提示你定位计算机上的 Flutter SDK。

如果你已经安装了 Flutter SDK,点击 Locate SDK。

如果你没有安装 Flutter SDK,点击 Download SDK。

如果没有按照开发工具的前提条件安装 Git,这个选项会将你引导到 Flutter 安装页面。

当提示 Which Flutter template? 时,忽略它。按 Esc。你可以在检查开发环境后创建一个测试项目。

安装到 ~/Apps 后:

echo 'export PATH="~/Apps/flutter/bin:$PATH"' >> ~/.bash_profile

source ~/.bash_profile

要禁用遥测报告,请运行以下终端命令:

dart --disable-analytics

安装 Android Studio

进入 “{installation home}/bin” 并输入:

./studio.sh

编辑 ~/.bash_profile

export PATH=$PATH:/home/yourname/Apps/android-studio/bin

https://docs.flutter.dev/get-started/editor

  • 启动 VS Code。

  • 调出 查看 > 命令面板。

  • 输入 “install”,并选择 扩展: 安装扩展。

  • 在扩展搜索字段中输入 “flutter”,在列表中选择 Flutter,然后点击 安装。这也会安装所需的 Dart 插件。

  • 调出 查看 > 命令面板 (Ctrl+Shift+P)

  • 输入 “doctor”,并选择 Flutter: 运行 Flutter Doctor。(或在终端窗口中运行 flutter doctor)

  • 在 OUTPUT 面板中查看输出以检查是否有问题。确保从下拉菜单中选择 Flutter 在不同的输出选项中。

检查

flutter doctor
[!] Android 工具链 - 为 Android 设备开发 (Android SDK 版本 34.0.0)
    ✗ cmdline-tools 组件缺失
      运行 `path/to/sdkmanager --install "cmdline-tools;latest"`
      有关更多详细信息,请参阅 https://developer.android.com/studio/command-line。
    ✗ Android 许可状态未知。
      运行 `flutter doctor --android-licenses` 以接受 SDK 许可。
      有关更多详细信息,请参阅 https://flutter.dev/docs/get-started/install/linux#android-setup。
[✗] Chrome - 为网页开发 (无法在 google-chrome 找到 Chrome 可执行文件)
    ! 无法找到 Chrome。请尝试设置 CHROME_EXECUTABLE 为一个 Chrome 可执行文件。
[✓] Linux 工具链 - 为 Linux 桌面开发

安装 cmdline-tools:

  • 打开 Android Studio,
  • 然后 SDK(在更多中),
  • 然后勾选 Android SDK cmdline-tools 最新版本,
  • 然后点击 应用

接受许可

flutter doctor --android-licenses

如果使用 chromium:

which chrome

export CHROME_EXECUTABLE=/usr/lib/chromium/chrome

检查 Flutter 版本并升级它

Flutter 版本检查:

flutter --version

要升级 Flutter 版本,请运行

flutter upgrade

创建新的 Flutter 项目

  • 调出 查看 > 命令面板 (Ctrl+Shift+P)。
  • 输入 “flutter”,并选择 Flutter: New Project。
  • 选择 Application。
  • 创建或选择新项目文件夹的父目录。
  • 输入项目名称,例如 my_app,然后按 Enter。
  • 等待项目创建完成并出现 main.dart 文件。

Flutter 中的调试

ctrl+p

>flutter: 选择设备

日志记录

https://docs.flutter.dev/testing/code-debugging#logging

stderr.writeln(‘print me’);

import 'dart:developer' as developer;

void main() {
  developer.log('log me', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}
---
import 'dart:convert';
import 'dart:developer' as developer;

void main() {
  var myCustomObject = MyCustomObject();

  developer.log(
    'log me',
    name: 'my.app.category',
    error: jsonEncode(myCustomObject),
  );
}

断点

import 'dart:developer';

void someFunction(double offset) { debugger(when: offset > 30.0); // … }

部署到设备

为你的应用创建 APK 并尝试以下命令

清理你的项目

flutter clean

获取包

flutter pub get

构建你的 APK

flutter build apk --release

在你的机器上找到你的 APK

你的项目名称\build\app\outputs\flutter-apk(在发布模式下)

复制这个 APK 并安装到你的移动设备上

Dart 中的睡眠

在异步代码中

  await Future.delayed(Duration(seconds: 1)); 

在同步代码中

  import 'dart:io';
  sleep(Duration(seconds:1));

有用的链接

有用的包

https://pub.dev/packages/http

https://pub.dev/packages/flutter_easyloading

https://pub.dev/packages/flutter_spinkit

VSCode 扩展

https://medium.com/codex/my-top-5-flutter-extensions-for-vs-code-f36936518ff8

图标:https://api.flutter.dev/flutter/material/Icons-class.html

所有图标:https://fonts.google.com/icons?selected=Material+Icons

==== 从互联网获取数据 ====

https://docs.flutter.dev/cookbook/networking/authenticated-requests

与构建和发布 Android 应用相关:

Web Flutter 应用

  • 构建:https://docs.flutter.dev/platform-integration/web/building
  • 部署到不同环境:https://docs.flutter.dev/deployment

VSCode Live 服务器插件

Flutter 与后端