【譯】寫一款小衆的 flutter 圖標包

• 原文地址：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 文件中使用圖標了。

終於邁出了偉大的一步！如今咱們來關注一下 dart 代碼。

難點 😓

在 lib/ 目錄中建立一個 src/ 文件夾。並在其中建立一個名爲 icon_data.dart 的文件。文件裏面該寫些什麼？猜的不錯！ 咱們須要在裏面放入圖標的數據。

咱們編寫了一個構造函數，它接受一個值 「codePoint」，這個值是圖標的十六進制代碼。咱們很快就會看到一些關於它的東西。

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

容易的一步 🤩

咱們首先找到一個合適的 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 代碼中正常使用。

你能夠在這裏找到 font_generation 的完整代碼

和我想的同樣。這將生成一個看起來像下面這樣的文件。

發現這一點後，我和 Nikhil 都作了一堆字體圖標包。

在如下連接找到並測試咱們的字體 weather icons, brand icons, icomoon icons 和 feather icons 🎉

若是你喜歡咱們的代碼和文章，能夠點贊🌟、收藏👏，或者在 GitHub 上關注咱們。

咱們下次再見！Flutter Community (@FlutterComm) | Twitter****The latest Tweets from Flutter Community (@FlutterComm). Follow to get notifications of new articles and packages from…**www.twitter.com

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。