前言
坐在面试官面前,我感到有些紧张,而面试官似乎察觉到了。他面带微笑,递了一杯水给我,问道:"你平时有玩什么游戏吗?"
我很惊讶,但很快冷静了下来,回答道:"平时偶尔玩一下 Dota。"
面试官接着问: "是什么吸引你玩 Dota 的?"
我想了想说:
- 运营,需要耐心地运营,任何一点细节都会影响最终的结果。
- 学习和适应性,需要不断的去学习,适应新的东西。
- 团队协作,个人的实力再强,也需要团队的配合,才能走的更远。
- 坚持,不到最后一秒,你无法知道到底结果如何。
面试官又问道: "那你在学习工作生活中,你觉得有什么东西跟 Dota 相似的吗?"
我回答道: "我觉得不论是在学习、工作还是生活中,都需要耐心运营,并不断适应新的环境和知识。单打独斗通常不是高效的方式,只有坚持不懈,才能取得显著的成果。举个例子,就像在 技术社区 中,大家都对相同的兴趣保持着高度的热情。技术社区的成员分享编程技巧、开发经验和问题解决方法;他们积极合作,共同建设资源、工具和资料,以推动领域的发展;他们不仅学习新的技能,还不断提高自己的表现,以达到更高的水平。"
面试官: "你这里说到技术社区,那你有听说过 FlutterCandies 吗?"
这个问题让我稍作思考,然后微笑着回答:"当然,FlutterCandies 是一个非常杰出的 Flutter 社区。他们致力于分享各种 Flutter 插件、工具和示例代码,为 Flutter 开发者提供了强大的支持,让他们更轻松地构建高质量的应用程序。FlutterCandies 社区的成员积极参与开源项目,为 Flutter 生态系统的繁荣作出了出色的贡献。

然而,面试官似乎对我的回答还想深入了解,他接着追问:"除此以外,还有其他方面的了解吗?"
我稍作思考后继续说:"实际上,我也是 FlutterCandies 社区的一名成员,有幸为社区开发了 xxx 组件。尽管只是小小的贡献,但我相信它有助于填补一些官方尚未覆盖的领域,并为提高应用的质量和效率提供了一点帮助。"
这番回答似乎使面试官感到满意,并表现出对我对 FlutterCandies 的了解和社区参与的鼓励。
看我不再紧张,面试官说道:"那我们正式开始吧!"
......
临走的时候,面试官微笑地对我说道:"CN DOTA,BEST DOTA!"。看来除了客户端,哪里都是刀斯林。
简介
FlutterCandies 经过众多成员的不懈努力,从创立至今,已积累了 100 个仓库,24 名成员,发布了 55 个组件和插件到 pub.dev,同时还拥有一个拥有 2000 人的 QQ 群。



这就是糖果
距离 Flutter Candies 一桶天下 - 掘金 (juejin.cn) 的发布已经 4 年了。为了让大家全面地了解 FlutterCandies ,接下来将为大家一一介绍。
图片
图片扩展
- Flutter 什么功能都有的Image
- Flutter 可以缩放拖拽的图片
- Flutter 仿掘金微信图片滑动退出页面效果
- Flutter 图片裁剪旋转翻转编辑器
- Flutter 图片全家桶 - 掘金 (juejin.cn)
yaml
dependencies:
extended_image: any
主要功能
-
缓存网络图片
-
加载状态(正在加载,完成,失败)
-
拖拽缩放图片
-
图片编辑(裁剪,旋转,翻转)
-
图片预览(跟微信掘金一样)
-
滑动退出效果(跟微信掘金一样)
-
设置圆角,边框
-
支持进度显示
-
图片预览上滑显示详情(跟图虫一样)
![]() |
![]() |
|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
图片编辑
yaml
dependencies:
image_editor: any
这是一个用于处理图片数据的库,extended_image 提供了用于编辑图片的用户界面 (UI),而 image_editor 则负责对编辑后的图片数据进行处理。当然,您也可以单独使用它来修改图片数据。
主要功能
- 翻转
- 裁剪
- 旋转
- 缩放
- 矩阵
- 添加文本
- 混合图像
- 合并多个图像
- 绘制物体
- 绘制点
- 绘制线
- 绘制矩形
- 绘制圆
- 绘制路径
- 绘制贝塞尔曲线
- 高斯模糊

图片选择器
yaml
dependencies:
wechat_assets_picker: any
基于 微信 UI 的 Flutter 图片选择器(同时支持视频和音频) 。
主要功能
-
♿ 完整的无障碍支持,包括 TalkBack 和 VoiceOver
-
♻️ 支持基于代理重载的全量自定义
-
🎏 完全可自定义的基于
ThemeData的主题 -
💚 复刻微信风格(甚至优化了更多的细节)
-
⚡️ 根据配置调节的性能优化
-
📷 图片资源支持
- 🔬 HEIF 格式图片支持 (1)
-
🎥 视频资源支持
-
🎶 音频资源支持 (2)
-
1️⃣ 单选模式模式
-
💱 国际化 (i18n) 支持
- ⏪ RTL 语言支持
-
➕ 特殊 widget 构建支持
-
🗂 自定义路径排序支持
-
📝 自定义文本构建支持
-
⏳ 自定义筛选规则支持
-
💻 支持 MacOS
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
图片压缩
yaml
dependencies:
flutter_image_compress: any
将图像压缩为原生插件(Obj-C/Kotlin/pica)。此库适用于Android,iOS, Web 平台。
| 功能 | Android | iOS | Web |
|---|---|---|---|
| method: compressWithList | ✅ | ✅ | ✅ |
| method: compressAssetImage | ✅ | ✅ | ✅ |
| method: compressWithFile | ✅ | ✅ | ❌ |
| method: compressAndGetFile | ✅ | ✅ | ❌ |
| format: jpeg | ✅ | ✅ | ✅ |
| format: png | ✅ | ✅ | ✅ |
| format: webp | ✅ | ✅ | 🌐 |
| format: heic | ✅ | ✅ | ❌ |
| param: quality | ✅ | ✅ | 🌐 |
| param: rotate | ✅ | ✅ | ❌ |
| param: keepExif | ✅ | ✅ | ❌ |
相册资源管理
yaml
dependencies:
photo_manager: any
通过相册的抽象 API 对设备中的资源(图片、视频、音频)进行管理,不需要集成 UI。 在 Android、iOS 和 macOS 上可用。
主要功能:
- 请求权限
- 获取相簿或图集 (
AssetPathEntity) - 获取资源 (
AssetEntity) - 资源变动的通知回调
- 过滤资源
正因为它的功能强大,目前已有 42 的 packages 依赖它。
Search results for dependency:photo_manager (pub.dev)


相机选择器
yaml
dependencies:
wechat_camera_picker: any
基于 微信 UI 的 Flutter 相机选择器,可以单独运行, 同时是 wechat_assets_picker 的扩展。
主要功能:
- ♿ 完整的无障碍支持,包括 TalkBack 和 VoiceOver
- ♻️ 支持基于
State重载的全量自定义 - 🎏 完全可自定义的基于
ThemeData的主题 - 💚 复刻微信风格(甚至优化了更多的细节)
- ⚡️ 根据配置调节的性能优化
- 📷 支持拍照
- 🎥 支持录像
- ⏱ 支持限制录像时间
- 🔍 支持录像时缩放
- ☀️ 支持设置曝光参数
- 🔍️ 支持捏合缩放
- 💱 国际化支持
- ⏪ RTL 语言支持
- 🖾 支持自定义前景 widget 构建
- 🕹️ 保存时拦截自定义操作
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
文本和输入框
文本扩展
- Flutter RichText支持图片显示和自定义图片效果 - 掘金 (juejin.cn)
- Flutter RichText支持自定义文本溢出效果 - 掘金 (juejin.cn)
- Flutter RichText支持自定义文字背景 - 掘金 (juejin.cn)
- Flutter RichText支持特殊文字效果 - 掘金 (juejin.cn)
- Flutter RichText支持文本选择 - 掘金 (juejin.cn)
- Flutter Text: 扶我起来 - 掘金 (juejin.cn)
- Flutter 糖果群主跑了!? - 掘金 (juejin.cn)
yaml
dependencies:
extended_text: any
主要功能
- 支持自定义文本溢出效果。可以自定义溢出的
Widget,并控制溢出位置(前、中、后) - 根据文本格式快速构建富文本,支持复制特殊文本的真实值
- 更友好的换行判断
![]() |
![]() |
|---|---|
![]() |
![]() |

输入框扩展
- Flutter 支持图片以及特殊文字的输入框(一)使用方法 - 掘金 (juejin.cn)
- Flutter 支持图片以及特殊文字的输入框(二)实现过程 - 掘金 (juejin.cn)
- Flutter 自定义输入框Selection菜单和选择器 - 掘金 (juejin.cn)
- Flutter 如何优雅地阻止系统键盘弹出 - 掘金 (juejin.cn)
- Flutter 糖果群主跑了!? - 掘金 (juejin.cn)
yaml
dependencies:
extended_text_field: any
主要功能
- 图文混合
- 可以正常选择,支持复制真实值
- 根据文本格式快速构建富文本
![]() |
![]() |
|---|---|
![]() |
![]() |
列表
监听滚动视图的组件
yaml
dependencies:
scrollview_observer: any
不需要改变你当前所使用视图,只需要在视图外包裹一层即可实现如下功能点
- 监听滚动视图中正在显示的子部件
- 支持滚动到指定下标位置
- 快速实现聊天会话列表的效果
- 支持在插入或更新消息时保持IM消息位置,避免抖动
支持以下组件
-
ListView -
SliverList -
GridView -
SliverGrid - 支持
SliverPersistentHeader,SliverList和SliverGrid混合使用 - 由第三方库构建的
ScrollView









下拉刷新
yaml
dependencies:
pull_to_refresh_notification: any
主要功能
- 快速方便自定义自己想要的下拉刷新效果
![]() |
![]() |
|---|---|
![]() |
![]() |
列表加载更多
yaml
dependencies:
loading_more_list: any
主要功能
- 支持快速定义
ListViewGridViewWaterfallFlow - 使用
LoadingMoreCustomScrollView支持多个SliverListSliverGridSliverWaterfallFlow
![]() |
![]() |
|---|---|
![]() |
![]() |
瀑布流
yaml
dependencies:
waterfall_flow: any
主要功能
- 快速创建瀑布流布局
![]() |
![]() |
|---|---|
![]() |
![]() |
锁定行列的表格
yaml
dependencies:
flex_grid: any
主要功能
- 水平垂直滚动
- 锁定行列
- 在
TabBarView和PageView中更佳的体验 - 高性能
![]() |
![]() |
![]() |
![]() |
![]() |
NestedScrollView 扩展
yaml
dependencies:
extended_nested_scroll_view: any
主要解决官方 NestedScrollView 存在的问题。
该文件已经由新组件 SliverMainAxisGroup 解决。对于使用低版本 Flutter 的童鞋,依然可以使用 extended_nested_scroll_view 。
将 onlyOneScrollInBody 设置为 true 即可。
列表扩展
yaml
dependencies:
extended_list: any
主要功能
- 监控列表元素回收
- 监控可视区域元素进入退出
- 为最后一个元素创建特殊布局
- 布局靠近下边
- 支持嵌套滚动
Webview
![]() |
![]() |
|---|---|
![]() |
![]() |
原生插件
截屏
yaml
dependencies:
ff_native_screenshot: any
截图
dart
Uint8List? data = await FfNativeScreenshot().takeScreenshot();
监听系统截图
我们需要去实现 ScreenshotFlutterApi,在 onTakeScreenshot 方法中获取到系统截图时候返回的字节流。
dart
@override
void initState() {
super.initState();
FfNativeScreenshot().setup(ScreenshotFlutterApiImplements());
FfNativeScreenshot().startListeningScreenshot();
}
@override
void dispose() {
FfNativeScreenshot().stopListeningScreenshot();
super.dispose();
}
class ScreenshotFlutterApiImplements extends ScreenshotFlutterApi {
ScreenshotFlutterApiImplements();
@override
Future<void> onTakeScreenshot(Uint8List? data) async {
// if it has something error
// you can call takeScreenshot
data ??= await FfNativeScreenshot().takeScreenshot();
}
}
阿里云一键登录
yaml
dependencies:
flutter_ali_auth: any
基于阿里云一键登录的 Flutter集成的SDK插件
- iOS
| 全屏 | 底部弹窗 | 中间弹窗 |
|---|---|---|
![]() |
![]() |
![]() |
- Android
| 全屏 | 底部弹窗 | 中间弹窗 |
|---|---|---|
![]() |
![]() |
![]() |
百度人脸离线采集
yaml
dependencies:
flutter_bdface_collect: any
- Init 初始化
dart
late var licenseId;
if (Platform.isAndroid) licenseId = "demo-face-android";
else if (Platform.isIOS) licenseId = "demo-face-ios";
print('开始初始化');
String? err = await FlutterBdfaceCollect.instance.init(licenseId);
print('初始化结果${err == null ? '成功' : '失败'}');
- Collect 采集
dart
FaceConfig config = FaceConfig(livenessTypes: Set.from(LivenessType.all.sublist(1, 4)));
CollectRresult res = await FlutterBdfaceCollect.instance.collect(config);
print('采集错误结果:${res.error.isNotEmpty} 内容:${res.error}');
print('采集原图imageCropBase64:${res.imageSrcBase64.isNotEmpty}');
print('采集抠图imageSrcBase64:${res.imageCropBase64.isNotEmpty}');
- UnInit 释放
dart
FlutterBdfaceCollect.instance.unInit();
获取鸿蒙版本
yaml
dependencies:
harmony_os_version: any
dart
_xxx() async {
String? osVersion = HarmonyOsVersion().osVersion();
print(osVersion);
}
扫描二维码
yaml
dependencies:
scan_barcode: any
这个插件是用于扫描二维码的插件,支持 Android 和 iOS 平台,它基于 Google 的 ML Kit。

录音
yaml
dependencies:
record_mp3: any
dart
import 'package:record_mp3/record_mp3.dart';
//start record
RecordMp3.instance.start(recordFilePath, (type) {
// record fail callback
});
//pause record
RecordMp3.instance.pause();
//resume record
RecordMp3.instance.resume();
//complete record and export a record file
RecordMp3.instance.stop();
保存到相册
yaml
dependencies:
saver_gallery: any
- 权限请使用 permission_handler
dart
bool statuses;
if (Platform.isAndroid) {
final deviceInfoPlugin = DeviceInfoPlugin();
final deviceInfo = await deviceInfoPlugin.androidInfo;
final sdkInt = deviceInfo.version.sdkInt;
/// [androidExistNotSave]
/// On Android, if true, the save path already exists, it is not saved. Otherwise, it is saved
/// 在安卓平台上,如果是true,则保存路径已存在就不在保存,否则保存
/// is androidExistNotSave = true,write as follows:
/// statuses = await Permission.storage.request().isGranted;
/// is androidExistNotSave = false,write as follows:
statuses =
sdkInt < 29 ? await Permission.storage.request().isGranted : true;
} else {
statuses = await Permission.photosAddOnly.request().isGranted;
}
bool statuses = await (Platform.isAndroid
? Permission.storage
: Permission.photosAddOnly)
.request()
.isGranted;
- 保存从网络下载的图片(png/jpg/gif/others),可以自定义图片质量和名字
dart
_saveGif() async {
var response = await Dio().get(
"https://hyjdoc.oss-cn-beijing.aliyuncs.com/hyj-doc-flutter-demo-run.gif",
options: Options(responseType: ResponseType.bytes));
String picturesPath = "test_jpg.gif";
debugPrint(picturesPath);
final result = await SaverGallery.saveImage(
Uint8List.fromList(response.data),
quality: 60,
name: picturesPath,
androidRelativePath: "Pictures/appName/xx",
androidExistNotSave: false,
);
debugPrint(result.toString());
_toastInfo("$result");
}
- 保存文件(video/others)
dart
_saveVideo() async {
var appDocDir = await getTemporaryDirectory();
String savePath = appDocDir.path + "/temp.mp4";
await Dio().download("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", savePath);
final result = await SaverGallery.saveFile(file: savePath,androidExistNotSave: true, name: '123.mp4',androidRelativePath: "Movies");
print(result);
}
iOS Live Activities
yaml
dependencies:
flutter_live_activities: any
Live Activities 的 Flutter 插件。用于创建、更新和处理 DynamicIsland UI 和 Lock screen/banner UI 的动作。
![]() |
![]() |
![]() |
|---|
文件查看器
yaml
dependencies:
flutter_filereader: any
本地文件查看文件的组件。它支持多种文件类型,如文档(Doc)、表格(Excel)、幻灯片(PPT)、文本文件(TXT)等。在 Android 平台上,它采用了腾讯的 X5 内核来实现(不支持 Google Play),而在 iOS 上则采用了 WKWebView 来实现。请注意,
支持的文件类型
- iOS
docx,doc,xlsx,xls,pptx,ppt,pdf,txt,jpg,jpeg,png - Android
docx,doc,xlsx,xls,pptx,ppt,pdf,txt
扩展
TabView 扩展
yaml
dependencies:
extended_tabs: any
主要功能
- 支持嵌套连续滚动
- 优化滚动手势冲突
![]() |
![]() |
|---|---|
额外的点击区域
yaml
dependencies:
extra_hittest_area: any
主要功能:
- 增加额外的点击区域,而不影响本身的大小和布局。

虚线
yaml
dependencies:
dash_painter: any
主要功能:
DashPainter根据Path绘制虚线- 支持点线样式
- 支持渐变虚线
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
手势
滑块视图
yaml
dependencies:
slider_view: any
一个支持自定义类型模型和各种配置的滑块视图小部件。
主要功能:
- ⚡️ 支持无限滚动
- 🎛 可以通过纵横比 或宽度 * 高度控制布局大小
- 🖲 显示指示器
- 💻 支持桌面平台
画板
yaml
dependencies:
flutter_drawing_board: any
主要功能:
- 基础绘制
- 自定义绘制
- 画布旋转、多指移动缩放
- 撤销、重做
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
! |
可交互图表
yaml
dependencies:
interactive_chart: any
主要功能:
- 黑白模式
- 平移,缩放
- 遮罩信息
- 自定义样式


![]() |
![]() |
![]() |
|---|
叠放画板
yaml
dependencies:
stack_board: any
主要功能:
- 添加自适应文本
- 添加自适应图片
- 添加画板
- 添加自定义
Widget - 添加自定义
Item
![]() |
![]() |
|---|---|
![]() |
![]() |
![]() |
左滑删除
yaml
dependencies:
left_scroll_actions: any
一款仿微信效果的 Flutter 左滑菜单插件。现在支持 iOS 的展开与弹性效果。
很轻松的打开关闭指定组件。 或者在同一个列表内通过 tag 实现联动关闭(打开一个关闭其他)。

可拖拽的容器
yaml
dependencies:
draggable_container: any
主要功能:
- 可拖动子部件
- 可删除子部件
- 可以锁定子部件位置

Api
和风天气 API
yaml
dependencies:
flutter_qweather: any
主要功能:
- 城市信息查询
- 热门城市查询
- POI信息搜索
- POI范围搜索
- 实时天气查询
- 逐天天气查询
- 逐时天气查询
- 中国地区未来2小时内每5分钟降水查询
- 当天生活指数查询
- 三天生活指数查询
- 天气灾害预警
- 灾害预警列表
- 空气质量实况
- 空气质量5天预报
- 历史天气
- 历史空气质量
- 日出日落
- 月升月落月相
- 太阳高度角
- 潮汐
- 潮流
- 台风列表
- 台风实况和路径
- 台风预报
百度网盘 API
yaml
dependencies:
baidupan: any
主要功能:
BaiduPan: 对应百度网盘的核心 API,主要是获取信息getUserInfo: 获取用户信息getDiskSpace: 获取网盘空间信息getFileList: 获取文件列表getFileListAll: 递归获取文件列表getDocList: 获取文档列表getImageList: 获取图片列表getVideoList: 获取视频列表getBtList: 获取 BT 列表getCountOfPathByType: 获取某个目录下的文件类型数量getCategoryList: 获取网盘分类列表search: 搜索getMetaData: 获取文件元数据getDownloadRequest: 获取下载请求getDownloadUrl: 获取下载地址
BaiduPanFileManager: 操作文件的管理类copy: 复制文件move: 移动文件rename: 重命名文件delete: 删除文件
BaiduPanUploadManager: 上传文件的管理类preCreate: 预创建文件uploadSinglePart: 上传分片文件merge: 合并分片(上传完成)
BaiduUploadHelper: 上传文件的断点续传
弹框
聪明的弹框
yaml
dependencies:
flutter_smart_dialog: any
主要功能:
- 不需要
BuildContext - 可以穿透暗背景,点击对话框后面的页面
- 支持对话框堆栈,关闭指定的对话框
- 支持定位小部件,显示指定位置的对话框
- 支持高亮功能,解除指定位置的遮罩
- 轻松实现提示,加载,附加对话框,自定义对话框





HSV 颜色选择器
yaml
dependencies:
flutter_hsvcolor_picker: any
一个专为 Flutter 应用设计的 HSV 颜色选择器,包括 RGB、HSV、颜色轮、调色板色调、调色板饱和度、调色板值和样本等选项。


自定义日历组件
- Flutter日历,可以自定义风格UI - 掘金 (juejin.cn)
- Flutter日历2.0,支持月视图和周视图,可以支持自定义风格 - 掘金 (juejin.cn)
- Flutter日历项目的优化记录 - 掘金 (juejin.cn)
yaml
dependencies:
flutter_custom_calendar: any
主要功能
- 支持公历,农历,节气,传统节日,常用节假日
- 日期范围设置,默认支持的最大日期范围为 1971.01-2055.12
- 禁用日期范围设置,比如想实现某范围的日期内可以点击,范围外的日期置灰
- 支持单选、多选模式,提供多选超过限制个数的回调和多选超过指定范围的回调。
- 跳转到指定日期,默认支持动画切换
- 自定义日历 Item,支持组合 widget 的方式和利用 canvas 绘制的方式
- 自定义顶部的 WeekBar
- 根据实际场景,可以给 Item 添加自定义的额外数据,实现各种额外的功能。比如实现进度条风格的日历,实现日历的各种标记
- 支持周视图的展示
- 支持月份视图和星期视图的展示与切换联动
![]() |
![]() |
|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
仿微信长按弹出菜单
yaml
dependencies:
w_popup_menu: any
快速构建微信风格的菜单。

动画
点赞按钮
Flutter 仿掘金推特点赞按钮 - 掘金 (juejin.cn)
yaml
dependencies:
like_button: any
Like Button 支持推特点赞效果和喜欢数量动画的 Flutter 库.

iOS 滑动返回和 Willpop 之间的冲突
yaml
dependencies:
ios_willpop_transition_theme: any
用于解决 iOS 滑动返回和 Willpop 之间的冲突。 关联的问题: #14203
- 全局使用
重载 PageTransitionsTheme 的 builders
dart
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Example',
theme: ThemeData(
/// Set as needed
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
TargetPlatform.iOS: IOSWillPopTransitionsBuilder(),
TargetPlatform.android: IOSWillPopTransitionsBuilder(),
TargetPlatform.macOS: IOSWillPopTransitionsBuilder(),
},
),
),
home: const Home(),
);
}
- 局部使用
使用 WillPopPageRoute
dart
Navigator.of(context).push(WillPopPageRoute(
builder: (_) => const TestPage(),
));

波纹扩散高斯模糊动画
yaml
dependencies:
ripple_backdrop_animate_route: any
波纹扩散,并且带高斯模糊,按钮跳动效果。

切换裁剪动画
yaml
dependencies:
flutter_switch_clipper: any
主要功能:
FillClipper从左向右CircleClipper切换图标颜色CircleClipper切换2个图标ShutterClipper相机快照效果WaveClipper波浪效果CameraClipper相机效果

![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
路由
法法注解路由
- Dart Pub Global 创建命令行应用程序(Windows) - 掘金 (juejin.cn)
- Flutter 法法路由注解 - 掘金 (juejin.cn)
- Flutter 法法注解路由 4.0 - 掘金 (juejin.cn)
- Flutter 路由我定 - 掘金 (juejin.cn)
- Flutter 法法路由 10.0 - 掘金 (juejin.cn)
yaml
dependencies:
# add for a package
ff_annotation_route_core: any
# add only for a project
ff_annotation_route_library: any
该工具通过注解快速完成路由映射和配置,使用过程更加简单准确。
激活命令: dart pub global activate ff_annotation_route
markdown
-h, --[no-]help 帮助信息。
-p, --path 执行命令的目录,默认当前目录。
-o, --output route 和 helper 文件的输出目录路径,路径相对于主项目的 lib 文件夹。
-n, --name 路由常量类的名称,默认为 `Routes`。
-g, --git 扫描 git 引用的 package,你需要指定 package 的名字,多个用 `,` 分开
--exclude-packages 排除某些 packages 被扫描
--routes-file-output routes 文件的输出目录路径,路径相对于主项目的lib文件夹
--const-ignore 使用正则表达式忽略一些const(不是全部const都希望生成)
--[no-]route-constants 是否在根项目中的 `xxx_route.dart` 生成全部路由的静态常量
--[no-]package 这个是否是一个 package
--[no-]super-arguments 是否生成路由参数帮助类
-s, --[no-]save 是否保存命令到本地。如果保存了,下一次就只需要执行 `ff_route` 就可以了。
--[no-]null-safety 是否支持空安全,默认 `true`
--[no-]fast-mode 快速模式: 只会对单独一个文件进行解析, 它更快.
非快速模式: 会对 packages 和 sdk 进行解析, 支持构造超级参数解析以及自动根据参数添加引用。
默认是快速模式
--[no-]argument-names 是否在路由参数模式下面,生成页面路由的参数名字。
--[no-]generate-file-import 是否自动生成文件的名字添加到 `exts` 参数中。
--generate-file-import-packages 是否将文件引用路径添加到 `exts` 参数中。
路由导航
yaml
dependencies:
nav_router: any
flutter 最简单/轻量/便捷的路由管理方案,支持各种路由动画,跳转/传参起来非常方便,跳转新页面只需:routePush(NewPage())
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
工具
Json 转换 Dart
JsonToDart
从开始使用 C# 利用 WPF,UWP,Silverlight 支持 Windows 桌面和网页端,到最后使用 Flutter 一波梭哈桌面网页,这也印证了 Flutter 的发展和更好。
工具在线地址: json_to_dart (gitee.io)

FlutterJsonBeanFactory
- flutter-FlutterJsonBeanFactory解决网络请求泛型问题 - 掘金 (juejin.cn)
- flutter里对json解析和根据泛型进行自动实例化 - 掘金 (juejin.cn)
这是一个可以在编辑器中直接下载的插件,方便在开发工程中直接生成 dart 文件。你可以在编辑器插件里面搜索 FlutterJsonBeanFactory。

json_dart
市面上的 json to dart 工具一般都没有提供自定义生成代码的功能,而它提供丰富的模板,并且支持自定义自己喜欢的代码模板。
在线地址: JSOND (bytex.space)

Assets 生成工具
assets_generator
激活命令: pub global activate assets_generator
执行命令: agen -h
- 在单个项目中使用
dart
Image.asset(Assets.assets_images_xxx_jpg);
- 在模块中使用
dart
Image.asset(
Assets.assets_images_xxx_jpg,
package: Assets.package,
);
可用命令:
markdown
-h, --[no-]help 显示帮助信息
-p, --path Flutter 项目的根路径
(默认 ".")
-f, --folder assets 文件夹的名字
(默认 "assets")
-w, --[no-]watch 是否继续监听 assets 的变化
(默认 开启)
-t, --type pubsepec.yaml 生成配置的类型
"d" 代表以文件夹方式生成 "- assets/images/"
"f" 代表以文件方式生成 "- assets/images/xxx.jpg"
(默认 "d")
-s, --[no-]save 是否保存命令到本地
如果执行 "agen" 不带任何命令,将优先使用本地的命令进行执行
-o, --out const 类放置的位置
(默认放置在 "lib" 下面)
-r, --rule consts 的名字的命名规范
"lwu"(小写带下划线) : "assets_images_xxx_jpg"
"uwu"(大写带下划线) : "ASSETS_IMAGES_XXX_JPG"
"lcc"(小驼峰) : "assetsImagesXxxJpg"
(默认 "lwu")
-c, --class const 类的名字
(默认 "Assets")
--const-ignore 使用正则表达式忽略一些const(不是全部const都希望生成)

flutter_asset_generator
激活命令: pub global activate flutter_asset_generator
执行命令: fgen -h
bash
-w, --[no-]watch Continue to monitor changes after execution of orders.
(defaults to on)
-p, --[no-]preview Generate file with preview comments.
(defaults to on)
-o, --output Your resource file path.
If it's a relative path, the relative flutter root directory
(defaults to "lib/const/resource.dart")
-s, --src Flutter project root path
(defaults to ".")
-n, --name The class name for the constant.
(defaults to "R")
-h, --[no-]help Help usage
-d, --[no-]debug debug info
生成代码例子:
dart
/// Generate by [asset_generator](https://github.com/fluttercandies/flutter_asset_generator) library.
/// PLEASE DO NOT EDIT MANUALLY.
class R {
const R._();
/// 
static const String ASSETS_BLUETOOTHON_FJDFJ_PNG = 'assets/bluetoothon-fjdfj.png';
/// 
static const String ASSETS_BLUETOOTHON_PNG = 'assets/bluetoothon.png';
/// 
static const String ASSETS_CAMERA_PNG = 'assets/camera.png';
/// 
static const String IMAGES_AUDIO_PNG = 'images/audio.png';
/// 
static const String IMAGES_BLUETOOTHOFF_PNG = 'images/bluetoothoff.png';
/// 
static const String IMAGES_CHILD_PNG = 'images/child.png';
/// 
static const String IMAGES_COURSE_PNG = 'images/course.png';
}
代码规范
- Flutter Analysis Options - 掘金 (juejin.cn)
- Dart 怎么阻止你的同事使用Getx(自定义Lint) - 掘金 (juejin.cn)
- Dart 扩展提示能用了吗? - 掘金 (juejin.cn)
如果官方提供的 lint 已经不能满足你的需求,比如,阻止你的同事使用 Getx,咋办了?不怕,我们可以自定义 lint。
通过该工具,你可以快速创建属于自己项目的代码规范。




调试的面板组件
yaml
dependencies:
fconsole: any
一个用于调试的面板组件,类似微信小程序的 v-console:在页面上创建一个可拖拽的悬浮窗,点击悬浮窗可启用 log 列表面板。
主要功能:
- 显示悬浮窗,随时打开
Log页面 - 可自定义页面插入,项目专属调试页不用藏
- 使用
FlowLog可记录流程事件,网络Log清晰可见(支持json树状展示) - 分享完整
FlowLog网络请求,一键反馈(甩锅)后端报错
![]() |
![]() |
|---|---|
![]() |
坐标转换
yaml
dependencies:
coordtransform: any
提供百度坐标系(BD-09)、火星坐标系(国测局坐标系、GCJ02)、WGS84 坐标系的相互转换。
dart
CoordResult result;
result = CoordTransform.transformBD09toGCJ02(116.404, 39.915);
print("BD09toGCJ02 ${result.lon} ${result.lat}");
result = CoordTransform.transformGCJ02toBD09(116.404, 39.915);
print("GCJ02toBD09 ${result.lon} ${result.lat}");
result = CoordTransform.transformWGS84toGCJ02(116.404, 39.915);
print("WGS84toGCJ02 ${result.lon} ${result.lat}");
result = CoordTransform.transformGCJ02toWGS84(116.404, 39.915);
print("GCJ02toWGS84 ${result.lon} ${result.lat}");
result = CoordTransform.transformBD09toWGS84(116.404, 39.915);
print("BD09toWGS84 ${result.lon} ${result.lat}");
result = CoordTransform.transformWGS84toBD09(116.404, 39.915);
print("WGS84toBD09 ${result.lon} ${result.lat}");
Flutter 项目清理工具
帮助清理多个 Flutter 项目,降低磁盘占用。
激活命令: dart pub global activate flutter_cleaner
执行命令: flutter_clean
实战项目
仿微信应用
wechat_flutter 是 Flutter 版微信,目前已实现即时通讯基本功能,支持 Android 和 iOS 。

![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
GitHub 项目
从 0 搭建的 Flutter 实战项目,感兴趣的小伙可以关注, 掘金文章地址,跟着从 0 开始写 Flutter 项目。

掘金
Flutter 实现的掘金客户端,很好的练手项目。
![]() |
![]() |
|---|
裸眼 3D 效果
![]() |
![]() |
|---|
获取新肺炎实时动态App
非常完整的 Flutter 实战项目,大家可以跟着一起学起来。
![]() |
![]() |
![]() |
![]() |
|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
网易云音乐
学习 Flutter 的一个途径就是模仿现有的 App,在 Flutter 上面进行实现。这是一个从 0 搭建的网易云音乐。大家可以跟随着作者的思路一步步完成一个完整的 Flutter 项目。
![]() |
![]() |
![]() |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
热更新
Flutter 从一出生就跟隔壁的 facebook/react-native: A framework for building native applications using React (github.com)进行对比。不能热更新,一直都是大家选型的时候顾虑。这个问题也在 Code Push / Hot Update / out of band updates · Issue #14330 · flutter/flutter (github.com) 讨论的非常激烈。
Fair 是
58提供的一整套Flutter动态化解决方案,糖果成员只是参与了一部分功能实现,鉴于大家对热更新的关注,所以也放在这里,方便大家查看。详情请查看 Flutter 热更新 Fair 真.体验 - 掘金 (juejin.cn)。
鸿蒙
这里为啥要提到鸿蒙呢? 相信大家都听说了 Harmony Next 版本将正式剥离 AOSP 支持,而官方已经开源了 OpenHarmony-SIG/flutter_flutter (gitee.com) 来支持 Flutter 在鸿蒙上面运行。详情请看 Flutter Love 鸿蒙 - 掘金 (juejin.cn)。
鸿蒙开发在国内已经是一种趋势,不管从个人还是其他方面考虑,作为一个开发者,学习新的东西也是必要的。
HarmonyCandiesQQ群: 981630644
大部分同学都是来至 FlutterCandies,在这里我们会分享鸿蒙最新的消息,以及 OpenHarmony-SIG/flutter_flutter (gitee.com) 进展。对于 Flutter 开发来说,我们也需要更多开发者来做鸿蒙端的原生插件的开发,欢迎大家的加入。在鸿蒙高级开发程序媛 拉面 的带领下,相信你能更快地从入门到退群。
开鸿派QQ群: 752399947
群主是一名独立开发者,从事鸿蒙开发,在鸿蒙生态不够完善的情况下,OHOS 组织 已经做了不少事情。(想了一想,5 年前 Flutter 不也这样吗?)
OHOS组织的愿景
- 更多的开发者参与
OHOS开源应用软件的共建- 扩大
OHOS系统和应用软件的生态和影响力OHOS在未来的国产化技术覆盖领域中全面绽放
正如 OHOS 组织 的愿景一样, OpenHarmony 目前已经有 6000+ 共建者,期待你也成为其中一员。

我们的成员
q1

作者开源的 2 个项目,都是学习 Flutter 不可多得的实战项目。
Alex Li

把你们的辣鸡代码都拿出来问,我帮你们分析辣鸡
Flutter GDE,同时也是 Flutter Contributor、Flutter 中文用户组的成员,维护 flutter.cn/dart.cn 参与了许多 Flutter 开源组织和 package 的开发。
我们都叫他 pr man, alex is everywhere。

龙哥

在开发的海洋里溺亡
江湖外号 龙哥 或者 财经龙,据说写代码只是爱好,炒股才是正经事。又是一个住在 Github 上面的开发者。

cr1992

开源的 auto_resize_image 解决了图片内存问题。
CyJaySong

开源多款原生插件,以及利用 Flutter 实现了类似美团外卖店铺页面滑动效果。

![]() |
![]() |
|---|
yeoman

开源的 可拖拽的容器 功能强大,十分方便高效。

王叔

王叔不秃,出了多达 149 个的 Flutter 入门视频,喜欢看视频学习的朋友必须关注一下。
当然他开源的 图表 也是非常华丽好看的。

星星

星星 星星锅 八分克星 全栈二刺螈,你可以在到处看到他的作品。

林洵锋

Flutter Contributor ,多次为 Flutter SDK 和Flutter Engine 提供修复。
其开源的 flutter_scrollview_observer ,解决了官方列表在滚动方面的缺陷。

LXD312569496

入魔的冬瓜,自定义日历组件 的作者。
![]() |
![]() |
|---|
大宝

换行吧
大家都喜欢可爱的 大宝,稀奇古怪的年轻人,群里的机器人就是大宝首先抛出来的。之前说是养猪的,现在变成种地的,听说已经上岸了,并且只有 80 斤 。经常在群里帮助解答问题,但是说的最多的还是 换行吧。
马老师

你是在悟道吗? 写代码靠猜。
马老师,是的,就是那个会闪电鞭的。来群里,马老师教你写代码。

他的开源项目 Flutter 抖音 更是斩获上千点赞。


Nayuta403

Flutter GDE,同时也是 Flutter Contributor、Flutter 中文用户组的成员,开源了很多不错的组件, 其中列表性能优化 Keframe 无人不晓。
![]() |
![]() |
|---|
shingohu

张风捷特烈

海的彼岸有我未曾见证的风采
不可能还有没有看过张老师的 Flutter 掘金小册的人吧? 又不知有多少人是学习鼎鼎大名的 FlutterUnit 入门 Flutter 的呢?见过最有诗情画意的开发者,持续地 Flutter 知识输出,绝对是你值得关注的开发者。

Wang Lu

开源的实战项目 Flutter 版本的网易云音乐 是一个功能完善的项目,对于刚入门的新手来说,是个不错的跟学项目。

小呆呆666

呆呆开源的 flutter_smart_dialog 解决了 Flutter 系统弹框的一些痛点,更方便开发者使用。呆呆也是一名不断输出知识的优秀作者。

xSILENCEx

他开发的画板系列(flutter_drawing_board 和 stack_board ),解决 Flutter 在画板涂鸦的空缺。
![]() |
![]() |
|---|---|
![]() |
![]() |
ysdy44

淹死的鱼, 是我做 UWP 的时候认识的,当年 FlutterCandies 建群的时候,只有我和他两个人。他现在依然做着喜欢的 UWP ,他留下的 flutter_hsvcolor_picker 已经被一个外国友人接手,依然发挥着它的能量。

拉面

扶我起来,我还能撸代码
如果说大宝是群可爱,那么拉面就是群花。 拉面来了,大家快跑! 可不是说着玩的,因为她经常卡卡卡就清掉群里一堆不活跃的人,绝对是你们不敢得罪的女人。
鸿蒙高级开发程序媛,平时悄悄学鸿蒙,已经把 Flutter 中的 LikeButton 也迁移到了 HarmonyOS。
项目地址: yumi0629/HarmonyCandiesLike (github.com)

Loraine Lesch

他的 Github,掘金,QQ 昵称都不一样,一个很奇怪的人,哈哈哈。但他开源的工具挺好用的。
法的空间

只听说他有
200斤。
Flutter 中国
- Flutter: 为所有屏幕创造精彩 - Flutter 中文开发者网站 - Flutter
- Dart 编程语言主页 | Dart 中文文档 | Dart
- CFUG (筹) (github.com)
- Flutter社区 的个人主页 - 动态 - 掘金 (juejin.cn)

为什么要在这里提 Flutter 中国 呢?是因为有这样一群默默奉献的开发者。
感谢 Flutter 中国 为我们提供了稳定的开发环境,开发体验幸福感拉满。
ini
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
PUB_HOSTED_URL=https://pub.flutter-io.cn
每一次 Flutter 的发布,都是他们最忙碌的时候,每次的变更,新增,他们要通过一次次的翻译以及校对,确保大家看到的中文文档准确无误。这些头像里面有很多都是老面孔了,真的让人很敬佩。
掘金
掘金是一个真的很不错的国内技术平台社区,让不认识的开发者都聚在一起。这里有很多活动可以参加,也有很多高质量的掘金小册子可以学习。不管你是喜欢分享的,还是喜欢学习的,你都能找到自己想要的。
它同样也是一个温情的平台,每天签到,获得符石就可以参加 稀土掘金点石成金公益计划 ,无意间能帮助到你不认识的人,也是很开心的事情。
每天不自觉的登录,看看文章,逛逛沸点,就像刷抖音朋友圈一样,已经成为习惯。感谢掘金,给我们提供了一个帮助开发者成长的社区。
结语
Flutter 从 1.12.13 到 3.13.8, FlutterCandies 也 5 岁了,社区五年的成长,离不开每一位社区成员的默默付出,感谢你们一直以来的陪伴和贡献。
绝大多数的开源伙伴,都是出于对技术的热情和深切的兴趣,利用自己有限的业余时间,默默投入到开源项目中。这种无私的奉献精神着实不容易,它贯穿于整个开源社区。
开源并不仅仅是一种兴趣,更是一项责任。每一位开源伙伴都愿意为了技术的不断进步和社区的繁荣,坚守着这份责任。坚持下来,真的非常不容易。在这个过程中,我们需要不断克服技术挑战,解决问题,撰写文档,与其他社区成员协同合作,付出了大量的心血和时间。
虽然或许会有一天,可能因为某些原因,我们终将离开,但至少我们可以骄傲地说,我们曾经在这里留下过自己的足迹,曾经为开源社区的繁荣尽心尽力。我们做过,我们为开源事业贡献过自己的一份力量,这是一种无法被取代的成就。
如果你是喜欢分享的,请加入我们;如果你需要分享的,也请加入我们。
爱 Flutter,爱糖果,欢迎加入 FlutterCandies,一起生产可爱的 Flutter 小糖果。QQ群: 181398081 。
最最后放上 FlutterCandies 全家桶,真香。























































































































































