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

前言

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

我很惊讶,但很快冷静了下来,回答道:"平时偶尔玩一下 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 ,接下来将为大家一一介绍。

图片

图片扩展

yaml 复制代码
dependencies:
  extended_image: any

主要功能

  • 缓存网络图片

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

  • 拖拽缩放图片

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

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

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

  • 设置圆角,边框

  • 支持进度显示

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

图片编辑

yaml 复制代码
dependencies:
  image_editor: any

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

主要功能

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

图片选择器

yaml 复制代码
dependencies:
  wechat_assets_picker: any

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

主要功能

  • ♿ 完整的无障碍支持,包括 TalkBackVoiceOver

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

  • 🎏 完全可自定义的基于 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。 在 AndroidiOSmacOS 上可用。

主要功能:

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

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

Search results for dependency:photo_manager (pub.dev)

相机选择器

yaml 复制代码
dependencies:
  wechat_camera_picker: any

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

主要功能:

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

文本和输入框

文本扩展

yaml 复制代码
dependencies:
  extended_text: any

主要功能

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

输入框扩展

yaml 复制代码
dependencies:
  extended_text_field: any

主要功能

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

列表

监听滚动视图的组件

yaml 复制代码
dependencies:
  scrollview_observer: any

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

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

支持以下组件

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

下拉刷新

yaml 复制代码
dependencies:
  pull_to_refresh_notification: any

主要功能

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

列表加载更多

yaml 复制代码
dependencies:
  loading_more_list: any

主要功能

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

瀑布流

yaml 复制代码
dependencies:
  waterfall_flow: any

主要功能

  • 快速创建瀑布流布局

锁定行列的表格

yaml 复制代码
dependencies:
  flex_grid: any

主要功能

  • 水平垂直滚动
  • 锁定行列
  • TabBarViewPageView 中更佳的体验
  • 高性能

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

这个插件是用于扫描二维码的插件,支持 AndroidiOS 平台,它基于 GoogleML 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
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 UILock 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 颜色选择器,包括 RGBHSV、颜色轮、调色板色调、调色板饱和度、调色板值和样本等选项。

自定义日历组件

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

  • 全局使用

重载 PageTransitionsThemebuilders

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 相机效果

路由

法法注解路由

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

这是一个可以在编辑器中直接下载的插件,方便在开发工程中直接生成 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._();

  /// ![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

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

调试的面板组件

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_flutterFlutter 版微信,目前已实现即时通讯基本功能,支持 AndroidiOS

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) 讨论的非常激烈。

Fair58 提供的一整套 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+ 共建者,期待你也成为其中一员。

我们的成员

q1

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

Alex Li

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

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

我们都叫他 pr manalex is everywhere

龙哥

在开发的海洋里溺亡

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

cr1992

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

CyJaySong

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

yeoman

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

王叔

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

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

星星

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

林洵锋

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

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

LXD312569496

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

大宝

换行吧

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

马老师

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

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

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

Nayuta403

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

shingohu

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

张风捷特烈

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

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

Wang Lu

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

小呆呆666

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

xSILENCEx

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

ysdy44

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

拉面

扶我起来,我还能撸代码

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

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

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

Loraine Lesch

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

法的空间

只听说他有 200 斤。

Flutter 中国

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

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

ini 复制代码
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
PUB_HOSTED_URL=https://pub.flutter-io.cn

每一次 Flutter 的发布,都是他们最忙碌的时候,每次的变更,新增,他们要通过一次次的翻译以及校对,确保大家看到的中文文档准确无误。这些头像里面有很多都是老面孔了,真的让人很敬佩。

掘金

掘金是一个真的很不错的国内技术平台社区,让不认识的开发者都聚在一起。这里有很多活动可以参加,也有很多高质量的掘金小册子可以学习。不管你是喜欢分享的,还是喜欢学习的,你都能找到自己想要的。

它同样也是一个温情的平台,每天签到,获得符石就可以参加 稀土掘金点石成金公益计划 ,无意间能帮助到你不认识的人,也是很开心的事情。

每天不自觉的登录,看看文章,逛逛沸点,就像刷抖音朋友圈一样,已经成为习惯。感谢掘金,给我们提供了一个帮助开发者成长的社区。

结语

Flutter1.12.13 3.13.8, FlutterCandies5 岁了,社区五年的成长,离不开每一位社区成员的默默付出,感谢你们一直以来的陪伴和贡献。

绝大多数的开源伙伴,都是出于对技术的热情和深切的兴趣,利用自己有限的业余时间,默默投入到开源项目中。这种无私的奉献精神着实不容易,它贯穿于整个开源社区。

开源并不仅仅是一种兴趣,更是一项责任。每一位开源伙伴都愿意为了技术的不断进步和社区的繁荣,坚守着这份责任。坚持下来,真的非常不容易。在这个过程中,我们需要不断克服技术挑战,解决问题,撰写文档,与其他社区成员协同合作,付出了大量的心血和时间。

虽然或许会有一天,可能因为某些原因,我们终将离开,但至少我们可以骄傲地说,我们曾经在这里留下过自己的足迹,曾经为开源社区的繁荣尽心尽力。我们做过,我们为开源事业贡献过自己的一份力量,这是一种无法被取代的成就。

如果你是喜欢分享的,请加入我们;如果你需要分享的,也请加入我们。

Flutter,爱糖果,欢迎加入 FlutterCandies,一起生产可爱的 Flutter 小糖果。QQ群: 181398081

最最后放上 FlutterCandies 全家桶,真香。

相关推荐
Dingdangr4 小时前
Android中的Intent的作用
android
技术无疆4 小时前
快速开发与维护:探索 AndroidAnnotations
android·java·android studio·android-studio·androidx·代码注入
GEEKVIP4 小时前
Android 恢复挑战和解决方案:如何从 Android 设备恢复删除的文件
android·笔记·安全·macos·智能手机·电脑·笔记本电脑
AiFlutter9 小时前
Flutter之Package教程
flutter
Jouzzy11 小时前
【Android安全】Ubuntu 16.04安装GDB和GEF
android·ubuntu·gdb
极客先躯11 小时前
java和kotlin 可以同时运行吗
android·java·开发语言·kotlin·同时运行
Magnetic_h12 小时前
【iOS】单例模式
笔记·学习·ui·ios·单例模式·objective-c
Mingyueyixi13 小时前
Flutter Spacer引发的The ParentDataWidget Expanded(flex: 1) 惨案
前端·flutter
Good_tea_h13 小时前
Android中的单例模式
android·单例模式
归辞...14 小时前
「iOS」——单例模式
ios·单例模式·cocoa