写一款小众的 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:convert、dart:io（标准库的一部分）和 recase 包。所有的这些都是为 JSON 解码、文件 I/O 和将 “wi-day-sunny” 转换为 “wiDaySunny” 所准备的，以便于这些都可以在 flutter 代码中正常使用。

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

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

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