Flutter custom icon fonts

Gen icon fonts

Image for post

When you import your icons which exported from figma, may you face this error

Image for post

=> To solve this, install sketch -> New file -> drag & drop svg file -> Expand icon (left panel) -> Select all path => Select Layer menu -> Convert to Outlines

Image for post

Then select icon (left panel) -> Select “Make exportable” (right panel) -> Select “svg” -> Export

Image for post
  • Select tab “Generate Font F”
Image for post
  • Download font, extract and copy .ttf font file to project
Image for post

put font file to project

Image for post
  • Define font in flutter project pubspec.yaml
flutter:
uses-material-design: true
assets:
- assets/base/icons/
- assets/base/fonts/
- assets/app/icons/
- assets/app/fonts/fonts:
- family: icomoon
fonts:
- asset: assets/app/fonts/icomoon/icomoon.ttf
  • Use
Text('hello \ue901', style: normalTextStyle(13, color: Colors.white, fontFamily: 'icomoon'),),# or with IconDatastatic const IconData home = IconData(0xe901, fontFamily: 'icomoon', color: Colors.white);

Note: e901 is the code of icon

Image for post

Flutter custom chat emotion text

https://gist.github.com/nhancv/589832913f61f92479a1483a234cad1c#file-flutter_emotion_text-dart

Custom TextEditingController to style multi color icon font

https://gist.github.com/nhancv/d701bc03862cebed675e87f3b5203079#file-flutter_custom_texteditingcontroller-dart

Flutter Insert text to TextField

https://gist.github.com/nhancv/7181eb1706df726f184e043d6d9f5a31#file-flutter_insert_text-dart

@nhancv

Leave a Reply

Your email address will not be published.Required fields are marked *