面试被问到 FlutterCandies,阁下又当如何应对 ?

8,088 阅读32分钟

前言

坐在面试官面前,我感到有些紧张,而面试官似乎察觉到了。他面带微笑,递了一杯水给我,问道:“你平时有玩什么游戏吗?”

我很惊讶,但很快冷静了下来,回答道:“平时偶尔玩一下 Dota。”

面试官接着问: “是什么吸引你玩 Dota 的?”

我想了想说:

  • 运营,需要耐心地运营,任何一点细节都会影响最终的结果。
  • 学习和适应性,需要不断的去学习,适应新的东西。
  • 团队协作,个人的实力再强,也需要团队的配合,才能走的更远。
  • 坚持,不到最后一秒,你无法知道到底结果如何。

面试官又问道: “那你在学习工作生活中,你觉得有什么东西跟 Dota 相似的吗?”

我回答道: “我觉得不论是在学习、工作还是生活中,都需要耐心运营,并不断适应新的环境和知识。单打独斗通常不是高效的方式,只有坚持不懈,才能取得显著的成果。举个例子,就像在 技术社区 中,大家都对相同的兴趣保持着高度的热情。技术社区的成员分享编程技巧、开发经验和问题解决方法;他们积极合作,共同建设资源、工具和资料,以推动领域的发展;他们不仅学习新的技能,还不断提高自己的表现,以达到更高的水平。”

面试官: “你这里说到技术社区,那你有听说过 FlutterCandies 吗?”

这个问题让我稍作思考,然后微笑着回答:“当然,FlutterCandies 是一个非常杰出的 Flutter 社区。他们致力于分享各种 Flutter 插件、工具和示例代码,为 Flutter 开发者提供了强大的支持,让他们更轻松地构建高质量的应用程序。FlutterCandies 社区的成员积极参与开源项目,为 Flutter 生态系统的繁荣作出了出色的贡献。

1697858375395.gif

然而,面试官似乎对我的回答还想深入了解,他接着追问:“除此以外,还有其他方面的了解吗?”

我稍作思考后继续说:“实际上,我也是 FlutterCandies 社区的一名成员,有幸为社区开发了 xxx 组件。尽管只是小小的贡献,但我相信它有助于填补一些官方尚未覆盖的领域,并为提高应用的质量和效率提供了一点帮助。”

这番回答似乎使面试官感到满意,并表现出对我对 FlutterCandies 的了解和社区参与的鼓励。

看我不再紧张,面试官说道:“那我们正式开始吧!”

......

临走的时候,面试官微笑地对我说道:“CN DOTA,BEST DOTA!”。看来除了客户端,哪里都是刀斯林。

简介

FlutterCandies 经过众多成员的不懈努力,从创立至今,已积累了 102 个仓库,26 名成员,发布了 56 个组件和插件到 pub.dev,同时还拥有一个拥有 2000 人的 QQ 群。

截屏2023-10-31 11.14.40.png

截屏2023-10-31 11.19.11.png

image.png

这就是糖果

距离 Flutter Candies 一桶天下 - 掘金 (juejin.cn) 的发布已经 4 年了。为了让大家全面地了解 FlutterCandies ,接下来将为大家一一介绍。

图片

图片扩展

dependencies:
  extended_image: any

主要功能

  • 缓存网络图片

  • 加载状态(正在加载,完成,失败)

  • 拖拽缩放图片

  • 图片编辑(裁剪,旋转,翻转)

  • 图片预览(跟微信掘金一样)

  • 滑动退出效果(跟微信掘金一样)

  • 设置圆角,边框

  • 支持进度显示

  • 图片预览上滑显示详情(跟图虫一样)

image.gifcustom.gif
crop.gifpaint.gif
editor.gifphoto_view.gif
slide.gifzoom.gif

图片编辑

dependencies:
  image_editor: any

这是一个用于处理图片数据的库,extended_image 提供了用于编辑图片的用户界面 (UI),而 image_editor 则负责对编辑后的图片数据进行处理。当然,您也可以单独使用它来修改图片数据。

主要功能

  • 翻转
  • 裁剪
  • 旋转
  • 缩放
  • 矩阵
  • 添加文本
  • 混合图像
  • 合并多个图像
  • 绘制物体
    • 绘制点
    • 绘制线
    • 绘制矩形
    • 绘制圆
    • 绘制路径
    • 绘制贝塞尔曲线
  • 高斯模糊

图片选择器

dependencies:
  wechat_assets_picker: any

基于 微信 UI 的 Flutter 图片选择器(同时支持视频和音频) 。

主要功能

  • ♿ 完整的无障碍支持,包括 TalkBack 和 VoiceOver

  • ♻️ 支持基于代理重载的全量自定义

  • 🎏 完全可自定义的基于 ThemeData 的主题

  • 💚 复刻微信风格(甚至优化了更多的细节)

  • ⚡️ 根据配置调节的性能优化

  • 📷 图片资源支持

    • 🔬 HEIF 格式图片支持 (1)
  • 🎥 视频资源支持

  • 🎶 音频资源支持 (2)

  • 1️⃣ 单选模式模式

  • 💱 国际化 (i18n) 支持

    • ⏪ RTL 语言支持
  • ➕ 特殊 widget 构建支持

  • 🗂 自定义路径排序支持

  • 📝 自定义文本构建支持

  • ⏳ 自定义筛选规则支持

  • 💻 支持 MacOS

image.pngimage.pngimage.png
image.pngimage.pngimage.png
image.pngimage.pngimage.png
101012

图片压缩

dependencies:
  flutter_image_compress: any

将图像压缩为原生插件(Obj-C/Kotlin/pica)。此库适用于Android,iOS, Web 平台。

功能AndroidiOSWeb
method: compressWithList✅✅✅
method: compressAssetImage✅✅✅
method: compressWithFile✅✅❌
method: compressAndGetFile✅✅❌
format: jpeg✅✅✅
format: png✅✅✅
format: webp✅✅🌐
format: heic✅✅❌
param: quality✅✅🌐
param: rotate✅✅❌
param: keepExif✅✅❌

相册资源管理

dependencies:
  photo_manager: any

通过相册的抽象 API 对设备中的资源(图片、视频、音频)进行管理,不需要集成 UI。 在 Android、iOS 和 macOS 上可用。

主要功能:

  • 请求权限
  • 获取相簿或图集 (AssetPathEntity)
  • 获取资源 (AssetEntity)
  • 资源变动的通知回调
  • 过滤资源

正因为它的功能强大,目前已有 42 的 packages 依赖它。

Search results for dependency:photo_manager (pub.dev)

image.png

image.png

相机选择器

dependencies:
  wechat_camera_picker: any

基于 微信 UI 的 Flutter 相机选择器,可以单独运行, 同时是 wechat_assets_picker 的扩展。

主要功能:

  • ♿ 完整的无障碍支持,包括 TalkBack 和 VoiceOver
  • ♻️ 支持基于 State 重载的全量自定义
  • 🎏 完全可自定义的基于 ThemeData 的主题
  • 💚 复刻微信风格(甚至优化了更多的细节)
  • ⚡️ 根据配置调节的性能优化
  • 📷 支持拍照
  • 🎥 支持录像
    • ⏱ 支持限制录像时间
    • 🔍 支持录像时缩放
  • ☀️ 支持设置曝光参数
  • 🔍️ 支持捏合缩放
  • 💱 国际化支持
    • ⏪ RTL 语言支持
  • 🖾 支持自定义前景 widget 构建
  • 🕹️ 保存时拦截自定义操作
DM_20231018160632_001.jpgDM_20231018160632_002.jpgDM_20231018160632_003.jpg
DM_20231018160632_004.jpgDM_20231018160632_005.jpg

文本和输入框

文本扩展

dependencies:
  extended_text: any

主要功能

  • 支持自定义文本溢出效果。可以自定义溢出的 Widget,并控制溢出位置(前、中、后)
  • 根据文本格式快速构建富文本,支持复制特殊文本的真实值
  • 更友好的换行判断
image.png
JoinZeroWidthSpace.jpg

截屏2023-10-16 14.18.04.png

输入框扩展

dependencies:
  extended_text_field: any

主要功能

  • 图文混合
  • 可以正常选择,支持复制真实值
  • 根据文本格式快速构建富文本
1668402713591.gif

列表

监听滚动视图的组件

dependencies:
  scrollview_observer: any

不需要改变你当前所使用视图,只需要在视图外包裹一层即可实现如下功能点

  • 监听滚动视图中正在显示的子部件
  • 支持滚动到指定下标位置
  • 快速实现聊天会话列表的效果
  • 支持在插入或更新消息时保持IM消息位置,避免抖动

支持以下组件

  • ListView
  • SliverList
  • GridView
  • SliverGrid
  • 支持 SliverPersistentHeader,SliverList 和 SliverGrid 混合使用
  • 由第三方库构建的 ScrollView

1.gif

2.gif

3.gif

4.gif

5.gif

6.gif

7.gif

8.gif

9.gif

下拉刷新

dependencies:
  pull_to_refresh_notification: any

主要功能

  • 快速方便自定义自己想要的下拉刷新效果
candies.gif

列表加载更多

dependencies:
  loading_more_list: any

主要功能

  • 支持快速定义 ListView GridView WaterfallFlow
  • 使用 LoadingMoreCustomScrollView 支持多个 SliverList SliverGrid SliverWaterfallFlow
variable_sized.gif

瀑布流

dependencies:
  waterfall_flow: any

主要功能

  • 快速创建瀑布流布局

锁定行列的表格

dependencies:
  flex_grid: any

主要功能

  • 水平垂直滚动
  • 锁定行列
  • 在 TabBarView 和 PageView 中更佳的体验
  • 高性能
FrozenedRowColumn.gifTabView.gifHugeData.gif
Excel.gifStockList.gif

NestedScrollView 扩展

dependencies:
  extended_nested_scroll_view: any

主要解决官方 NestedScrollView 存在的问题。

该文件已经由新组件 SliverMainAxisGroup 解决。对于使用低版本 Flutter 的童鞋,依然可以使用 extended_nested_scroll_view 。

将 onlyOneScrollInBody 设置为 true 即可。

列表扩展

dependencies:
  extended_list: any

主要功能

  • 监控列表元素回收
  • 监控可视区域元素进入退出
  • 为最后一个元素创建特殊布局
  • 布局靠近下边
  • 支持嵌套滚动 Webview
nested_scroll_webview.gifchat_list.gif
gridview.giflistview.gif

原生插件

截屏

dependencies:
  ff_native_screenshot: any

截图

Uint8List? data = await FfNativeScreenshot().takeScreenshot();

监听系统截图

我们需要去实现 ScreenshotFlutterApi,在 onTakeScreenshot 方法中获取到系统截图时候返回的字节流。


  @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();
    }
  }

阿里云一键登录

dependencies:
  flutter_ali_auth: any

基于阿里云一键登录的 Flutter集成的SDK插件

  • iOS
全屏底部弹窗中间弹窗
DM_20231018102750_001.pngDM_20231018102750_002.pngDM_20231018102750_003.png
  • Android
全屏底部弹窗中间弹窗
DM_20231018102750_004.jpgDM_20231018102750_005.jpgDM_20231018102750_006.jpg

百度人脸离线采集

dependencies:
  flutter_bdface_collect: any
  • Init 初始化
    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 采集
    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 释放
    FlutterBdfaceCollect.instance.unInit();

获取鸿蒙版本

dependencies:
  harmony_os_version: any
_xxx() async {
    String? osVersion = HarmonyOsVersion().osVersion();
    print(osVersion);
 }

扫描二维码

dependencies:
  scan_barcode: any

这个插件是用于扫描二维码的插件,支持 Android 和 iOS 平台,它基于 Google 的 ML Kit。

s1.jpg

录音

dependencies:
  record_mp3: any
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();

保存到相册

dependencies:
  saver_gallery: any
    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),可以自定义图片质量和名字
  _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)
_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

dependencies:
  flutter_live_activities: any

Live Activities 的 Flutter 插件。用于创建、更新和处理 DynamicIsland UI 和 Lock screen/banner UI 的动作。

DM_20231018142404_001.gifDM_20231018142404_002.gifDM_20231018142404_003.png

文件查看器

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 扩展

dependencies:
  extended_tabs: any

主要功能

  • 支持嵌套连续滚动
  • 优化滚动手势冲突

额外的点击区域

dependencies:
  extra_hittest_area: any

主要功能:

  • 增加额外的点击区域,而不影响本身的大小和布局。

QQ20210830-093804-HD.gif

虚线

dependencies:
  dash_painter: any

主要功能:

  • DashPainter 根据 Path 绘制虚线
  • 支持点线样式
  • 支持渐变虚线
68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303037303730303130322e706e67.png68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303037323134333434312e706e67.png68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303039313630353431312e706e67.png
68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303037303932333032302e706e67.png68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303037313034393736392e706e67.png68747470733a2f2f67697465652e636f6d2f746f6c79313939342f746f6c795f626c6f675f7069632f7261772f6d61737465722f696d6167652d32303231303531303037313133313938362e706e67.png

手势

滑块视图

dependencies:
  slider_view: any

一个支持自定义类型模型和各种配置的滑块视图小部件。

主要功能:

  • ⚡️ 支持无限滚动
  • 🎛 可以通过纵横比或宽度 * 高度控制布局大小
  • 🖲 显示指示器
  • 💻 支持桌面平台

画板

dependencies:
  flutter_drawing_board: any

主要功能:

  • 基础绘制
  • 自定义绘制
  • 画布旋转、多指移动缩放
  • 撤销、重做
DM_20231018103426_001.gifDM_20231018103426_002.gifDM_20231018103426_003.gif
DM_20231018103426_004.gifDM_20231018103426_005.gifDM_20231018103426_006.gif
DM_20231018103426_007.gif!

可交互图表

dependencies:
  interactive_chart: any

主要功能:

  • 黑白模式
  • 平移,缩放
  • 遮罩信息
  • 自定义样式

DM_20231018140129_001.gif

DM_20231018140129_005.gif

DM_20231018140129_002.gifDM_20231018140129_003.gifDM_20231018140129_004.gif

叠放画板

dependencies:
  stack_board: any

主要功能:

  • 添加自适应文本
  • 添加自适应图片
  • 添加画板
  • 添加自定义 Widget
  • 添加自定义 Item
DM_20231018141406_001.gifDM_20231018141406_002.gif
DM_20231018141406_003.gifDM_20231018141406_004.gif
DM_20231018141406_005.gif

左滑删除

dependencies:
  left_scroll_actions: any

一款仿微信效果的 Flutter 左滑菜单插件。现在支持 iOS 的展开与弹性效果。

很轻松的打开关闭指定组件。 或者在同一个列表内通过 tag 实现联动关闭(打开一个关闭其他)。

DM_20231018143545_001.gif

可拖拽的容器

dependencies:
  draggable_container: any

主要功能:

  • 可拖动子部件
  • 可删除子部件
  • 可以锁定子部件位置

DM_20231018154623_001.gif

Api

和风天气 API

dependencies:
  flutter_qweather: any

主要功能:

  • 城市信息查询
  • 热门城市查询
  • POI信息搜索
  • POI范围搜索
  • 实时天气查询
  • 逐天天气查询
  • 逐时天气查询
  • 中国地区未来2小时内每5分钟降水查询
  • 当天生活指数查询
  • 三天生活指数查询
  • 天气灾害预警
  • 灾害预警列表
  • 空气质量实况
  • 空气质量5天预报
  • 历史天气
  • 历史空气质量
  • 日出日落
  • 月升月落月相
  • 太阳高度角
  • 潮汐
  • 潮流
  • 台风列表
  • 台风实况和路径
  • 台风预报

百度网盘 API

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: 上传文件的断点续传

弹框

聪明的弹框

dependencies:
  flutter_smart_dialog: any

主要功能:

  • 不需要 BuildContext
  • 可以穿透暗背景,点击对话框后面的页面
  • 支持对话框堆栈,关闭指定的对话框
  • 支持定位小部件,显示指定位置的对话框
  • 支持高亮功能,解除指定位置的遮罩
  • 轻松实现提示,加载,附加对话框,自定义对话框

20220103160140.gif

202201140931573.gif

20211216222718.gif

20220103160210.gif

20211103092253.gif

HSV 颜色选择器

dependencies:
  flutter_hsvcolor_picker: any

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

design.png

phone.png

自定义日历组件

dependencies:
  flutter_custom_calendar: any

主要功能

  • 支持公历,农历,节气,传统节日,常用节假日
  • 日期范围设置,默认支持的最大日期范围为 1971.01-2055.12
  • 禁用日期范围设置,比如想实现某范围的日期内可以点击,范围外的日期置灰
  • 支持单选、多选模式,提供多选超过限制个数的回调和多选超过指定范围的回调。
  • 跳转到指定日期,默认支持动画切换
  • 自定义日历 Item,支持组合 widget 的方式和利用 canvas 绘制的方式
  • 自定义顶部的 WeekBar
  • 根据实际场景,可以给 Item 添加自定义的额外数据,实现各种额外的功能。比如实现进度条风格的日历,实现日历的各种标记
  • 支持周视图的展示
  • 支持月份视图和星期视图的展示与切换联动

仿微信长按弹出菜单

dependencies:
  w_popup_menu: any

快速构建微信风格的菜单。

动画

点赞按钮

Flutter 仿掘金推特点赞按钮 - 掘金 (juejin.cn)

dependencies:
  like_button: any

Like Button 支持推特点赞效果和喜欢数量动画的 Flutter 库.

iOS 滑动返回和 Willpop 之间的冲突

dependencies:
  ios_willpop_transition_theme: any

用于解决 iOS 滑动返回和 Willpop 之间的冲突。 关联的问题: #14203

  • 全局使用

重载 PageTransitionsTheme 的 builders

@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

Navigator.of(context).push(WillPopPageRoute(
   builder: (_) => const TestPage(),
));

pre.gif

波纹扩散高斯模糊动画

dependencies:
  ripple_backdrop_animate_route: any

波纹扩散,并且带高斯模糊,按钮跳动效果。

68747470733a2f2f70312d6a6a2e62797465696d672e636f6d2f746f732d636e2d692d74326f616761326173782f676f6c642d757365722d6173736574732f323031392f382f32312f313663623464353865333435386664377e74706c762d74326f616761326173782d7a6f6f6d2d696e2d63726f702d6.webp

切换裁剪动画

dependencies:
  flutter_switch_clipper: any

主要功能:

  • FillClipper 从左向右
  • CircleClipper 切换图标颜色
  • CircleClipper 切换 2 个图标
  • ShutterClipper 相机快照效果
  • WaveClipper 波浪效果
  • CameraClipper 相机效果

fc.gif

fv.gifcs.gifcs5.gif
cs4.gifcs3.gifcs2.gif

倾斜视差悬停

dependencies:
  flutter_tilt: any

“Flutter Tilt 是什么?”

简单来说,它提供手势倾斜视差悬停的效果,支持倾斜、光照、阴影效果以及陀螺仪传感器,拥有丰富的自定义参数。
它就像块小甜品,低负担且饱含惊喜,在合适的场景合理运用,它能够为你的项目添置些许有趣的味道。

在线例子: amoshuke.github.io/flutter_til…

主要功能:

  • 📦 倾斜效果
  • 🔦 光照效果
  • 💡 阴影效果
  • 👀 视差效果
  • 📱 陀螺仪传感器支持(传感器兼容)
  • 🧱 多种布局位置
  • 👇 支持鼠标、触摸和传感器事件
  • 🖼️ 流畅的动画
  • ⚙️ 许多自定义参数

DM_20231031103349_001.gif

DM_20231031103349_002.gifDM_20231031103349_004.gif

路由

法法注解路由

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

-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` 参数中。

路由导航

dependencies:
  nav_router: any

flutter 最简单/轻量/便捷的路由管理方案,支持各种路由动画,跳转/传参起来非常方便,跳转新页面只需:routePush(NewPage())

DM_20231018132216_001.gifDM_20231018132216_002.gifDM_20231018132216_003.gif
DM_20231018132216_004.gifDM_20231018132216_005.gifDM_20231018132216_006.gif
DM_20231018132216_007.gifDM_20231018132216_008.gifDM_20231018132216_009.gif
DM_20231018132216_010.gifDM_20231018132216_011.gifDM_20231018132216_012.gif

工具

Json 转换 Dart

JsonToDart

从开始使用 C# 利用 WPF,UWP,Silverlight 支持 Windows 桌面和网页端,到最后使用 Flutter 一波梭哈桌面网页,这也印证了 Flutter 的发展和更好。

工具在线地址: json_to_dart (gitee.io)

截屏2023-10-16 17.57.00.png

FlutterJsonBeanFactory

这是一个可以在编辑器中直接下载的插件,方便在开发工程中直接生成 dart 文件。你可以在编辑器插件里面搜索 FlutterJsonBeanFactory。

beantojson_factory.gif

json_dart

市面上的 json to dart 工具一般都没有提供自定义生成代码的功能,而它提供丰富的模板,并且支持自定义自己喜欢的代码模板。

在线地址: JSOND (bytex.space)

截屏2023-10-17 09.35.41.png

Assets 生成工具

assets_generator

激活命令: pub global activate assets_generator

执行命令: agen -h

  • 在单个项目中使用
    Image.asset(Assets.assets_images_xxx_jpg);
  • 在模块中使用
    Image.asset(
      Assets.assets_images_xxx_jpg,
      package: Assets.package,
    );

可用命令:

-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


-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

生成代码例子:

/// Generate by [asset_generator](https://github.com/fluttercandies/flutter_asset_generator) library.
/// PLEASE DO NOT EDIT MANUALLY.
class R {
  const R._();

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/assets/bluetoothon-fjdfj.png)
  static const String ASSETS_BLUETOOTHON_FJDFJ_PNG = 'assets/bluetoothon-fjdfj.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/assets/bluetoothon.png)
  static const String ASSETS_BLUETOOTHON_PNG = 'assets/bluetoothon.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/assets/camera.png)
  static const String ASSETS_CAMERA_PNG = 'assets/camera.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/images/audio.png)
  static const String IMAGES_AUDIO_PNG = 'images/audio.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/images/bluetoothoff.png)
  static const String IMAGES_BLUETOOTHOFF_PNG = 'images/bluetoothoff.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/images/child.png)
  static const String IMAGES_CHILD_PNG = 'images/child.png';

  /// ![preview](file:///Users/jinglongcai/code/dart/self/flutter_resource_generator/example/images/course.png)
  static const String IMAGES_COURSE_PNG = 'images/course.png';
}

代码规范

如果官方提供的 lint 已经不能满足你的需求,比如,阻止你的同事使用 Getx,咋办了?不怕,我们可以自定义 lint。

通过该工具,你可以快速创建属于自己项目的代码规范。

截屏2022-10-27 16.27.36.png

截屏2022-10-27 16.48.53.png

截屏2022-10-27 16.49.20.png

截屏2022-10-28 18.13.06.png

调试的面板组件

dependencies:
  fconsole: any

一个用于调试的面板组件,类似微信小程序的 v-console:在页面上创建一个可拖拽的悬浮窗,点击悬浮窗可启用 log 列表面板。

主要功能:

  • 显示悬浮窗,随时打开 Log 页面
  • 可自定义页面插入,项目专属调试页不用藏
  • 使用 FlowLog 可记录流程事件,网络 Log 清晰可见(支持 json 树状展示)
  • 分享完整 FlowLog 网络请求,一键反馈(甩锅)后端报错
flow-detail.PNGflow.PNG
log.PNG

坐标转换

dependencies:
  coordtransform: any

提供百度坐标系(BD-09)、火星坐标系(国测局坐标系、GCJ02)、WGS84 坐标系的相互转换。

    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 。

DM_20231018111251_001.GIF

DM_20231018111251_003.GIFDM_20231018111251_004.GIFDM_20231018111251_005.GIF
DM_20231018111251_006.GIFDM_20231018111251_007.GIFDM_20231018111251_008.GIF
DM_20231018111251_009.GIFDM_20231018111251_002.JPEGDM_20231018111251_010.GIF

GitHub 项目

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

掘金

Flutter 实现的掘金客户端,很好的练手项目。

1697896365205.jpg1697896365221.jpg

裸眼 3D 效果

DM_20231018153119_001.webpDM_20231018153119_002.webp

获取新肺炎实时动态App

非常完整的 Flutter 实战项目,大家可以跟着一起学起来。

home.pnglore.pngprotect1.pngprotect2.png
protect3.pngrumor1.pngrumor2.pngrumor3.png

网易云音乐

学习 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)。

鸿蒙开发在国内已经是一种趋势,不管从个人还是其他方面考虑,作为一个开发者,学习新的东西也是必要的。

大部分同学都是来至 FlutterCandies,在这里我们会分享鸿蒙最新的消息,以及 OpenHarmony-SIG/flutter_flutter (gitee.com) 进展。对于 Flutter 开发来说,我们也需要更多开发者来做鸿蒙端的原生插件的开发,欢迎大家的加入。在鸿蒙高级开发程序媛 拉面 的带领下,相信你能更快地从入门到退群。

群主是一名独立开发者,从事鸿蒙开发,在鸿蒙生态不够完善的情况下,OHOS 组织 已经做了不少事情。(想了一想,5 年前 Flutter 不也这样吗?)

OHOS 组织的愿景

  • 更多的开发者参与 OHOS 开源应用软件的共建
  • 扩大 OHOS 系统和应用软件的生态和影响力
  • OHOS 在未来的国产化技术覆盖领域中全面绽放

正如 OHOS 组织 的愿景一样, OpenHarmony 目前已经有 6000+ 共建者,期待你也成为其中一员。

image.png

我们的成员

q1

截屏2023-10-17 10.26.02.png

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

Alex Li

image.png

把你们的辣鸡代码都拿出来问,我帮你们分析辣鸡

Flutter GDE,同时也是 Flutter Contributor、Flutter 中文用户组的成员,维护 flutter.cn/dart.cn 参与了许多 Flutter 开源组织和 package 的开发。

我们都叫他 pr man, alex is everywhere。

截屏2023-10-19 10.18.37.png

豆豆

截屏2023-10-31 09.59.42.png

开源的 在 Flutter 上轻松创建倾斜视差悬停效果,支持倾斜、光照、阴影效果和陀螺仪传感器 能快速地创建倾斜视差悬停效果。

DM_20231031103349_001.gif

龙哥

image.png

在开发的海洋里溺亡

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

image.png

路哥

截屏2023-10-31 10.01.07.png

Flutter 和 Dart 中文社区的创建者,默默地为 Flutter 在中国的推广做出很多事情,为大家提供了 sdk 和 packages 中国镜像。

FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
PUB_HOSTED_URL=https://pub.flutter-io.cn

image.png

cr1992

image.png

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

CyJaySong

image.png

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

image.png

image.pngimage.png

yeoman

image.png

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

DM_20231018154623_001.gif

王叔

image.png

王叔不秃,出了多达 149 个的 Flutter 入门视频,喜欢看视频学习的朋友必须关注一下。

当然他开源的 图表 也是非常华丽好看的。

DM_20231018140129_001.gif

星星

image.png

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

DM_20231019105429_001.svg

DM_20231020141241_001.png

林洵锋

image.png

 Flutter Contributor ,多次为 Flutter SDK 和Flutter Engine 提供修复。

其开源的 flutter_scrollview_observer ,解决了官方列表在滚动方面的缺陷。

image.png

LXD312569496

image.png

入魔的冬瓜,自定义日历组件 的作者。

大宝

image.png

换行吧

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

马老师

image.png

你是在悟道吗? 写代码靠猜。

马老师,是的,就是那个会闪电鞭的。来群里,马老师教你写代码。

Image_1697782822609.jpg

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

screen.png

screenshot.png

Nayuta403

image.png

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

image.pngimage.png

shingohu

image.png

开源的 文件本地预览器 和 录音 ,是非常好用的原生插件。

张风捷特烈

image.png

海的彼岸有我未曾见证的风采

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

macos-2.webp

Wang Lu

image.png

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

小呆呆666

image.png

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

20220103160140.gif

xSILENCEx

image.png

他开发的画板系列(flutter_drawing_board 和 stack_board ),解决 Flutter 在画板涂鸦的空缺。

DM_20231018103426_001.gifDM_20231018103426_006.gif
DM_20231018141406_001.gifDM_20231018141406_003.gif

ysdy44

image.png

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

image.png

拉面

image.png

扶我起来,我还能撸代码

如果说大宝是群可爱,那么拉面就是群花。 拉面来了,大家快跑! 可不是说着玩的,因为她经常卡卡卡就清掉群里一堆不活跃的人,绝对是你们不敢得罪的女人。

鸿蒙高级开发程序媛,平时悄悄学鸿蒙,已经把 Flutter 中的 LikeButton 也迁移到了 HarmonyOS。

项目地址: yumi0629/HarmonyCandiesLike (github.com)

DM_20231021123843_001.gif

Loraine Lesch

image.png

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

法的空间

image.png

只听说他有 200 斤。

Flutter 中国

image.png

为什么要在这里提 Flutter 中国 呢?是因为有这样一群默默奉献的开发者。

感谢 Flutter 中国 为我们提供了稳定的开发环境,开发体验幸福感拉满。

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 全家桶,真香。