返回项目目录
前端框架精选项目

Flutter

使用 Dart 和自有渲染引擎构建移动、Web 与桌面应用的跨平台 UI 工具包。

主要语言Dart
开源许可BSD-3-Clause
项目类型前端框架
维护状态活跃维护
OVERVIEW

项目概述

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 3.44.7
开发语言Dart
渲染引擎Impeller
FEATURES

主要特点

Flutter 将声明式 Widget、跨平台 Engine、Dart 编译和完整开发工具链组合起来,强调一致、可定制且高性能的多端界面。

01

一切皆 Widget

布局、主题、动画、手势、导航和语义都通过小型 Widget 组合,声明式 build 方法把应用状态映射为界面。

02

自有渲染管线

Flutter Framework 创建 Widget、Element 与 RenderObject 树,Engine 使用 Impeller 等能力统一完成合成和 GPU 绘制。

03

Stateful Hot Reload

开发时 Dart VM 注入修改并重新执行 build,通常保留当前导航与 State,减少重新编译和重走业务流程的等待。

04

Dart JIT 与 AOT

Debug 模式利用 JIT 提升迭代速度,Release 模式在移动和桌面平台编译为本机机器码,兼顾开发效率与运行性能。

05

Material 与 Cupertino

内置丰富的 Material 3、Cupertino 和基础 Widget,可构建统一品牌界面,也能按平台选择导航、控件和交互规范。

06

移动、桌面与 Web

官方工具链覆盖 Android、iOS、Windows、macOS、Linux 和浏览器,并提供响应式、键鼠、窗口与平台集成文档。

07

Plugin、Channel 与 FFI

可通过 pub.dev Plugin 使用设备能力,通过 Platform Channel 调用 Kotlin/Swift,或用 dart:ffi 连接 C ABI 库。

08

完整工程工具

Flutter CLI、Analyzer、Formatter、Widget Test、Integration Test 与 Dart DevTools 覆盖创建、诊断、性能和构建流程。

USE CASES

适用场景

适合希望高度共享 UI 与业务代码、需要定制视觉,并愿意使用 Dart 和 Flutter Widget 体系的移动或多端团队。

消费级移动应用

适合电商、内容、社区、金融和生活服务产品,用一套 Dart 代码覆盖 Android 与 iOS。

品牌化产品界面

自有 Widget 与渲染管线适合需要高度定制视觉、动画和跨系统版本保持一致外观的产品。

企业内部工具

表单、数据列表、离线缓存和统一设计系统可同时交付到移动设备、桌面与浏览器。

桌面与嵌入式界面

Windows、macOS、Linux Embedder 和社区嵌入式支持适合控制台、终端、设备管理与跨桌面应用。

现有原生应用渐进集成

Add-to-app 可将 Flutter Screen 或 Feature 嵌入已有 Android/iOS 应用,无需一次性重写整个产品。

可视化与高定制交互

CustomPainter、动画系统和统一渲染适合图表、教育、创作工具及具有复杂视觉反馈的界面。

EVALUATION

优点与注意事项

技术选型不仅要看能力,也要理解它带来的团队成本。

主要优点

Flutter 擅长的地方

  • 一套 Dart 代码可高度复用 UI、动画、业务逻辑和测试
  • 自有渲染引擎让品牌视觉跨设备与系统版本保持一致
  • Widget 组合模型统一布局、状态、主题、导航和语义表达
  • Hot Reload 通常保留应用状态,复杂界面的迭代反馈快速
  • Material、Cupertino、动画和测试能力由官方 SDK 集成提供
  • 移动、Web 与桌面均有官方工具链和构建目标
  • Plugin、Platform Channel、FFI 与 Add-to-app 保留深入原生平台的能力

需要注意

采用前应考虑的问题

团队需要学习 Dart

Dart 语法容易入门,但类型系统、异步、Isolate、BuildContext 和 Widget 生命周期仍需要系统学习。

自绘控件需要主动适配平台

Flutter 不直接复用大多数系统 UI 控件;平台惯例、导航、文字编辑和新系统视觉需要框架升级或应用自行适配。

包体包含 Flutter Runtime

应用需要携带 Engine、Dart Runtime 和资源,简单应用的基础包体通常高于纯原生方案,应以目标商店产物测量。

第三方 Plugin 质量不一

支付、地图、推送和硬件能力常依赖 Plugin,采用前应检查各平台实现、维护频率、隐私清单和当前 Flutter 兼容性。

Web 与传统网站不同

Flutter Web 更适合应用式界面;内容、SEO、首屏包体、DOM 语义和浏览器原生交互优先的网站通常应评估 Web 框架。

多端不等于一个布局

手机、平板、桌面和 Web 的窗口、输入和信息架构不同,需要响应式断点、平台习惯与不同导航组件。

原生构建成本仍然存在

Xcode、Gradle、CocoaPods、签名、商店审核和系统 SDK 兼容问题仍需移动平台经验与 CI 维护。

状态与架构需自行选型

Flutter 核心提供 State 与 InheritedWidget 等机制,但大型应用仍需统一路由、状态、依赖注入和数据层方案。

升级需要处理弃用和平台变化

稳定版持续更新 Dart、Engine、Gradle/Xcode 和 Widget API,项目应固定 SDK、阅读迁移说明并保持自动化测试。

QUICK START

快速开始

使用 Flutter CLI 创建一个 Material 3 项目目录应用,并完成静态分析、测试与 Android/iOS Release 构建。

1检查环境并创建项目
bash
flutter doctor
flutter create flutter_catalog
cd flutter_catalog
flutter run
2创建第一个 Flutter 页面
dart
import '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),
            ),
          );
        },
      ),
    );
  }
}
3按窗口宽度切换布局
dart
class 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('请选择一个项目'),
              ),
            ),
          ],
        );
      },
    );
  }
}
4安装兼容依赖
bash
flutter pub add http
flutter pub get
dart format .
flutter analyze
flutter test
5构建商店发布产物
bash
# Google Play App Bundle
flutter build appbundle

# iOS Archive(需要 macOS 和 Xcode)
flutter build ipa

# Web
flutter build web

下一步:先用 flutter doctor 确认目标平台工具链,再在真实 Android、iOS、桌面和 Web 尺寸上分别检查导航、文字、输入、无障碍与性能;共享代码不代表共享所有界面决策。

ALTERNATIVES

类似项目

这些技术同样支持跨平台应用开发,但在语言、控件来源、渲染方式和原生互操作模型方面不同。

COMPARISON

Flutter vs React Native

Flutter 与 React Native 都能从单一代码库构建 Android 和 iOS 应用,但 Flutter 使用 Dart、自己的 Widget 和 Impeller 绘制界面;React Native 使用 React/TypeScript,并通过 Fabric 渲染原生平台组件。

比较维度FlutterReact Native
开发语言DartJavaScript / 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-appTurboModule、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、无障碍和商店构建,不能只依据简单基准测试决定。

VERIFICATION

资料核验

版本、维护信息与本页采用的官方资料来源。

最后核验2026 年 7 月 26 日
核验版本官方当前稳定版与文档主线
内容维护Docs100 编辑整理
项目维护状态活跃维护

本次核验覆盖 Flutter 的核心定位、主要能力、官方入口与开源许可。项目版本持续更新,具体补丁版本、兼容性和迁移要求请在采用前继续核对官方发布记录。

维护状态核验2026 年 7 月 26 日 · 最近可见代码活动:2026 年 7 月 25 日

官方仓库未归档,核验时最近可见的代码活动日期为 2026 年 7 月 25 日。该状态表示项目近期仍有公开维护活动,不代表固定发布频率或长期支持承诺。

查看官方仓库