专栏首页01二进制写一款小众的 flutter 图标包

写一款小众的 flutter 图标包

本文翻译自 Writing a dumb icon flutter package,通过这篇文章你可以简单的了解到如何创建一个 flutter 图标包

开始 ?

你需要做的第一件事就是找到一个包含 “.ttf” 文件的开源图标库。那 “.ttf” 是什么文件?

TTF 文件是由苹果公司创建的一种字体文件格式,但可以同时运行在 Macintosh 和 Windows 平台上。它可以调整到任何大小并且不会失真,而且打印出来的效果和在屏幕上显示的看起来是一样的。TrueType 字体是 Mac OS X 和 Windows 上最常用的字体格式。我不知道其他类似的格式如 “.svg”, “.eot” 或者 “.woff” 是否都可以使用。

我在 GitHub 上发现了一个名为 weather-icons 开源 CSS 图标库。这是一个包含了 222 个精美天气主题的图标库

Flutter 包 ?

是时候来创建一个 flutter package 了。我们可以通过使用 Android Studio 这种老套而又略显笨拙的方法来创建一个 package,或者执行下面这个非常酷的命令。

flutter create --template=package your_awesome_package_name

砰! ?? 我们已经完成了一半。这些没什么好讲的。

下一步 ?

创建一个 assets/ 文件夹,并将 \.ttf 文件放在其中。接下来我们来配置 pubspec.yaml 文件。这样我们就可以在我们的 dart 文件中使用图标了。

终于迈出了伟大的一步!现在我们来关注一下 dart 代码。

难点 ?

lib/ 目录中创建一个 src/ 文件夹。并在其中创建一个名为 icon_data.dart 的文件。文件里面该写些什么?猜的不错! 我们需要在里面放入图标的数据。

我们编写了一个构造函数,它接受一个值 “codePoint”,这个值是图标的十六进制代码。我们很快就会看到一些关于它的东西。

到目前为止都很容易?那接下来是什么呢?

容易的一步 ?

我们首先找到一个合适的 JSON 文件,他包含所有十六进制代码和名称。找到它,或者使用 web 抓取一个。这部分不是我做的,是 Nikhil 做的。这是一个简单的 JS web 爬虫。我们利用它生成了一个类似的文件。

接下来我们需要在 lib/ 文件夹下创建一个 flutterweathericons.dart 来编写 dart 代码来解析这个 JSON 了。

我们需要使用到 dart:convertdart:io(标准库的一部分)和 recase 包。所有的这些都是为 JSON 解码、文件 I/O 和将 “wi-day-sunny” 转换为 “wiDaySunny” 所准备的,以便于这些都可以在 flutter 代码中正常使用。

你可以在这里找到 font_generation 的完整代码

和我想的一样。这将生成一个看起来像下面这样的文件。

发现这一点后,我和 Nikhil 都做了一堆字体图标包。

本文分享自微信公众号 - 01二进制(gh_d1999add1857),作者:雇个城管打天下

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Leetcode 题解——796/1078

    其实就是判断字符串中是否存在连续的first和second字串,我们将text按照空格split后,依次遍历,如果当前词为first,就看看他的下一个词是不是s...

    出其东门
  • Leetcode题解——22 括号生成

    首先我们需要明白的一点是,在此题中,动态规划的思想类似于数学归纳法,当知道所有 i<n 的情况时,我们可以通过某种算法算出="" i="n" 的情况。="" 本...

    出其东门
  • 科普系列——如何解释什么是 AJAX?

    学妹这学期新开了一门课《Script及AJAX开发技术》,然而临近学期末,她突然跑来问我:到底什么是AJAX ?相信很多人(尤其是前端)在写代码的时候经常会用到...

    出其东门
  • git add也能出错?

    小闫同学啊
  • win10 uwp 使用 Azure DevOps 自动构建

    通过 Azure DevOps 可以做到自动构建程序,覆盖计划、创建、编程、测试、部署、发布、托管、共享等各个环节,适用于大多数的语言、平台。 本文继续使用图床...

    林德熙
  • 使用这几款插件,能让你在GitHub看代码的效率翻倍

    想必在GitHub上看代码交友等已经成为各大猿友们的日常。想起小编,每每在GitHub上看代码时,总感觉没有直接在IDE上看的方便。但又不想看一个代码就连带gi...

    短短的路走走停停
  • Linux下双击.desktop文件闪退调试技巧分享

    最近编写了一个linux的项目。编译后,打开程序正常,但是在编写.desktop文件后,双击.desktop闪退。闪退最重要的思路就是,想看看闪退前弹...

    用户6794434
  • BigGAN被干了!DeepMind发布LOGAN:FID提升32%,华人一作领衔

    这只GAN初登场就击败了“史上最强”的BigGAN,成为新的state-of-the-art,还把FID和IS分别提高了32%和17%。

    量子位
  • 有关“GIS讲堂”升级与更改logo的通知

    我是人见人吐,花见花萎的“GIS讲堂”堂主——LZUGIS,为提升堂主形象与个人影响力,本堂主决定干点利国利民、福及后代的大事,这点大事包括:

    lzugis
  • 原创头条 | 如何让主机合规分析报告评分达到90分?

    “胖猴,某大型企业高级运维,马哥教育原创作者联盟成员,热爱分享Linux应用技术和原创知识,有30万字以上的原创内容。” 说明:本次文档是根据某厂的主机合规分...

    小小科

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动