Flutter
使用 Dart 和自有渲染引擎构建移动、Web 与桌面应用的跨平台 UI 工具包。
项目概述
Flutter 通过声明式 Widget、Dart 工具链和 Impeller 渲染引擎,在一套代码库中交付 Android、iOS、Web、Windows、macOS 与 Linux 应用。
Flutter 是 Google 发起并由开源社区共同维护的跨平台 UI 工具包。应用使用 Dart 编写,界面由不可变 Widget 组合而成;状态变化后 build 方法生成新的 Widget 描述,Framework 会复用 Element 与 RenderObject,并只更新需要重新布局或绘制的部分。与把组件映射为系统原生控件的方案不同,Flutter 通常使用自己的 Material、Cupertino 和基础 Widget,由 Engine 负责文字、布局、合成和 GPU 栅格化,当前原生平台主要采用 Impeller 渲染。开发模式运行 Dart VM,支持保留状态的 Hot Reload;Release 构建在原生平台 AOT 编译为机器码,在 Web 上编译为 JavaScript 或 WebAssembly 相关输出。Flutter 官方支持 Android、iOS、Web、Windows、macOS 与 Linux,并能通过 Plugin、Platform Channel、dart:ffi 或 Add-to-app 访问和复用原生平台代码。
主要特点
Flutter 将声明式 Widget、跨平台 Engine、Dart 编译和完整开发工具链组合起来,强调一致、可定制且高性能的多端界面。
一切皆 Widget
布局、主题、动画、手势、导航和语义都通过小型 Widget 组合,声明式 build 方法把应用状态映射为界面。
自有渲染管线
Flutter Framework 创建 Widget、Element 与 RenderObject 树,Engine 使用 Impeller 等能力统一完成合成和 GPU 绘制。
Stateful Hot Reload
开发时 Dart VM 注入修改并重新执行 build,通常保留当前导航与 State,减少重新编译和重走业务流程的等待。
Dart JIT 与 AOT
Debug 模式利用 JIT 提升迭代速度,Release 模式在移动和桌面平台编译为本机机器码,兼顾开发效率与运行性能。
Material 与 Cupertino
内置丰富的 Material 3、Cupertino 和基础 Widget,可构建统一品牌界面,也能按平台选择导航、控件和交互规范。
移动、桌面与 Web
官方工具链覆盖 Android、iOS、Windows、macOS、Linux 和浏览器,并提供响应式、键鼠、窗口与平台集成文档。
Plugin、Channel 与 FFI
可通过 pub.dev Plugin 使用设备能力,通过 Platform Channel 调用 Kotlin/Swift,或用 dart:ffi 连接 C ABI 库。
完整工程工具
Flutter CLI、Analyzer、Formatter、Widget Test、Integration Test 与 Dart DevTools 覆盖创建、诊断、性能和构建流程。
适用场景
适合希望高度共享 UI 与业务代码、需要定制视觉,并愿意使用 Dart 和 Flutter Widget 体系的移动或多端团队。
消费级移动应用
适合电商、内容、社区、金融和生活服务产品,用一套 Dart 代码覆盖 Android 与 iOS。
品牌化产品界面
自有 Widget 与渲染管线适合需要高度定制视觉、动画和跨系统版本保持一致外观的产品。
企业内部工具
表单、数据列表、离线缓存和统一设计系统可同时交付到移动设备、桌面与浏览器。
桌面与嵌入式界面
Windows、macOS、Linux Embedder 和社区嵌入式支持适合控制台、终端、设备管理与跨桌面应用。
现有原生应用渐进集成
Add-to-app 可将 Flutter Screen 或 Feature 嵌入已有 Android/iOS 应用,无需一次性重写整个产品。
可视化与高定制交互
CustomPainter、动画系统和统一渲染适合图表、教育、创作工具及具有复杂视觉反馈的界面。
优点与注意事项
技术选型不仅要看能力,也要理解它带来的团队成本。
主要优点
Flutter 擅长的地方
- 一套 Dart 代码可高度复用 UI、动画、业务逻辑和测试
- 自有渲染引擎让品牌视觉跨设备与系统版本保持一致
- Widget 组合模型统一布局、状态、主题、导航和语义表达
- Hot Reload 通常保留应用状态,复杂界面的迭代反馈快速
- Material、Cupertino、动画和测试能力由官方 SDK 集成提供
- 移动、Web 与桌面均有官方工具链和构建目标
- Plugin、Platform Channel、FFI 与 Add-to-app 保留深入原生平台的能力
需要注意
采用前应考虑的问题
Dart 语法容易入门,但类型系统、异步、Isolate、BuildContext 和 Widget 生命周期仍需要系统学习。
Flutter 不直接复用大多数系统 UI 控件;平台惯例、导航、文字编辑和新系统视觉需要框架升级或应用自行适配。
应用需要携带 Engine、Dart Runtime 和资源,简单应用的基础包体通常高于纯原生方案,应以目标商店产物测量。
支付、地图、推送和硬件能力常依赖 Plugin,采用前应检查各平台实现、维护频率、隐私清单和当前 Flutter 兼容性。
Flutter Web 更适合应用式界面;内容、SEO、首屏包体、DOM 语义和浏览器原生交互优先的网站通常应评估 Web 框架。
手机、平板、桌面和 Web 的窗口、输入和信息架构不同,需要响应式断点、平台习惯与不同导航组件。
Xcode、Gradle、CocoaPods、签名、商店审核和系统 SDK 兼容问题仍需移动平台经验与 CI 维护。
Flutter 核心提供 State 与 InheritedWidget 等机制,但大型应用仍需统一路由、状态、依赖注入和数据层方案。
稳定版持续更新 Dart、Engine、Gradle/Xcode 和 Widget API,项目应固定 SDK、阅读迁移说明并保持自动化测试。
快速开始
使用 Flutter CLI 创建一个 Material 3 项目目录应用,并完成静态分析、测试与 Android/iOS Release 构建。
bashflutter doctor
flutter create flutter_catalog
cd flutter_catalog
flutter rundartimport 'package:flutter/material.dart';
void main() {
runApp(const CatalogApp());
}
class CatalogApp extends StatelessWidget {
const CatalogApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '开源项目',
theme: ThemeData(
colorSchemeSeed: Colors.blue,
useMaterial3: true,
),
home: const ProjectListPage(),
);
}
}
class ProjectListPage extends StatelessWidget {
const ProjectListPage({super.key});
static const projects = [
('flutter', 'Flutter'),
('react-native', 'React Native'),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('开源项目')),
body: ListView.separated(
padding: const EdgeInsets.all(16),
itemCount: projects.length,
separatorBuilder: (_, __) => const SizedBox(height: 12),
itemBuilder: (context, index) {
final project = projects[index];
return Card(
child: ListTile(
title: Text(project.$2),
trailing: const Icon(Icons.chevron_right),
onTap: () => debugPrint(project.$1),
),
);
},
),
);
}
}dartclass AdaptiveBody extends StatelessWidget {
const AdaptiveBody({super.key});
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth < 700) {
return const ProjectListPage();
}
return const Row(
children: [
SizedBox(
width: 320,
child: ProjectListPage(),
),
VerticalDivider(width: 1),
Expanded(
child: Center(
child: Text('请选择一个项目'),
),
),
],
);
},
);
}
}bashflutter pub add http
flutter pub get
dart format .
flutter analyze
flutter testbash# Google Play App Bundle
flutter build appbundle
# iOS Archive(需要 macOS 和 Xcode)
flutter build ipa
# Web
flutter build web下一步:先用 flutter doctor 确认目标平台工具链,再在真实 Android、iOS、桌面和 Web 尺寸上分别检查导航、文字、输入、无障碍与性能;共享代码不代表共享所有界面决策。
类似项目
这些技术同样支持跨平台应用开发,但在语言、控件来源、渲染方式和原生互操作模型方面不同。
Flutter vs React Native
Flutter 与 React Native 都能从单一代码库构建 Android 和 iOS 应用,但 Flutter 使用 Dart、自己的 Widget 和 Impeller 绘制界面;React Native 使用 React/TypeScript,并通过 Fabric 渲染原生平台组件。
| 比较维度 | Flutter | React Native |
|---|---|---|
| 开发语言 | Dart | JavaScript / TypeScript 与 React |
| UI 组件 | Flutter 自有 Material、Cupertino 与基础 Widget | 映射为 Android/iOS 原生 View 的 Core Component |
| 渲染 | Framework + Engine + Impeller 自行布局与绘制 | Fabric Renderer 协调 React Tree 与原生视图 |
| 视觉一致性 | 跨系统和版本更容易保持统一品牌外观 | 更自然继承平台原生控件行为与无障碍能力 |
| 原生互操作 | Plugin、Platform Channel、FFI 与 Add-to-app | TurboModule、Fabric Component、JSI 与 Brownfield |
| 平台覆盖 | 移动、Web、Windows、macOS、Linux 官方支持 | Android/iOS 核心,其他平台由社区伙伴或 Expo 扩展 |
| 生态与人才 | Flutter/Dart 生态集中,官方体验较统一 | React、npm 和 Web 人才储备更广泛 |
| 更适合 | 高度定制 UI、多平台和视觉一致性优先的团队 | React 技能复用、原生控件与庞大 JS 生态优先的团队 |
如果产品强调高度定制视觉、动画和移动/桌面多平台一致性,并接受 Dart 与自绘 Widget,Flutter 通常更完整;如果团队已有 React/TypeScript 经验、需要使用平台原生控件或依赖庞大 JavaScript 生态,React Native 更自然。两者都应使用真实设备验证启动、列表、动画、第三方 SDK、无障碍和商店构建,不能只依据简单基准测试决定。
资料核验
版本、维护信息与本页采用的官方资料来源。
本次核验覆盖 Flutter 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新,具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。
官方仓库未归档,核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动,不代表固定发布频率或长期支持承诺。