安装 Flutter 开发环境
移动应用开发框架,也适用于桌面和网页应用。
现在我需要在 Google Play Store 上更新应用,使用新的 Android SDK,因此我正在打磨并发布这篇几年前写的老版指南。
来自 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/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 服务器插件