如何将多个自定义图标添加到Flutter

8aqjt8rx 于 2023-06-24 发布在 Flutter

关注(0)|答案(2)|浏览(156)

这是我第一次使用flutter，我开始添加自定义图标。我通过将svg文件上传到https://www.fluttericon.com/并将其转换为.ttf文件来做到这一点。
现在我有三个自定义图标，所以我做了3个.ttf-文件，我试着如下实现它们：
pubspec.yaml：

flutter:
  generate: true

  fonts:

    - family:  BikeIcon
      fonts:
        - asset: ./assets/fonts/icons/Bike.ttf

    - family:  LocationIcon
      fonts:
        - asset: ./assets/fonts/icons/Location.ttf

custom_icons.dart：

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const String? _kFontPkg = null;

  static const IconData bike_icon =
      IconData(0xe800, fontFamily: 'BikeIcon', fontPackage: _kFontPkg);

  static const IconData location_icon =
      IconData(0xe800, fontFamily: 'LocationIcon', fontPackage: _kFontPkg);
}

第一个图标bike_icon工作得很完美。第二个没有显示，所以它只是空的，即使.ttf是有效的，我检查了它…
我是错过了什么还是误解了这是如何工作的？

flutter

来源：https://stackoverflow.com/questions/76513188/how-to-add-muliple-custom-icons-to-flutter

2条答案

按热度按时间

yqyhoc1h1#

location_icon的IconData与bike_icon具有相同的代码点（0xe800

class CustomIcons {
      CustomIcons._();

      static const String? _kFontPkg = null;

      static const IconData bike_icon =
          IconData(0xe800, fontFamily: 'BikeIcon', fontPackage: _kFontPkg);

      static const IconData location_icon =
          IconData(0xe801, fontFamily: 'LocationIcon', fontPackage: _kFontPkg);
    }

在本例中，我将0xe801指定为location_icon的代码点。
Flutter：在图标字体中存储此图标的Unicode代码点。

final int codePoint;

请记住，要验证您选择的代码点是否已经在SVG生成的字体文件中使用，否则请通过修改SVG文件来更改它们。

赞(0）回复(0）举报 2023-06-24

igetnqfo2#

我发现了问题：
正如前面对这个问题的回答中所说的，问题出在代码点上。当从https://www.fluttericon.com/生成.ttf文件时，有一个dart文件，其中显示了正确的实现，包括codePoint。我所要做的就是复制每个图标的代码点，并将其添加到我的custom_icons.dart文件中
谢谢你的帮助：）

赞(0）回复(0）举报 2023-06-24

我来回答

如何将多个自定义图标添加到Flutter

2条答案

相关问题

热门标签

最新问答