[Part 54 of the Flutter Questions Series] A detailed graphic tutorial on introducing Ali's vector icon library into Flutter

This is the [54th article of the Flutter problem series]. If you find it useful, please pay attention to the column.

Third-party icon libraries Many people are using the Alibaba vector icon library . This blog will talk about how to introduce the Alibaba vector icon library in Flutter.

Article directory

1: Download the project resources of Ali Vector Icon Library

first step

After entering the Ali vector icon library, search for the resource name you need in the search box, for example, I search here wifi, then select an icon and click the "Add to Library" button, as shown in the figure below,
insert image description here
click the icon button to view the library and enter the next page. An interface, select the project you want to add to and click OK, as shown below

second step

After clicking the OK button, it will automatically jump to the project you currently selected, and then select the 下载至本地button , as shown in the figure below. The
insert image description here
downloaded file is a compressed file. The decompressed rendering is as follows. The

file name iconfont.ttfis what we need to put in the Flutter project. of.

Two: Configure the iconfont.ttf file in the Flutter project

In the newly created folder assets/icons/of (you can name it arbitrarily), add the iconfont.ttffile to the icons folder, as shown in the figure below ,
insert image description here
then add the following code to the pubspec.yamlproject configuration file, and then execute the flutter pub getcommand .

flutter:

  fonts:
    - family: AllenSu
      fonts:
        - asset: assets/icons/iconfont.ttf

where familyis the name fontsof the icon library and is the path of the icon library.

Three: Use Ali vector icon library

The previous configuration is good, and it is relatively simple to use.

After copying the code of the icon, remove the symbol in front of the code &#, and then add a number to the top of the remaining code 0, which is the code of the current icon, corresponding IconDatato the attribute of type int in codePoint.

as shown in the code below

Icon(
  IconData(0xe638, fontFamily: "AllenSu"),
  color: Color(0xFF01A0E9),
),
Icon(
  IconData(0xe607, fontFamily: "AllenSu"),
  color: Color(0xFF0BBB08),
),
Icon(IconData(0xe76c, fontFamily: "AllenSu")),

The renderings are as follows
insert image description here
So far, the detailed graphic tutorial on introducing the Ali vector icon library into Flutter is introduced here.

Has your problem been resolved? Welcome to leave a message in the comment area.

Give someone a rose, and there is a lingering fragrance in your hand. If you think the article is good, I hope you can give a one-click three-link, thank you.

concluding remarks
Google's Flutter is getting more and more popular. As of January 7, 2022, the GitHub star has reached 134K. Flutter is resolutely a trend, so as a front-end developer, there is no reason not to learn as soon as possible.

Whether you are a Flutter novice or have already started, you might as well pay attention first. I will write the common components in Flutter (including source code analysis, component usage and precautions) and possible problems in the CSDN blog. I hope While learning by yourself, you can also help more people.