flutter 之自定义 icon

最新推荐文章于 2024-04-23 09:58:36 发布

艾米家的猫儿（傻钢）

最新推荐文章于 2024-04-23 09:58:36 发布

阅读量781

点赞数

分类专栏： flutter 文章标签： flutter android

本文链接：https://blog.csdn.net/qq_731335498/article/details/128818222

版权

flutter 专栏收录该内容

18 篇文章 4 订阅

订阅专栏

1.去 iconfont.cn->把要使用的图片放入购物车->下载代码

在这里插入图片描述

2.解压文件->复制下箭头的两个文件；
在这里插入图片描述
3.去 flutter 项目中创建一个新的文件夹fonts 将这两个文件存入

4.去pubspec.yaml 搜索fonts看到应该怎么配置文件、跟配置图片路径一样的；
在这里插入图片描述

  fonts:
    - family: WechatPay # 自定义family
      fonts:
        - asset: fonts/iconfont.ttf #引入文件

5.在lib 文件夹下创建一个字体文件 font.dart ；

import 'package:flutter/material.dart';

class WxchatPay {
  static const IconData weixin = IconData(
    0xf0106, // 对应的 code 的值
    fontFamily: 'WechatPay', // 名称
    matchTextDirection: true,
  );
  static const IconData zhifubao = IconData(
    0xe6b8, // 对应的 code 的值
    fontFamily: 'WechatPay', // 名称
    matchTextDirection: true,
  );
  static const IconData weixin1 = IconData(
    0xe619, // 对应的 code 的值
    fontFamily: 'WechatPay', // 名称
    matchTextDirection: true,
  );
  static const IconData zhifubao1 = IconData(
    0xe629, // 对应的 code 的值
    fontFamily: 'WechatPay', // 名称
    matchTextDirection: true,
  );
}

在这里插入图片描述
6.在main.dart 中引入使用自定义的 font.dart

import 'fonts.dart';

Icon(WxchatPay.weixin, size: 40, color: Colors.green),
Icon(WxchatPay.weixin1, size: 40, color: Colors.green),
Icon(WxchatPay.zhifubao, size: 40, color: Colors.blue),
Icon(WxchatPay.zhifubao1, size: 40, color: Colors.blue),