Flutter简介 #

一、什么是Flutter #

Flutter是Google推出的开源UI工具包，用于从单一代码库构建精美、原生编译的移动、Web和桌面应用程序。Flutter于2017年首次发布，2018年发布1.0稳定版，如今已成为最受欢迎的跨平台开发框架之一。

1.1 Flutter的核心定位 #

text 
Flutter = 高性能 + 跨平台 + 热重载 + 丰富UI

Flutter的设计理念：

  • 一切皆Widget：UI由Widget树构成，组合优于继承
  • 响应式编程：UI随状态变化自动更新
  • 单一代码库：一套代码运行在多个平台
  • 原生性能：直接编译为原生代码，无中间层

1.2 Flutter的核心特点 #

特点 说明
跨平台 iOS、Android、Web、Windows、macOS、Linux
热重载 修改代码后毫秒级看到效果
高性能 60fps/120fps流畅动画
丰富Widget Material和Cupertino风格组件
响应式框架 声明式UI，状态驱动
Dart语言 现代化语言，易于学习

二、Flutter架构 #

2.1 整体架构 #

text 
┌─────────────────────────────────────────────┐
│                  应用层                      │
│            (你的Flutter应用)                 │
├─────────────────────────────────────────────┤
│                 框架层                       │
│  ┌─────────┐ ┌─────────┐ ┌─────────┐       │
│  │ Material│ │Cupertino│ │ Widgets │       │
│  └─────────┘ └─────────┘ └─────────┘       │
│  ┌─────────────────────────────────┐       │
│  │           Rendering             │       │
│  └─────────────────────────────────┘       │
│  ┌───────────┐ ┌───────────┐              │
│  │  Animation│ │  Gestures │              │
│  └───────────┘ └───────────┘              │
│  ┌─────────────────────────────────┐       │
│  │           Foundation            │       │
│  └─────────────────────────────────┘       │
├─────────────────────────────────────────────┤
│                 引擎层                       │
│  ┌─────────────────────────────────┐       │
│  │           Skia 渲染引擎          │       │
│  └─────────────────────────────────┘       │
│  ┌───────────┐ ┌───────────┐              │
│  │    Dart   │ │  Platform │              │
│  │   Runtime │ │  Channels │              │
│  └───────────┘ └───────────┘              │
├─────────────────────────────────────────────┤
│                 平台层                       │
│   Android   │    iOS    │   Web   │ Desktop│
└─────────────────────────────────────────────┘

2.2 各层说明 #

层级 说明
应用层 开发者编写的Flutter应用代码
框架层 提供各种Widget和基础能力
引擎层 Skia渲染、Dart运行时
平台层 操作系统原生能力

2.3 渲染原理 #

Flutter采用自己的渲染引擎Skia，不依赖平台UI组件：

text 
Widget树 → Element树 → RenderObject树 → Skia绘制 → 屏幕
dart 
Widget build(BuildContext context) {
  return Container(
    child: Text('Hello'),
  );
}

三、Flutter发展历史 #

3.1 发展时间线 #

年份 版本 重要特性
2015 Sky Flutter前身，在Dart开发者峰会上展示
2017 Alpha 首个公开版本
2018 1.0 首个稳定版本发布
2019 1.12 Web支持、macOS支持
2020 1.20 自动滚动、更新Material组件
2021 2.0 Web稳定版、桌面稳定版、空安全
2022 3.0 macOS/Linux稳定版、Impeller渲染引擎预览
2023 3.16 Impeller默认启用、Material 3
2024 3.22 Wasm支持、性能优化

3.2 Flutter的影响力 #

Flutter对移动开发领域产生了深远影响：

  • 开发效率：一套代码多端运行，大幅降低开发成本
  • 创业公司：快速原型开发，缩短产品上市时间
  • 大厂采用：Google、阿里巴巴、腾讯、字节跳动等
  • 生态繁荣：pub.dev上超过4万个包

四、Flutter与其他框架对比 #

4.1 与React Native对比 #

特性 Flutter React Native
语言 Dart JavaScript/TypeScript
渲染 Skia自绘 原生组件
性能 优秀 良好
热重载 支持 支持
UI一致性 高 中等
学习曲线 中等 平缓
社区规模 大 大
包生态 丰富 非常丰富

4.2 与原生开发对比 #

特性 Flutter 原生开发
开发效率 高 低（需多套代码）
性能 接近原生 最优
包体积 较大 较小
原生能力 需要插件 直接使用
最新特性 需要等待 立即使用
维护成本 低 高

4.3 与uni-app对比 #

特性 Flutter uni-app
语言 Dart Vue.js
渲染 原生渲染 WebView/原生
性能 优秀 中等
跨平台 6+平台 10+平台
学习曲线 中等 平缓
适用场景 性能要求高 快速开发

4.4 选择建议 #

选择Flutter：

  • 追求高性能跨平台应用
  • 需要复杂的自定义UI
  • 团队愿意学习Dart
  • 需要一致的跨平台体验

选择React Native：

  • 团队熟悉JavaScript/React
  • 已有React技术栈
  • 需要大量第三方库

选择原生开发：

  • 追求极致性能
  • 需要最新平台特性
  • 单一平台需求

五、Flutter核心概念 #

5.1 Widget #

Widget是Flutter的核心概念，一切皆Widget：

dart 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Flutter App')),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
      ),
    );
  }
}

5.2 Widget类型 #

类型 说明 示例
StatelessWidget 无状态Widget Text、Icon
StatefulWidget 有状态Widget Checkbox、TextField
RenderObjectWidget 渲染Widget Column、Row
ProxyWidget 代理Widget InheritedWidget

5.3 状态管理 #

Flutter采用响应式状态管理：

text 
状态变化 → 触发rebuild → UI更新
dart 
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _count = 0;

  void _increment() {
    setState(() {
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: $_count'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

六、Flutter应用场景 #

6.1 适合的项目类型 #

类型 说明
移动应用 iOS/Android原生体验应用
Web应用 SPA单页应用、管理后台
桌面应用 Windows/macOS/Linux应用
嵌入式 物联网设备界面
小程序 部分平台支持

6.2 知名Flutter应用 #

应用 类型
Google Pay 支付应用
阿里巴巴闲鱼 电商应用
腾讯企业微信 企业应用
字节跳动 多款应用
BMW 车载应用
Nubank 金融应用

七、Flutter生态系统 #

7.1 核心包 #

包名 用途
cupertino iOS风格组件
material Material Design组件
flutter/services 平台服务
flutter/foundation 基础工具

7.2 常用第三方包 #

类别 包名 用途
状态管理 provider 官方推荐状态管理
状态管理 riverpod 现代状态管理
状态管理 flutter_bloc Bloc模式
网络 dio HTTP客户端
存储 shared_preferences 本地存储
数据库 sqflite SQLite
图片 cached_network_image 图片缓存
路由 go_router 声明式路由

八、Flutter 3.x新特性 #

8.1 Impeller渲染引擎 #

dart 
// Impeller提供更流畅的渲染体验
// 默认在iOS上启用，Android逐步支持

8.2 Material 3 #

dart 
MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorSchemeSeed: Colors.blue,
  ),
)

8.3 平台特性 #

平台 新特性
iOS 改进的Cupertino组件
Android 改进的预测返回手势
Web Wasm支持、更好的性能
Desktop 改进的窗口管理

九、总结 #

9.1 核心要点 #

要点 说明
定义 Google的跨平台UI框架
语言 Dart
渲染 Skia自绘
特点 热重载、高性能、跨平台
架构 Widget → Element → RenderObject

9.2 下一步 #

现在你已经了解了Flutter的基本概念，接下来让我们学习 环境搭建，开始你的Flutter开发之旅！

最后更新：2026-03-28