xiangzhihong8的专栏

在整个事件分发的过程中，每个RenderObject都会创建一个HitTestEntry对象，将其添加到HitTestResult中记录分发结果。handleEvent方法的实现因节点类型而异，例如GestureDetector会调用onTap、onDoubleTap等回调函数来处理事件，而RenderBox则会调用handleEventForBox方法来处理事件。在这个方法中，先遍历当前节点的所有子节点，调用它们的hitTest方法，将事件向下传递。当事件处理完成后，会将事件向上传递，直到到达根节点。

任何应用程序都是从main()开始的，Flutter也不例外。Flutter 的启动入口在 lib/main.dart 里的 main() 函数中，代码如下。接下来，我们就按照上面的流程来分析下Flutter App的启动流程。

Flutter面试中必问的一个面试题就是渲染相关的话题。作为Google在2018年发布的一款跨平台UI框架，使用Dart作为其开发语言，底层使用Skia图形库进行视图渲染，渲染速度和用户体验堪比原生。

当App的复杂性发展到一定程度，就会出现一个页面中不同深度的子Widget需要共享访问同一个数据状态，甚至不同页面需要共享同一个状态的情况，这时我们可能会想到InheritedWidget。InheritedWidget是 Flutter 中非常重要的一个功能型组件，它提供了一种在 Widget 树中从上到下共享数据的方式，比如我们在应用的根 Widget 中通过InheritedWidget共享了一个数据，那么我们便可以在任意子Widget 中来获取该共享的数据。

下拉菜单是移动应用交互中一种常见的交互方式，可以使用下拉列表来展示多个内容标签，实现页面引导的作用。在Flutter开发中，实现下拉弹框主要有两种方式，一种是继承Dialog组件使用自定义布局的方式实现，另一种则是使用官方的PopupMenuButton组件进行实现。使用PopupMenuButton组件实现下拉弹框时，需要传入itemBuilder、child和一些必要的属性即可，代码如下。如果没有特殊的展示要求，使用官方提供的PopupMenuButton组件即可实现下拉菜单效果，如下图所示。

为了方便数据的统一处理，需要规定数据格式，数据的处理逻辑主要集中在js侧和dart侧，native侧只负责数据的转发，以及js的加载和释放。pageName:"对应的调用页名称，也就是js侧的#FairKey#",funcType:"调用类型，method,variable等",args:{//用户携带的参数，交由js侧处理dart侧与js侧的联系，主要是涉及到同步和异步通信，所以在设计接口方法的时候也是做了区分。

是因为我们整体的设计理念是Flutter 原生界面和动态界面可以使用一个源文件来转换，动态化只是在紧急需求或者需求不确定的A/B测等临时场景使用，需求稳定之后，沉淀下来的源文件可以继续跟版使用，最大化的保持Flutter的性能。这样设计的好处是，当需要不停的监听_scrollController.position的位置变化时，如果这个过程设计成Flutter不停的往JS侧发送位置偏移值，由JS侧实现阀值判断的话，对bridge的压力会非常大，性能也就非常的低。逻辑动态化，最核心的难点就是如何处理变量。

是因为我们整体的设计理念是Flutter 原生界面和动态界面可以使用一个源文件来转换，动态化只是在紧急需求或者需求不确定的A/B测等临时场景使用，需求稳定之后，沉淀下来的源文件可以继续跟版使用，最大化的保持Flutter的性能。这样设计的好处是，当需要不停的监听_scrollController.position的位置变化时，如果这个过程设计成Flutter不停的往JS侧发送位置偏移值，由JS侧实现阀值判断的话，对bridge的压力会非常大，性能也就非常的低。逻辑动态化，最核心的难点就是如何处理变量。

详述具体流程之前，我们先来看看整体的流程，然后再去讲解各个流程的原理细节。通过fair_ast_gen将源码解析并生成AstMap；通过fair_dsl_gen将AstMap转换成我们需要的Fair DSL。这里涉及到两个概念，大家需要先了解一下AST 全称是Abstract Syntax Tree，中文名为抽象语法树。DSL 全称是Domain Specific Language，中文名为领域特定语言。

Flutter为什么会卡顿、帧率低？UI线程慢了–>渲染指令出的慢GPU线程慢了–>光栅化慢、图层合成慢、像素上屏慢所以我们一般使用flutter布局尽量按照以下原则尽量不要为 Widget 设置半透明效果，而是考虑用图片的形式代替，这样被遮挡的 Widget 部分区域就不需要绘制了；控制 build 方法耗时，将 Widget 拆小，避免直接返回一个巨大的 Widget，这样 Widget 会享有更细粒度的重建和复用；

Fair云开发平台支持自定义组件，左侧面板点击下方添加图标打开自定义组件界面，如图所示列表中有内置的两个组件示例，在这个页面中可以创建新组件、编辑/删除已有的组件点击右上角添加组件打开组件编辑弹窗，可以在线编辑代码点击右上角编译预览按钮可以快速预览效果点击保存即可上传自定义组件自定义Action可以方便使用者快速的粘贴工具代码以快速开发，具体的创建与编辑操作和自定义组件类似，如图所示是内置的FairNet网络请求Action使用方法同样也是粘贴到代码编辑器中。

Fair是为Flutter设计的动态化框架，通过Fair Compiler工具对原生Dart源文件的自动转化，使项目获得动态更新Widget Tree和State的能力。创建Fair的目标是支持不发版（Android、iOS、Web）的情况下，通过业务bundle和JS下发实现更新，方式类似于React Native。与Flutter Fair集成后，您可以快速发布新的页面，而无需等待应用的下一个发布日期。

微信小程序发展的越来越快，目前小程序甚至取代了大部分 App 的生态位，公司的坑位不增反降，只能让原生应用开发兼顾或换岗进行小程序的开发。以我的实际情况来讲，公司应用采用的 Flutter 框架，同样的功能不可避免的就会存在 Flutter 应用开发和微信小程序开发兼顾的情况，这种重复造轮子的工作非常低效。为什么会出现这种情况呢？

在Flare动面出现之前，Flare动画大体可以分为使用AnimationController控制的基础动画以及使用Hero的转场动画，如果遇到一些复杂的场景，使用这些动画方案实现起来还是有难度的。事实上，Flare动画是一种类似于Lottie的矢量动画方案，使用Flare动面不仅可以有效减少安装包的体积，还能实现传统动画方案无法实现的复杂动画效果。同时，一个Flare动画文件是由多个动画节点构成的，通过这些动画节点，我们就可以很容易对动画进行精准的控制。

作为跨平台应用开发的领头羊，Flutter从已发布就受到广大开发者的追捧。使用Flutter技术开发的应用不仅体验上无限接近原生应用，在开发效率上也是其他技术无法比拟的。随着其开发者社区的不断壮大，Flutter生态系统已经相当强大，并且众多开源应用程序也相继诞生。这些开源应用不仅展示了Flutter的多功能性，而且还为开发者提供了宝贵的资源和灵感。本着无私奉献的精神，本文收集了还在维护的十大最受欢迎的Flutter开源应用。

TextButton 和 ElevatedButton 只能提供有限的自定义选项，如果需要更多的自定义选项，例如设置按钮的形状或阴影等，可以使用 FlatButton 的替代品 OutlinedButton，或者直接使用 MaterialButton，它提供了更多的自定义选项。首先来看下TextButton，TextButton 用于显示文本按钮，与 FlatButton 相似，但默认为透明背景，更符合 Material Design 的风格。

从编码的角度来说，null safety特性实际上增加了编码的工作量。但是null safety更像是一个强制的约定，要求接口或类明确参数或属性的是否为空，从而可以简化协作，提高代码的健壮性。

目前，除了可以支持Android、iOS移动跨平台开发之外，Flutter还支持macOS、Windows、Linux和Web等多个跨平台的开发。可以说，作为一款先进的跨平台开发框架，Flutter已经真正意义上实现了“一次编写，处处运行”的美好愿景。众所周知，Dart 语言存在之初就已经支持直接编译成JavaScript，并且针对开发和生产环境的工具链进行了优化。许多重要的应用已经使用 Dart 编译成的 JavaScript 在生产环境上运行，包括 Google Ads 的广告商工具。

热重载是指，在不中断 App 正常运行的情况下，动态注入修改后的代码片段。而这一切的背后，离不开 Flutter 所提供的运行时编译能力。为了更好地理解 Flutter 的热重载实现原理，我们先简单回顾一下 Flutter 编译模式背后的技术：JIT和AOT。

在软件开发开发过程中，调试过程是必不可少的，那么，对于Flutter混合工程来说，混编模式下有什么调试方案和技巧呢？

对于客户端应用来说，流畅度是影响用户使用体验的关键因素。流畅度低主要有：低FPS、高TTI、卡顿。这些现象出现时，页面会出现不连续的动画，页面刷新会短暂停顿，打开新页面速度较慢，新页面出现白屏或者较长时间的加载动画，用户做点击滑动等交互时页面不响应。用户操作 FPS 的定义是每秒传输帧数 (Frames Per Second)，是图像领域的概念。对于手机客户端来说，主流显示屏的刷新率为60Hz，高端手机显示屏刷新率可以达到120Hz及以上。理想情况下，页面绘制的FPS和屏幕刷新率一致。

在Flutter的状态管理框架中，主流的状态管理框架有四个：GetX（又称为Get）、BLoC、MobX、Provider。

有时候，为了迅速获客，会在注册登录页支持第三方登录，目的是借用这些产品庞大的用户量。在国内，常见的第三方登录有微信、qq和微博。对于一些国际的软件/网站来说，支持的比较多的第三方登录是Google、Facebook和Twitter等。这里记录下Facebook第三方登录的过程，下面是一个Facebook第三方登录流程说明。

在2022年6月Google官方发布的Flutter 3.0 版本中，正式将渲染器 Impeller 从独立仓库中合入 Flutter Engine 主干进行迭代，这是2021年Flutter团队推动重新实现Flutter渲染后端以来，首次明确了Impeller未来代替 Skia 作为 Flutter 主渲染方案的定位。Impeller的出现是Flutter团队用以彻底解决 SkSL（Skia Shading Language）引入的Jank问题所做的重要尝试，那什么是着色器编译Jank问题呢？...

接下来，定义一个路由表的管理类，用来同意管理应用的路由，需要使用@MaterialAutoRouter注解进行标识，如下。],)要生成路由文件的一部分而不是独立的 AppRouter 类，只需将 Part 指令添加到AppRouter 并扩展生成的私有路由器即可。],)接下来，我们使用build_runner提供的命令即可生成路由代码。//自动刷新路由表//生成路由代码。...

在Flutter插件开发过程中，有时候需要在FlutterPlugin中获取上下文信息，那可以使用FlutterPluginBinding来获取，代码如下：

在Flutter插件开发过程中，有时候需要在FlutterPlugin中获取上下文信息，那可以使用FlutterPluginBinding来获取，代码如下：

Flutter 2.10 版本发布已经发布有两个月了，最近在开发Flutter的时候，有第三方插件使用了Flutter 2.10，导致我们项目也需要升级2.10。下面就Flutter从 2.8 升级的到 2.10 ，需要注意的一些东西做一个总结。1， Kotlin 版本因为Flutter 2.8之前的旧版本使用的Kotlin版本是1.3.x 的版本，而Flutter 2.10 强制要求 1.5.31 以上的版本，所以升级Flutter 2.10版本后，需要升级Kotlin 版本。buildscript

一、简介在Flutter开发中，或多或少的都会设计到页面的多状态管理，如果大家对Flutter技术比较熟悉的话，那么应该知道下面的一些状态管理框架，像Bloc，Getx我都用过，整体来说再状态管理不是很复杂的情况下还是可以的。接下来，我们来看一下Flutter官方推荐的状态管理框架Provider是如何使用的。Flutter 针对不同类型对象提供了多种不同的 Provider；Provider 也是借助了 InheritWidget，将共享状态放到顶层 MaterialApp 之上;setStat

一、背景为了更好地支持将Flutter添加到现有项目的执行环境，旧的Android平台端包装器在io.flutter.app.FlutterActivity及其相关类托管Flutter运行时已被弃用。取而代之的则是io.flutter.embedding.android.FlutterActivity及其相关的类。如果我们不进行升级，那么运行flutter doctor命令时会报如下的错误。Your Flutter application is created using an older versio

QTalk 是去哪儿网内部的一个 IM 沟通工具，同时集成了很多内部的系统，比如 OA 审批，门禁打卡，请假审批，预定会议室，驼圈（驼厂朋友圈）等功能；方便内部办公沟通、交流的同时，也为无纸化办公，流程审批等提供了支持。一、原有产品框架在决定 Flutter 重构之前，我们盘点了现有的 QTalk 工程架构的问题，主要表现为：各端差异性大：Android、iOS 以及 QT 开发框架 （一个 C++桌面端跨平台解决方案） 三端逻辑代码差异大，代表性的有 Web 加载逻辑，移动端 React Nat

前几天，Flutter 2.10 发布了正式版本，该版本距离上个版本的发布还不到两个月时间，但即使在这么短的时间内，Flutter 已经关闭了 1843 个问题，合并了 1525 个 PR。在2.10版本中，主要的更新内容包括对Flutter的Windows支持的一个大更新，几个显著的性能改进，框架中的图标和颜色的新支持，以及一些工具的改进。此外，我们还获得了一些关于删除开发频道、减少对旧版本iOS的支持的更新，以及一些重大变化。Flutter Windows 桌面端支持进入稳定版Flutter 跨平

众所周知，在做Flutter开发的时候，它是自带有热重载/热重启功能的，不过，或许你会发现，当我们在原生工程中接入Flutter模块后，热重载/热重启好像都失效了，那么怎么才能在混合项目中使用热重载/热重启，以及怎么实现混合项目的代码调试呢？在介绍这些之前，我们先来看看原生接入Flutter模块，不知道如何接入的同学，可以参考下面的文章：Flutter混合开发之FlutterFragment和原生Android工程接入Flutter aar。首先，我们打开一个Android模拟器或者连接一个真机。关闭我

原文链接：满帮动态化Flutter框架“Thresh”，现在开源了一、前言移动端技术栈自诞生以来，其双端开发成本和发布效率一直广受诟病。为了解决这些问题，前端跨端技术一直在不断尝试，希望能一次开发、多端运行并且能做到快速发布。期间经历了多个技术发展阶段。第一阶段：以H5为代表，基于webview渲染只需一次开发即可运行在双端，解决了开发效率低下的问题。但是webview存在严重的性能问题，用户的交互体验相比Native渲染有明显差距。第二阶段：以RN和Weex为代表，前端技术栈开发，Native渲

我们知道，原生Android集成Flutter主要有两种方式，一种是创建flutter module，然后以原生module那样依赖；另一种方式是将flutter module打包成aar，然后在原生工程中依赖aar包，官方推荐aar的方式接入。如何在原生Android工程中以aar的方式接入Flutter，大家可以参考我之前文章的介绍：原生Android工程接入Flutter aar。今天想给大家分享的是FlutterFragment。一、Android原生工程在Android原生开发中，实现底部T

一、环境搭建首先，需要开发者按照原生Android、iOS的搭建流程搭建好开发环境。然后，去Flutter官网下载最新的SDK，下载完毕后解压到自定义目录即可。如果出现下载问题，可以使用Flutter官方为中国开发者搭建的临时镜像。export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn为了方便使用命令行，还需要额外配置下环境变量。首先，使

背景在Flutter开发中，除了热更新之外，Flutter 最受诟病的就是混合开发体验不好，而混合开发最重要的就是路由和组件生命周期的管理。目前，Flutter 在跨平台方案一致性以及优秀的体验已经获得大多数开发者的一致称赞。但对于本身已有成熟的业务代码的项目来说，直接使用纯Flutter进行开发几乎是不现实的，所以更多的项目是在不改变更原有 App 业务的基础上，将 Flutter 作为子模块进行接入和开发，架构如下。在混合开发中，就必然栈涉及到 Flutter 页面与原生页面的跳转。而在Flut

由于手机APP的运行受不同操作系统的限制，目前大多数的移动APP应用开发仍然需要针对不同的系统环境进行单独的开发。不过，为了降低开发成本、提高代码复用率，减少开发者对多个平台差异适配的工作量一直是跨平台开发框架追求的目标。但是目前，很多开发者还不不确定应该选择哪种技术来快速且低成本的开发应用程序，不过如果你熟知跨平台的发展历史，那么2021年可供大家选择的跨平台方案主选项只有两个：Flutter或者React Native。在正式进行对比之前，首先需要明确一点，即Flutter和React Nativ

flutter sdk 版本升级到2.0或者更高的版本后，运行之前的代码会报错，比如：Error: Cannot run with sound null safety, because the following dependenciesdon't support null safety: - package:flutter_swiper - package:flutter_page_indicator - package:transformer_page_viewFor solutions

Flutter 作为 Google 开源的新一代跨平台、高性能 UI 框架，旨在帮助开发者高效地构建出跨平台的、UI 与交互体验一致的精美应用，推出后一直倍受开发者的青睐。当需要开发一个全新的应用时，我们可以很方便地从零开始，完全使用 Flutter 进行开发。但如果是针对一个现有的应用，需要引入 Flutter 技术，显然使用 Flutter 全部重写一遍是不现实的。幸运的是，Flutter 很好地支持了以独立页面、甚至是 UI 片段的方式集成到现有的应用中，即所谓的混合开发模式。本文主要从一个 And