【譯】寫一款小眾的 flutter 圖示包

僱個城管打天下發表於2019-10-21

原文地址：Writing a dumb icon flutter package

原文作者：Rishi Banerjee

譯文出自：掘金翻譯計劃

本文永久連結：github.com/xitu/gold-m…

譯者：YueYong

校對者：Mononoke

寫一款小眾的 flutter 圖示包

當所有的 flutter 開發人員都在製作可以在日常生活中被成千上萬人使用的移動應用程式時，我呆坐在房間裡，不禁陷入沉思，為何不做一款 flutter 的圖示包呢 ?

和平常一樣，凌晨 3 點。我在網上搜尋高質量的黑色主題包，想分享給一部分人，讓他們覺得“嗯，你真厲害”。鑑於 GitHub 是新的社交媒體，我偶然發現了一個 “CSS” 庫，我們學校最棒的一個程式設計師都曾給它點過贊（starred）。心想 “不妨深入地研究一下，看看這些字型是如何製作的。”

在瀏覽了幾分鐘資原始檔夾中的檔案後，我回想起有一次，我使用了一個名為 EvaIcons 的開源圖示包。我訪問了該包的 GitHub 地址，並開始閱讀它的原始碼。和其他複雜的 flutter 包不同的是，這個 package 的結構相當簡單。問題是，我應該看一個關於如何從 CSS 建立字型/圖示並將其移植到 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/ 資料夾，並將 <font_name>.ttf 檔案放在其中。接下來我們來配置 pubspec.yaml 檔案。這樣我們就可以在我們的 dart 檔案中使用圖示了。

Add the fonts like this, replacing WeatherIcons with MyAwesomeIcons or whatever suits :)

終於邁出了偉大的一步！現在我們來關注一下 dart 程式碼。

難點 ?

在 lib/ 目錄中建立一個 src/ 資料夾。並在其中建立一個名為 icon_data.dart 的檔案。檔案裡面該寫些什麼？猜的不錯！ 我們需要在裡面放入圖示的資料。

Your custom IconData class extending the one which is available in the widgets library.

我們編寫了一個建構函式，它接受一個值 “codePoint”，這個值是圖示的十六進位制程式碼。我們很快就會看到一些關於它的東西。

到目前為止都很容易？那接下來是什麼呢？

Huff! We can’t write this all by ourselves. 222 codePoints!!

容易的一步 ?

我們首先找到一個合適的 JSON 檔案，他包含所有十六進位制程式碼和名稱。找到它，或者使用 web 抓取一個。這部分不是我做的，是 Nikhil 做的。這是一個簡單的 JS web 爬蟲。我們利用它生成了一個類似的檔案。

接下來我們需要在 lib/ 資料夾下建立一個 flutter_weather_icons.dart 來編寫 dart 程式碼來解析這個 JSON 了。

我們需要使用到 dart:convert、dart:io（標準庫的一部分）和 recase 包。所有的這些都是為 JSON 解碼、檔案 I/O 和將 “wi-day-sunny” 轉換為 “wiDaySunny” 所準備的，以便於這些都可以在 flutter 程式碼中正常使用。