Moment For Technology

Use custom ICONS in Flutter

Posted on Nov. 27, 2023, 7:23 p.m. by 彭家豪
Category: The front end Tag: flutter

1. Introduction

Flutter, as one of the most popular technologies, has attracted the attention of many technology enthusiasts due to its excellent performance and advantages of smoothing multiple differences. Some big companies, such as Xianyu, Meituan and Tencent, have already put Flutter into production. Although the ecosystem of Flutter is not yet fully mature, thanks to the support of Google, it is growing fast enough that we can expect the need for Flutter developers to grow in the future.

Whether it's for technology experimentation or future trends, 9102 years on, as a front-end developer, there seems to be no reason not to try it. It is with this mentality that the author also began to learn Flutter and built a warehouse for practice. All subsequent codes will be hosted on it. Welcome Star to learn Flutter together. This is my series on Flutter:

We all know that Flutter has a set of Material Design-style ICONS built into it, but this is usually not enough for a mature App. To do this, we need to introduce a custom Icon in our project.

This article will use Ant Design icon library as an example to show how to introduce custom ICONS into Flutter.

2. Preparation: font files

To introduce a custom icon, first of all we have to prepare the icon font file (.ttf suffix). For large companies, look for visual students to cut it. But if it is a part-time project or do not have resources, we can pick their favorite ICONS on Alibaba vector icon library.

Using Ant Design's official icon library (there are 600 ICONS) as an example, we added the icon font file to the project by doing the following:

Add shopping cart - Click shopping cart - download code - unzip - Copy to project (rename)

3. Declare custom fonts

It is not enough to just copy the font file into the project. We need to declare that a new font is available to Flutter. Open the pubspec.yaml file at the root of your project and find the fonts section:

To add custom fonts to your application, add a fonts section here, in this "flutter" section. Each entry in this list should have a "family" key with the font family name, and a "fonts" key with a list giving the asset and other descriptors for the font.

A comment is a declaration that lets us add a custom font at the bottom of the paragraph. Combined with its commented out example and the current project directory, we can configure it as follows:

├── Android │ ├── all exercises │ ├── antdicons.ttF ├── antiexercises ├ ─ ─ ios │ └ ─ ─ Flutter ├ ─ ─ lib │ └ ─ ─. Main dart ├ ─ ─ pubspec. Lock └ ─ ─ pubspec. Yaml fonts font statement: font-family: AntdIcons fonts: - asset: assets/fonts/AntdIcons.ttfCopy the code

Note: After the configuration, execute the flutter Packages get command and rebuild project. Otherwise, the font file cannot be used.

4. Write custom IconData

So far, we can use the icon we just downloaded, as shown in the following code:

  IconData(0xe77d, fontFamily: 'AntdIcons'),
  size: 20,
Copy the code

The fontFamily value 'AntdIcons' is the new font we just declared, but where does the 0xe77d value come from in the code? Open the demo_index. HTML file in the folder you downloaded and unzipped. Open it in your browser and you will see the following screen:

Under the Unicode Tab, we can see that it nicely gives the Type and Unicode code relation of all ICONS. So, in theory, we can just copy the Unicode code of any icon we want to use into our code.

But it certainly wasn't very friendly. First, we look up the relational table every time we use an Icon; Second, are you sure what icon this number will correspond to the next time you see it in code? So, we need a more elegant way to manage custom ICONS.

We can create a custom icon class:

class AntdIcons {
  static const IconData checkCircle = IconData(0xe77d, fontFamily: 'AntdIcons');
  static const IconData CI = IconData(0xe77e, fontFamily: 'AntdIcons');
  static const IconData Dollar = IconData(0xe77f, fontFamily: 'AntdIcons'); . }Copy the code

Then the method becomes:

  size: 20,
Copy the code

The above code is exactly the same as using the Unicode code directly above. But to use all the ICONS, we need to enrich the AntdIcons class. To do this, write a small script that runs in the console of the demo_index.html browser window to get the code that defines IconData:

function camelCase(str) {
  return str.replace(/[ -]+(\w)/g, (match, char) = char.toUpperCase());

function makeCode({name, code}) {
  return `static const IconData ${camelCase(name)} = IconData(0${code.substr(2.5)}, fontFamily: 'antd-icons'); \n`;

  .from(document.querySelectorAll('.unicode .dib'))
  .map(element=  {
    return {
      name: element.querySelector('.name').innerText,
      code: element.querySelector('.code-name').innerText
Copy the code

PS: the output results may be due to the icon author's own name is not standard and lead to individual small errors, manual modification can be, the complete file can see here.

Next, it's time for fun

5. To summarize

This article explains how to incorporate custom ICONS into Flutter using an actual Ant Design icon example. Hopefully this will help you

All the code of this article is hosted here, you can also follow my Blog, welcome to learn ~

About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.