Flutter 跨平台技术研究

在我们日常开发中，使用GridView这种网格视图的场合还是不少的，比如照片墙、九宫格等等。有一个场景就是需要对网格的元素进行拖拽排序，这个时候 Flutter 自带的GridView就无法满足了。本篇我们来介绍一个支持拖拽的GridView组件，可以轻松搞定网格视图的拖拽排序，这个组件就是。本篇向大家推荐了一款简单实用的可拖拽GridView组件，基本上可以满足我们大部分支持拖拽的网格视图应用。大家如果有用过类似的组件，也欢迎在评论区推荐一下。

通常我们在 App中会使用第三方的开源代码，按照许可协议，我们应该在 App 中公开使用的开源代码并且附上对应的开源协议。当然，实际上只有少部分注重合规性的大厂才会这么干，比如下图是支付宝的关于界面的第三方信息。当然，对于小企业，基本上都不会放使用的第三方开源代码的任何信息。不过，作为一个有“追求”的码农，我们还是想对开源软件致敬一下的，毕竟，没有他们我都不知道怎么写代码。然而，我们的 App 里用了那么多第三方开源插件，总不能一个个找出来一一致敬吧？怎么办？

我们在开发移动端界面的时候，经常会遇到一组尺寸不一的组件需要作为同一组展示，典型的就是下面这种搜索历史。搜索内容的文字长短不一，导致显示的宽度不一致。而且，需要根据屏幕的宽度来自动换行显示。

使用 ORM 管理Flutter 本地的数据表结构变化的实例文章，可以支持多版本的迁移。

通过 ORM框架让 Flutter 的本地数据库管理超级简单！

在 sqflite 中，会自动根据本地的数据库版本和当前的数据库版本进行对比，如果本地版本低于当前的数据库版本就会调用 onUpgrade 方法处理版本升级，比如字段变更，数据迁移等。

本篇通过一个完整的备忘录实例讲解了在 Flutter 中如何使用 sqflite 实现结构化数据本地存储。

Flutter 实现简单的键值对存储实例教程！

作为一个Flutter的开发者，我们肯定希望能够寻求手段来改进开发效率，让开发工作更顺畅。现在，Chat GPT能够帮我们达到这个目的了。本篇，我们将向你展示如何使用Chat GPT提高Flutter开发者的效率。可以看到，Chat GPT是一个可以大幅提升Flutter 开发者生产力的伟大工具。在本文的案例中，Chat CPT成功搞定了我们的需求。

安利一个可以增强Flutter 自带的 FloatingActionButton 的组件，点击后可以展开更多操作，简单易用。

小红点，然后让强迫症用户“没法活”。 为了 KPI，程序员也不得不实现这样令人讨厌的功能。本篇介绍能让你轻松搞定小红点的 Flutter 组件 —— Badge。

界面通过后台开关变灰，只需要几行代码搞定！

通过 ShaderMask 组件我们可以对子组件进行着色，从而改变子组件原来的颜色，实现如渐变色填充、图片填充等效果。

使用起来很简单但很强大的评分组件，能够覆盖绝大部分的评分使用场景。可以利用该组件来节省我们开发的时间，而且体验也可以根据需要来定制。

墙裂推荐！使用 DataTable 搞定基础数据表格，使用 SfDataGrid 几乎能满足所有复杂表格的开发。

通过InputChip组件轻松实现偏好标签设置。

我们在短视频应用中经常会看到不停上滑浏览下一条视频的沉浸式交互效果，这种交互能够让用户不停地翻页，直到找到喜欢的视频内容，从而营造一种不断“搜寻目标”的感觉，本篇介绍如何在 Flutter 实现。

基于三维变换可以实现3D效果图形的绘制和实现3D 动效，这在有些特殊绘制的场景中或增添趣味性十分有用。

通过绘图和动画实现有趣的loading效果，并完成组件的封装，使得组件可以开箱即用。在实际应用过程中可以根据需要，修改源码实现其他有趣的loading效果。

看太多普通的“转圈”加载效果了，是不是觉得太单调？本篇带你实现几个有趣的 loading 动效，做一个有趣味的程序员！

利用 Flutter 的 PathMetric可以获取绘制路径的属性和子路径，通过这种方式就可以实现有趣的动态曲线绘制。

通过随机散乱的圆点最后组合成了想要的文字，这样的动画效果酷炫极了。看看如何通过点阵构建想要的文字和图形，还可以搞定酷炫的动画。

防止灭霸打响指毁灭地球一半的人，我们要给灭霸点颜色看看！通过绘图颜色过滤器，我们要给灭霸点 Color see see。

谁说代码就一定是枯燥无趣的？用代码绘制一场变幻的“光影秀”，在光影流动中感受编程之美，让写代码带给我们更多的趣味。

我们来看看如何使用 CustomPaint 实现毛玻璃背景图效果。毛玻璃背景图其实就是将图片进行一定程度的模糊，背景图经过模糊后更加虚幻，使得前景和后景就会有层次感。

利用图片的光影效果，配合动画实现立体旋转效果，探索 Flutter 的绘图的精妙之处，发掘编程之美！

手把手教你自定义绘制渐变色边框，并通过动画实现流动的效果，绘图加动画组合能够实现很多既有创意又有取的效果！

聊天气泡背景色太单一？本篇利用绘图实现多彩的气泡渐变背景色，随着滚动位置不同气泡颜色也不同，让你的聊天气泡丰富多彩！

本篇介绍了如何通过拖拽调整曲线绘制的控制点来调整图形，实际上很多绘图都可能用到拖拽式的控制点位的调整，比如电子围栏的设置。

之前几篇我们介绍了贝塞尔曲线的原理、绘制曲线和动效实现，这些都是代码预设好的，如果我们要根据需要自行绘制曲线，就需要使用交互来实现了。本篇我们先来介绍简单的交互式绘图。

动画加贝塞尔曲线，能玩出新花样？本篇使用 Flutter 的动画来控制贝塞尔曲线，探索一下两者组合的绘制趣味性！

三阶贝塞尔曲线绘制的曲线更为平滑，而且可以通过不同的组合绘制精美的图案出来，这也让我们体会到了贝塞尔曲线的美。

二阶贝塞尔曲线绘制爱心的实例，可以用来绘制一些简单的图形，如果要更漂亮的方式，那么使用三阶贝塞尔曲线更合适。

贝塞尔曲线不懂画？不知道怎么回事？看这一篇就够了！用图形，点曲线运动图和公式推导，让你彻底搞懂贝塞尔曲线的运行原理！

掌握了线条绘制方法后，我们可以绘制各类曲线或折线，如果耗费点时间，也可以做出漂亮的图表效果来。

本篇介绍了基于 Flutter 的 CustomPaint 绘制定制化图形的示例，可以看到，其实只要 UI 小姐姐给出的图形能够用数学表达式表示出来，都可以用 Canvas 实现！

本篇介绍了 CustomPaint 绘制基本图形的方法和示例，实际上 Flutter 的 Canvas 提供了很多其他绘制图形的方法，如绘制线条，绘制圆角矩形，绘制文本等等，有兴趣的可以参考官网的说明文档查看各个方法的使用。...

本篇介绍了 Flutter 绘图组件 CustomPaint 的基本使用，可以看到 CustomPaint 使用起来并不复杂。

交错动画实际上可以实现非常有创意的动效，本篇实现轮子滚动的效果。

animations是官方提供的motion动画插件，简洁而不简单，能够给用户提供平滑的转场体验，让你的应用高大上！