「Flutter」- 跨平台应用开发 | Build for Any Screen

0

认识

官网：https://flutter.dev/
文档：https://docs.flutter.dev/
仓库：https://github.com/flutter/flutter

Flutter 是一个开源的跨平台 UI 开发框架，由 Google 开发并维护，支持快速构建高性能的移动、Web、桌面和嵌入式应用。它的核心设计理念是 “一次编写，多端运行”，同时保持原生级别的性能。

Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

虽然 Flutter 最初是为移动应用程序开发设计的，但现在也支持桌面应用程序开发。Flutter 使用 Dart 语言开发，可以编译成本地代码。

组成

Flutter 的组成可以概括为：引擎（渲染 + Dart）+ 框架（Widgets）+ 工具链 + 多平台嵌入。

这种分层设计使其兼具高性能、灵活性和跨平台一致性，成为现代应用开发的热门选择。

核心设计思想

  1. 一切皆 Widget：UI 由嵌套的 Widget 组合而成（如布局、样式、交互）。
  2. 不可变 UI：Widget 是不可变的，通过重建（而非修改）更新界面。
  3. 响应式框架：状态变化自动触发 UI 更新（类似 React）。

引擎 Engine

作用：Flutter 的核心底层框架，负责渲染、输入事件处理、Dart 运行时等核心功能。

关键组件：

  • Skia：2D 图形渲染引擎（Google 开源），负责绘制 Flutter 的 UI。
  • Dart Runtime：执行 Dart 代码的虚拟机（JIT 开发模式 / AOT 发布模式）。
  • Platform Channels：提供与原生平台（Android/iOS）通信的能力（如调用原生 API）。
  • Text Rendering：文本渲染（如字体、排版）。

特点：

  • 引擎使用 C/C++ 编写，确保高性能。
  • 直接调用 Skia 绘制 UI，不依赖平台原生控件，因此能实现高度一致的跨平台渲染。

框架 Framework

Flutter 的 Dart 层框架，为开发者提供了一套丰富的 API，分为三层：

### a. 基础层（Foundation）
作用：提供最基础的类和服务（如动画、手势、绘图）。
关键库：

  • `dart:ui`：底层 UI 库（与引擎交互）。
  • `package:flutter/foundation.dart`：基础工具类（如 `Key`、`Diagnostics`）。

### b. 渲染层（Rendering）
作用：处理 UI 布局和绘制（基于 “组合（Composition）” 而非继承的渲染树）。
关键类：

  • `RenderObject`：渲染树的基类，负责布局（Layout）和绘制（Paint）。
  • `Widget` → `Element` → `RenderObject`：Flutter 的核心渲染流程。

### c. 组件层（Widgets）
作用：提供可复用的 UI 组件（Widgets），开发者直接使用的交互式元素。
关键库：

  • `package:flutter/widgets.dart`：核心 Widget（如 `Container`、`Text`）。
  • `package:flutter/material.dart`：Material Design 风格组件。
  • `package:flutter/cupertino.dart`：iOS 风格组件（Cupertino）。

语言 Dart

作用：Flutter 的编程语言，由 Google 开发，专为 UI 构建优化。
关键特性：

  • JIT & AOT 编译：开发时快速刷新（JIT），发布时高效运行（AOT）。
  • 响应式编程：通过 `setState`、`Stream`、`Provider` 等实现状态管理。
  • 单线程 + Isolate：支持异步编程（`async/await`），避免 UI 卡顿。

开发工具 Tooling

Flutter 提供了一套完整的开发工具链：

  • CLI：项目管理（`create`、`run`、`build`）、包管理（`pub get`）。
  • Hot Reload：实时更新 UI 而不丢失应用状态。
  • DevTools：调试性能、检查 Widget 树、网络请求等。
  • IDE 插件：Android Studio、VS Code 的 Flutter 扩展。

平台嵌入层（Embedder）

作用：将 Flutter 引擎适配到不同平台（如 Android、iOS、Windows、macOS）。

关键功能：

  • 提供平台线程管理、事件循环、渲染表面（如 Android 的 `Surface`、iOS 的 `CALayer`）。
  • 处理平台原生交互（如生命周期、权限）。

包生态系统（Pub）

Pub 仓库：Dart 和 Flutter 的官方包仓库 https://pub.dev

常用包类型：

  • UI 组件（如 `flutter_bloc`、`provider`）。
  • 工具类（如 `http`、`shared_preferences`）。
  • 平台适配（如 `webview_flutter`、`camera`）。

性质

支持的平台

Flutter 支持多平台，通过同一套代码生成不同平台的产物：
移动端：Android、iOS
Web：编译为 HTML/CSS/JavaScript
桌面端：Windows、macOS、Linux
嵌入式：Raspberry Pi、汽车系统等（通过 Flutter Embedding API）。

依赖管理

DeepSeek / flutter 强制更新依赖

清除缓存并重新获取依赖
flutter pub cache repair
flutter pub get

删除 pubspec.lock 文件后更新
rm pubspec.lock
flutter pub upgrade

强制覆盖所有依赖
flutter pub upgrade –force

针对特定依赖强制更新
flutter pub upgrade 包名

清除整个 Flutter 缓存（更彻底的方法）
flutter clean
flutter pub get

查看依赖树
flutter pub deps

构建

docker.io/instrumentisto/flutter:3.29.3
ccr.ccs.tencentyun.com/d3rm-3rd/docker.io_instrumentisto_flutter:3.29.3

ghcr.io/cirruslabs/flutter:3.29.3
ccr.ccs.tencentyun.com/d3rm-3rd/ghcr.io_cirruslabs_flutter:3.29.3

安装 Flutter SDK

通过合理配置这两个变量，可以显著提升 Flutter 和 Dart 包管理在受限网络环境下的可用性。

在中国网络环境下使用 Flutter | https://docs.flutter.cn/community/china

flutter –version
Flutter 3.29.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 35c388afb5 (3 months ago) • 2025-02-10 12:48:41 -0800
Engine • revision f73bfc4522
Tools • Dart 3.7.0 • DevTools 2.42.2

然后运行安装 flutter 库：flutter pub get

打包正式：flutter build web –dart-define=APP_ENV=prd
打包测试：flutter build web –dart-define=APP_ENV=dev

构建产物：会在 build 下面的 web（等于 dist）

PUB_HOSTED_URL 与 FLUTTER_STORAGE_BASE_URL

### 1. `PUB_HOSTED_URL`
作用：指定 Dart 包管理器（`pub`）使用的包仓库（Pub 仓库）的镜像地址。

“`bash


https://pub.flutter-io.cn # 中国镜像

“`

用途：

  • 当运行 `flutter pub get` 或 `dart pub add` 等命令时，Flutter 会从该 URL 下载依赖的 Dart 包。
  • 如果官方源访问慢或不可达，通过切换为镜像源可以加速依赖下载。

### 2. `FLUTTER_STORAGE_BASE_URL`
作用：指定 Flutter SDK 本身的存储下载地址（包括 SDK 二进制文件、引擎编译产物等）。

“`bash


https://storage.flutter-io.cn # 中国镜像

“`

用途：

  • 当执行 `flutter upgrade` 或首次安装 Flutter 时，会从该地址下载 Flutter SDK 的更新或组件。
  • 如果无法访问 Google 服务，通过切换为镜像源可以正常下载 Flutter 相关文件。

改进

Kivy https://github.com/kivy/kivy

Shorebird https://github.com/shorebirdtech/shorebird

  • 其是个开源的 Flutter 代码推送解决方案，允许开发者在不经过应用商店审核的情况下，直接向用户设备更新 Dart 代码。类似于 React Native 的 CodePush，但是专门为 Flutter 设计。

参考

DeepSeek / 在 flutter 中，PUB_HOSTED_URL 与 FLUTTER_STORAGE_BASE_URL 两个环境变量的作用
DeepSeek / 介绍 Flutter 的组成