Flutter入门，Flutter基础知识总结。

Flutter是Google推出的一种移动应用开发框架，它允许开发者使用一套代码库同时开发Android和iOS应用。以下是对Flutter知识点的详细总结：

一、Flutter概述

特点：跨平台、高保真、高性能。
编程语言：使用Dart语言编写。
设计理念：“everything is a widget”。不论是按钮、字体、颜色、布局，甚至是整个应用程序，都是由一个个Widget组合而成。

二、Flutter架构

框架层：直接面向开发者的最顶层，提供了Material和Cupertino两种视觉风格的组件库，分别实现了Material和iOS设计规范。
引擎层：主要由C++编写，负责实现Flutter的高性能渲染和底层逻辑。包括Skia图形引擎（用于高效地渲染应用中的图形和动画）和Dart运行时（提供内存管理、垃圾回收等关键服务）。
嵌入层：负责将Flutter引擎嵌入到不同的平台（如Android和iOS）中。

三、Dart语言基础

变量类型：Dart中的所有变量都是引用类型，未初始化的变量的值是null。包括Object（所有类的基类）、dynamic（运行时确定类型）等。

编译模式：

• JIT（Just In Time）即时编译：在程序执行期间实时编译为本地机器码，开发阶段采用此模式，避免每次改动都进行编译，节省开发时间。
• AOT（Ahead Of Time）静态编译：程序运行前编译成本地机器码，发布时采用此模式，生成高效的ARM代码以保证应用性能。
• 垃圾回收：采用多生代无锁垃圾回收器，专门为UI框架中常见的大量Widgets对象创建和销毁进行优化。

四、Widget基础

概念：Widget是Flutter中用于描述用户界面和交互的模块。一个Widget可以定义结构元素（如按钮或菜单）和样式元素（如字体或颜色模式）。

类型：

• StatelessWidget：无状态Widget，一旦构建后不能改变，当属性改变时会重新构建。
• StatefulWidget：可以在生命周期内改变状态的Widget，实现一个StatefulWidget至少需要两个类：一个StatefulWidget类和一个State类。

常用Widget：

Flutter 提供了丰富的内置 widgets，开发者可以利用这些 widgets 来快速构建用户界面。以下是一些常用的 Flutter widgets：

1. 布局类 Widgets

• Container：用于包含和装饰其他 widgets，可以设置边距、填充、背景颜色、边界等。
• Row 和 Column：用于水平（Row）或垂直（Column）排列子 widgets。
• Stack：允许子 widgets 堆叠在一起，并可以使用 Positioned 控制子 widget 的位置。
• Flex 和 Expanded：用于在 Row 或 Column 中分配剩余空间给子 widgets。
• ListView：创建一个可滚动的列表，支持动态加载更多内容。
• GridView：创建一个二维的网格布局，类似于表格。

2. 文本与输入

• Text：显示一段文本，可以自定义字体大小、颜色、样式等。
• TextField 和 TextFormField：用于接收用户输入的文本框，TextFormField 还提供了表单验证功能。
• RichText：用于显示带有格式化的文本，比如不同部分有不同的样式。

3. 按钮

• ElevatedButton：带阴影效果的按钮，通常有颜色填充。
• TextButton：无填充颜色的按钮，通常用于次要操作。
• OutlinedButton：具有边框但无填充颜色的按钮。
• IconButton：用于显示图标按钮。
• FloatingActionButton：浮动在屏幕上的圆形按钮，常用于强调主要动作。

4. 图片与图标

• Image：用于显示图片资源，支持本地图片和网络图片。
• Icon：显示 Material Design 图标。

5. 卡片与对话框

• Card：提供一种将相关内容分组的方式，带有圆角和阴影效果。
• Dialog：用于显示模态对话框，如 AlertDialog 和 SimpleDialog。
• BottomSheet：从屏幕底部滑出的面板，适用于菜单或选项选择。

6. 表单

• Form：用于创建表单，结合 TextFormField 实现输入验证。
• Checkbox 和 Radio：用于多选和单选。

7. 进度指示器

• CircularProgressIndicator 和 LinearProgressIndicator：用于显示加载状态，分别是环形和线性进度条。

8. 交互式 Widgets

• GestureDetector：添加手势识别到任何 widget 上，如点击、长按、拖拽等。
• Dismissible：实现可以被滑动移除的 widget，如删除列表项。
• Draggable 和 DraggableTarget：用于创建可拖拽的元素和目标区域。

9. 动画

• AnimatedOpacity、AnimatedContainer 等：用于创建简单的动画效果。
• AnimationController 和 Tween：用于更复杂的动画控制。

10. 导航与路由

• Navigator：管理页面之间的导航。
• PageRouteBuilder 和 MaterialPageRoute：用于创建自定义和默认的页面切换动画。

11. InheritedWidget

特性：

• 高效传递数据，支持跨级访问
• 性能优化，只有当 InheritedWidget 的状态改变时，依赖它的子 widget 才会重新构建，而不是整个 widget 树。
• 提供了依赖监听机制，当数据变化时，可以通知依赖该数据的子Widget进行更新。

常见使用场景：

• 管理全局或共享数据：如用户身份认证状态、设置数据等。
• 依赖注入：向Widget子树提供依赖项，如服务或存储库。
• 配置数据：将配置数据（如本地化或主题样式）传播到所有相关Widget。Flutter 的 Theme 就是基于 InheritedWidget 实现的。

注意事项：

• 不要滥用 InheritedWidget，因为它们可以使数据流变得不清晰。
• 确保 updateShouldNotify 的实现是正确的，以避免不必要的 widget 重建。
• 考虑使用更高级的状态管理解决方案如 Provider、Riverpod 或 Bloc，这些方案可以提供更好的可维护性和扩展性。

除以上介绍之外，Flutter 还提供了丰富的widgets，每个 widget 都有自己的特性和用途。Flutter 的文档中还提供了详细的 API 参考，帮助开发者了解如何正确地使用这些 widgets。

状态管理

• Provider：一种简单易用的状态管理方案。
• Riverpod：Provider 的增强版本，提供了更好的依赖注入支持。（Google推荐使用）
  – 类型：Riverpod提供了多种类型的Provider，如：Provider、StateProvider、StateNotifierProvider等。
  – 监听：在需要读取Provider状态的组件中，使用ConsumerWidget或Consumer来监听Provider的变化。
• Bloc：业务逻辑组件模式，适合处理复杂的状态流。
• Redux：基于 Flux 架构，适用于大型应用。

性能优化

UI渲染优化：

• 扁平化 widget 树：减少不必要的重叠元素，确保界面简洁明了，以减少构建和布局的时间。
• 使用 ListView.builder 和 GridView.builder：当列表项数量较多时，使用 builder 方法按需创建子 widgets，而不是一次性创建所有子 widgets。
• 合理缓存：利用Flutter的缓存机制，避免重复创建和加载资源。例如，使用CachedNetworkImage来缓存网络图片。
• 使用IndexedStack：当有多个子组件需要同时显示时，可以考虑使用IndexedStack，它只会绘制当前显示的子组件，而不是所有子组件，从而减少了不必要的绘制。
• 使用Offstage来隐藏组件：如果有一些不经常显示或只在特定条件下显示的组件，可以考虑使用Offstage来将它们从渲染树中移除，以减少布局和绘制开销。

Widget 优化：

• shouldRebuild：使用shouldRebuild方法来确定一个小部件是否需要重建，以减少不必要的重建次数。
• 使用const：使用const关键字来创建不需要根据父组件重新构建的小部件。
• 使用StatelessWidget：无状态小部件的构建速度比有状态小部件快，因为它们不需要维护任何可变状态。
• 避免在build方法中执行耗时操作：如需要重新计算数据或创建新的对象，可以在initState中进行，以避免不必要的重建。

其他优化：

• 图片优化：优化资源文件大小，使用 FadeInImage(渐显效果) 或 CachedNetworkImage(缓存)
• 动画优化：AnimatedBuilder、TickerMode。
• 代码拆分：使用代码拆分来减小应用的大小并提高性能。

五、Flutter程序结构

一个基本的Flutter程序通常包括以下部分：

• main函数：应用的入口点。
• MyApp类：StatelessWidget，返回一个包含应用主题、路由和主页的MaterialApp Widget。
• 主页类：可为StatelessWidget或StatefulWidget，包含应用主体部分。
• 其他Widget类：自定义的Widget，可被主页类或其他Widget类使用。

六、Flutter其他知识点

• 屏幕适配：可以采用flutter_screen_util插件进行屏幕适配，通过传入设计尺寸，在调用时使用screen_util转换后的宽和高进行长度和高度的赋值。
• 原生集成：Flutter提供了与原生平台深度集成的能力。开发者可以使用特定的平台通道与原生代码交互，访问设备特有的功能。
• 热重载：Flutter引入了热重载功能，允许开发者在应用运行时动态更改代码并立即看到结果，极大地提高了开发效率。