Flutter = spicy soup

preface

For front-end engineers, using IconFont in their projects is all too common. In Flutter, there is a built-in Icon component. All Icons from MaterialDesign Icons are numerous and sufficient.

This article will teach you how to use a custom IconFont in the Flutter project.

Declare custom fonts

Go to www.iconfont.cn/ and pick up the icon and add it to your shopping cart (don’t panic, it’s free).

Then select Add to project

Enter the project from my project and select download to local

Decompress the downloaded zip file and copy the iconfont. TTF file into your flutter project, for example, “/assets/fonts/”

To use custom fonts in Flutter, we need to add the following to the pubspec.yaml file

fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf
Copy the code

Please pay attention to the structure, do not write wrong. In general, there are related annotations in pubspec.yaml, which are written in the same structure as the annotations.

Using IconData

We are now ready to use the custom iconfont as follows

Icon(
  IconData(0xe7b4.fontFamily: 'IconFont'),
  size: 20.color: Colors.black
)
Copy the code

The fontFamily value ‘IconFont’ is the new font we just declared in pubspec.yaml, but what does the 0xe7b4 in the code refer to? Go back to the folder where you downloaded the unzipped zip package and double-click the demo_index.html file to open it in your browser, you will see the following screen

Each icon is marked with its Unicode code, so we can simply copy the unicode code for which icon we want to use

Custom Icon class

But if we have multiple ICONS, using Unicode is very unfriendly… You don’t know what the code is when you read it! So we need to make this thing a little more elegant. All of them are centrally managed in a Dart class and used by the name of the icon.

class IconFontIcons {
    static const IconData iconRotateRight = IconData(0xe9b3.fontFamily:'IconFont');
    static const IconData iconHeartFill = IconData(0xe8b3.fontFamily:'IconFont');
    static const IconData iconMinusSquare = IconData(0xe7b3.fontFamily:'IconFont'); .Copy the code

When you use it again, it’s pretty straightforward

Icon(IconFontIcons.iconRotateRight)
Copy the code

conclusion

Using iconfont in Flutter is extremely easy. Hope this article has helped you…

By the way, tools for automatically generating iconFont projects are also available for you in the Dart class

Keep reading

One-click generation of IconFont class

Method of use

1. Copy the following code and add it to your favorites

javascript:function download(filename, text) {  var element = document.createElement('a');  element.setAttribute('href'.'data:text/plain; charset=utf-8,' + encodeURIComponent(text));  element.setAttribute('download', filename);  element.style.display = 'none';  document.body.appendChild(element);  element.click();  document.body.removeChild(element); }function toHump(name) {name = name.replace(/\s+/g."-");    return name.replace(/\-(\w)/g.function(all, letter){        returnletter.toUpperCase(); }); }function getFlutterClass(){var str = "import 'package:flutter/widgets.dart'; \r\n\r\n"; str +="class IconFontIcons {\r\n";var arr = document.querySelectorAll(".icon-item");for (var i = arr.length - 1; i >= 0; i--) {var item = arr[i];var item_name = toHump(item.querySelectorAll(".icon-code") [1].textContent);var item_code = item.querySelectorAll(".icon-code") [0].textContent.replace(/\&\#/g."0"); item_code = item_code.replace(/ \; /g.""); str +=" static const IconData "+item_name+" = IconData("+item_code+",fontFamily:'IconFontIcons');"; str +="\r\n"; }str +="}";returnstr; } download("IconFontIcons.dart",getFlutterClass());
Copy the code

Chrome: Right-click in the Favorites bar and choose Add Web page

Change the name to “Generate IconFont. Dart”, copy the code above and paste it in the url

2, open thewww.iconfont.cn/

Enter the project where you want to generate the IconFont class

4. Click the url added in the favorites in step 1

Dart class is automatically generated and downloaded

  • Chrome may suspect that its.dart file could be a computer hazard. Keep that in mind

Pay attention to the big handsome doing full stack

Thank you for your encouragement and support 🌹🌹🌹

  • From 0 to 1 teach you to write a JS multilingual library 17 likes
  • With 20% power, I rushed to write this JS code that every digger would use 8 likes
  • I worked on animation all night to give you a better understanding of Vue3’s Composition Api 775 likes

  • This is our team’s open source project Element3 1.7K Star
  • A front-end component library that supports VUE3