「Flutter」Build for Any Screen

认识

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 语言开发，可以编译成本地代码。

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

组成

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 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 相关文件。

性质

支持的平台

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

参考

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

Filed under: K4NZDROID - @ 12:10 AM