Writing a dumb icon flutter package
When all the flutter developers are making real-life mobile applications that can be used by thousands in their daily life, there sits my dumb lazy ass in the room thinking, “what if there is yet another font package for flutter?” 🤔
It was a pretty normal day, 3 A.M in the morning, browsing the internet in search of good quality extra dark memes that I can share with a few people to give them the assurance that yes, I am not normal. Since GitHub is the new social media I stumbled across this “CSS” repository which had been starred by one of the best programmers in our college. I was like, “hmm, let’s dive deeper into this, see how these fonts are made in the first place”
After a few minutes of scanning through the files inside the source folder I remembered how once, I used an open-source icon package named EvaIcons. So, I Went to the GitHub repository of that package and started reading their code. Fairly simple structure, unlike the other complicated flutter packages. The question was, should I watch a flutter tutorial on how to make font/icons from CSS and port it to flutter? or should I just go with it and see if copying teeny tiny bits of code works?
Getting Started 🏁
The first thing you need to do is find an open-source repository of icons that has a “.ttf” file in it. What is “.ttf”?
A TTF file is a font file format created by Apple, but used on both Macintosh and Windows platforms. It can be resized to any size without losing quality and looks the same when printed as it does on the screen. The TrueType font is the most common font format used by both Mac OS X and Windows platforms. Well I don’t know if any other format like “.svg”, “.eot” or “woff” would work or not.
I found this open-source CSS icon package on GitHub named weather-icons. A collection of 222 beautifully crafted weather themed icons. Pretty Dope!
The Flutter Package 📦
Time to create the flutter package. We can use the old and dumb way of creating a package using the Android Studio method of selecting package instead of application or use this really cool command line technique.
flutter create --template=package your_awesome_package_nameBam! 💥💥 We are half way through now. Not much to cover.
Next Step 🤔
Create an assets/ folder and place the <font_name>.ttf file inside there. Time to configure the pubspec.yaml file so that we can use the icons inside our dart files.
Great work comrade! Now we can focus on the dart code.
The Hard Way 😓
Create a src/ folder inside the lib/ directory. Inside that create a simple file aptly named icon_data.dart. What goes in there? The Icon Data. Good guess!
We have a constructor which takes in a value ‘codePoint’ which is just the hexadecimal code for the icon. Will see something regarding it real soon.
This was not hard? Then what was?
The Easy Way 🤩
We first find an appropriate JSON file which has all the hex codes along with the names. Find it, or create one using web scraping. I did not do this part, it was done by Nikhil. A simple JS web scraper. We generated a file which looked something like this.
Time to write a dart code which can parse this JSON and create that infamous flutter_weather_icons.dart file inside the lib/ folder.
We will need the dart:convert, dart:io (part of the standard library) and the recase package. All of these are needed for JSON decoding, file I/O and converting ‘wi-day-sunny’ to ‘wiDaySunny’ that can be used normally inside the flutter code.
The compete code for font_generation can be found here.
Done I guess. This will generate a file which in all it’s beauty will look something like this.
Discovering this made both me and Nikhil make a bunch of font icon sets. Quite the marathon.
Find and test the fonts at the following links weather icons, brand icons, icomoon icons and feather icons 🎉
If you like our code do consider starring them 🌟 or maybe clap this article 👏 or maybe if you are an epic person then follow us on GitHub ❤️.
Good times, see you again!
