flutter学习之在Flutter中使用iconfont

Flutter图标库中文网址

• https://fluttericon.cn/

在Flutter 中使用iconfont 流程

• 在iconfont 中下载图片代码
  

• 将iconfont 代码放在fonts 文件夹下，没有的话，需要新建
  

• 在pubspec.yaml 配置字体库信息
  

• 在./lib/ 下新建fonts.dart,编写自定义图标类，如下所示

import 'package:flutter/material.dart';

class myIcon{
 // good 为图标名称
  static const IconData good = IconData(
    0xec7f,// 下载的字体代码中json 文件中的编号
    fontFamily: 'zyhTestFamily', // 对应pubspec.yaml 中的配置信息
    matchTextDirection:true,
  );
}

使用

import './fonts.dart'; // 引入字体对象文件
class MyListView extends StatelessWidget {
  const MyListView({super.key});

  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(height: 20,),
        // Icons 内置图标库，也可以使用阿里巴巴iconfont
        Icon(Icons.home,size: 40,color: Colors.amber,),
        SizedBox(height: 20,),
        Icon(Icons.home_max_outlined
        ,size: 40,color: Colors.amber,),
        SizedBox(height: 20,),
        // 自定义组件使用good
        Icon(myIcon.good,size: 40,color: Colors.amber,)
      ],
    );
  }
}