Skip to main content

TIL: Flutter Series - Custom Icons

Everyone thinks of changing the world, but no one thinks of changing himself.
— Leo Tolstoy.

Hi guys, we have custom free icons for everyone! Just joking I’m not the one giving.

Joking aside, as I began learning Flutter to develop new apps. I began to wonder, how can I beautify it to almost match the wire frame I’m copying.

There are several things to consider, getting exact dimensions and well crafted image and icons. For today’s TIL (Today I Learned), we will get deeper on how to add custom icons to flutter development environment as well use it in app.

To icon or not to icon?

Manually creating icons from scratch, seems to be a bit daunting. But do not worry as there are tools to create this automatically already.

Meet fluttericon!
Just like a father introducing his son to everyone.

Anyways, to create your first set of icons follow the steps below.

  1. First is go to FlutterIcon site.

  2. Create your own set of icons from the different sources or upload a custom one.

  3. You make a suitable name like (e.g. SuperSimpleLineIcons) then download your own custom font.

  4. Extract the downloaded files.

  5. Move the font folder in your flutter project, better if you create an assets folder.

  6. Copy the generated dart file to your flutter lib directory.

  7. View the contents of the generated dart file. You’ll see the header part’s instruction and apply it to your pubspec.yaml file.

  8. Import the generated dart to your flutter source on where you want to include the custom icons.

  9. To use the icons inside your flutter project, call it like this Icon(CustomIcons.copyright).

Also check this GitHub repository to know more info and get help PolyIcon.

Conclusion

As for developers tooling, one of the several factors a developer may consider before diving in to a new language. And flutter, has many of those tooling compared to react native. Currently, dart has native first class auto completion and analyzer integrated to VS tools and several other editors.

Its up to you now to decide which programming language you would choose. Be it react native or flutter in developing modern production grade app. See you on the next flutter series.

Hope you guys, enjoyed this article! 🧡❤

Popular posts from this blog

TIL: Disable mDNS and SSDP Discovery in Google Chrome

We're born alone, we live alone, we die alone. Only through our love and friendship can we create the illusion for the moment that we're not alone. — Orson Welles.

TIL: Gimp Automating Image Processing with Python Fu

What a large volume of adventures may be grasped within the span of his little life by him who interests his heart in everything. — Laurence Sterne.

TOP: Three DNS Providers That Provides Good Service in SEA (Southeast Asia)

If you give a hacker a new toy, the first thing he'll do is take it apart to figure out how it works. — Jamie Zawinski.