当前位置: 首页 > news >正文

Flutter-自定义图标

虽然Flutter有许多内置的icon图标,但是有些特殊功能的话,需要自定义图标或者需要在iconfont 阿里巴巴的图标库里找对应合适的图标。
第一步:在iconfont 阿里巴巴里搜索想要的图标并加入到购物车,点击下载代码后,会生成一些不同格式的字体文件,在Flutter中,我们使用ttf格式即可。
在这里插入图片描述

第二步:下载下来解压后的文件,在项目的根目录下新建一个fonts文件夹,把解压文件里的.json.ttf 文件copy到新建的fonts文件夹中。其中.json文件其实是用不到的,只是为了能更便捷的看到每个字体对应的unicode,后面配置步骤会用到

在这里插入图片描述
在这里插入图片描述

第三步:在项目的pubspec.yaml文件中找到fonts配置,引入自定义文件,这里首个fonts注意一个空格对齐,也可配置多个字体,替换不同.ttf文件即可

  fonts:- family: Schyler  #指定一个字体名 根据自己的需求定义fonts:- asset: fonts/iconfont.ttf

在这里插入图片描述

第四步:在lib目录下新建一个自定义字体文件,我这里的命名是fonts

import 'package:flutter/material.dart';
///自定义一个类 Font
class Font {static const IconData gouwuche = IconData(0x3475,/// 0x+unicode  0x表示是十六进制fontFamily: "Schyler",/// Schyler 就是在`pubspec.yaml`文件里配置自定义的字体名matchTextDirection: true);static const IconData weixin = IconData(0xe856,fontFamily: "Schyler",matchTextDirection: true);
}

在这里插入图片描述
第五步:在页面文件中使用

引入字体文件:

import './fonts.dart';

使用:

Icon(Font.gouwuche)

在这里插入图片描述
定义多个字体文件,步骤都是一样的,只不过是把解压文件里的.json.ttf 文件,与已引入的字体文件名做区分,在fonts文件里,重复第四步步骤进行每个icon名字配置。pubspec.yaml文件里的配置如下:

  fonts:- family: Schyler  #指定一个字体名 根据自己的需求定义fonts:- asset: fonts/iconfont.ttf- family: Trajan Pro #第二个自定义字体名fonts:- asset: fonts/TrajanPro.ttf

在这里插入图片描述

http://www.lryc.cn/news/35690.html

相关文章:

  • 教学场景应用视频试看预览功能
  • 关于进程与进程调度
  • Redis常用命令及数据类型参数
  • (七十四)大白话深入探索多表关联的SQL语句到底是如何执行的?(2)
  • 销售使用CRM系统集成Excel的五个技巧
  • 过来人告诉你:Java学到什么程度可以找工作?
  • 【Linux】目录结构
  • 37.Java进阶之实现动态编译
  • 【Python百日进阶-Web开发-Vue3】Day549 - Vue3 商城后台 09:Veux4-01基本概念
  • GitLab 解析:为什么市场正在转向一体化 DevSecOps 平台?(附Forrester完整报告下载)
  • ThreadLocal的内部结构和源码探究
  • Linux文件系统(下)
  • 合并链表相关的练习
  • FFmpeg介绍及入门知识
  • ASA材料3D打印服务 抗紫外线材料3D打印服务 抗紫外线模型制作-CASAIM中科院广州电子
  • MySQL workbench数据表和数据结构
  • 网络与信息安全岗位介绍—售后工程师
  • Nowcoder .链表分割
  • 猿创征文 | re:Invent 朝圣之路:“云“行业风向标
  • mysql的distinct和group by的区别
  • Web前端:前端开发人员的职责有哪些?
  • BatchNorm1d的复现以及对参数num_features的理解
  • 【专项训练】动态规划-1
  • 软测面试了一个00后,绝对能称为是内卷届的天花板
  • 赢球票问题
  • Go语言基础之Error接口
  • Sqoop详解
  • C++ 之指针
  • 数据结构与算法---JS与栈
  • HDLBits: 在线学习 SystemVerilog(二十三)-Problem 158-162(找BUG)