Flutter IconFont 使用

Iconfont 阿里巴巴矢量图标库

链接地址: 查看这里

图标下载

打开网站后下载自己喜欢的图标

导入项目文件

选择iconfont.css和iconfont.ttf导入Flutter项目中

设置pubspec.yaml

在pubsepc.yaml文件中加载iconfont.ttf

fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf

转换dart文件

我们可以使用工具将iconfont.css转换dart类iconfont.dart

链接地址: xwrite.gitee.io/blog/

转换完成后新建iconfont.dart存放在lib/Widgets/iconfont.dart

import 'package:flutter/widgets.dart';
class IconFont{
	static const String _family = 'iconfont';
	IconFont._();
	static const IconData icon_xundanchaxun = IconData(0xe661, fontFamily: _family);
	static const IconData icon_dingdanqueren = IconData(0xe667, fontFamily: _family);
	static const IconData icon_shangpinpingjia = IconData(0xe668, fontFamily: _family);
	static const IconData icon_yunshupingjia = IconData(0xe66b, fontFamily: _family);
	static const IconData icon_peijianqianshou = IconData(0xe679, fontFamily: _family);
	static const IconData icon_dingwei = IconData(0xe602, fontFamily: _family);
	static const IconData icon_qiaquan = IconData(0xe60a, fontFamily: _family);
	static const IconData icon_fenxiangyoujiang = IconData(0xe62c, fontFamily: _family);
	static const IconData icon_guanyuwomen = IconData(0xe62e, fontFamily: _family);
	static const IconData icon_kefu = IconData(0xe62f, fontFamily: _family);
	static const IconData icon_wodeyouhuiquan = IconData(0xe632, fontFamily: _family);
	static const IconData icon_zhanghaoshezhi = IconData(0xe634, fontFamily: _family);
	static const IconData icon_bangzhushuoming = IconData(0xe638, fontFamily: _family);
	static const IconData icon_weixinzhifu = IconData(0xe607, fontFamily: _family);
	static const IconData icon_zhifubao = IconData(0xe60b, fontFamily: _family);
	static const IconData icon_yue = IconData(0xe60c, fontFamily: _family);
	static const IconData icon_aixin = IconData(0xe60d, fontFamily: _family);
	static const IconData icon_aixinD = IconData(0xe60e, fontFamily: _family);
	static const IconData icon_ditu = IconData(0xe681, fontFamily: _family);
	static const IconData icon_QQ = IconData(0xe698, fontFamily: _family);
	static const IconData icon_weixin = IconData(0xe699, fontFamily: _family);
	static const IconData icon_shoucang = IconData(0xe613, fontFamily: _family);
	static const IconData icon_weibo = IconData(0xe6a4, fontFamily: _family);
	static const IconData icon_gengduo = IconData(0xe6a7, fontFamily: _family);
}

使用方法

接下来在页面main.dart中调用

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:fllutter_demo/Widgets/iconfont.dart';

main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'title',
      home: Scaffold(
        appBar: AppBar(
          title: Text('IconFont 使用')
        ),
        body: ListView(
          children:<Widget>[
            Icon(IconFont.icon_aixin),
            Icon(IconFont.icon_aixinD),
            Icon(IconFont.icon_bangzhushuoming),
          ]
        ) ,
      )
    );
  }
}

重新加载flutter就可以看到效果了