Flutter IconFont 使用

Iconfont 阿里巴巴矢量图标库

链接地址: https://www.iconfont.cn/

图标下载

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

​

​

导入项目文件

选择iconfont.ttf导入Flutter项目中

​

设置pubspec.yaml

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

fonts:
    - family: IconFont
      fonts:
        - asset: assets/fonts/iconfont.ttf
复制代码

转换dart文件

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

链接地址: https://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 icon11rijiyuelei1 = IconData(0xe62a, fontFamily: _family);
  static const IconData icon12testjiangli = IconData(0xe631, fontFamily: _family);
  static const IconData iconService_recommendation = IconData(0xe628, fontFamily: _family);
  static const IconData icon13wodeduihuanfuben2 = IconData(0xe61f, fontFamily: _family);
  static const IconData icon5miaojicidian = IconData(0xe620, fontFamily: _family);
  static const IconData icon13wodeduihuan = IconData(0xe621, fontFamily: _family);
  static const IconData icon1011 = IconData(0xe622, fontFamily: _family);
  static const IconData icon2yuyinceping = IconData(0xe623, fontFamily: _family);
  static const IconData icon3lejie = IconData(0xe624, fontFamily: _family);
  static const IconData icon13wodeduihuanfuben4 = IconData(0xe625, fontFamily: _family);
  static const IconData icon9qiandaoxiangqing = IconData(0xe626, fontFamily: _family);
  static const IconData icon13wodeduihuanfuben3 = IconData(0xe627, fontFamily: _family);
  static const IconData icon8zhuanshujiedianfuwu = IconData(0xe629, fontFamily: _family);
  static const IconData icon4zishiyingfenceng = IconData(0xe62b, fontFamily: _family);
  static const IconData icon6dianzishu = IconData(0xe62c, fontFamily: _family);
  static const IconData icon13wodeduihuanfuben = IconData(0xe62d, fontFamily: _family);
  static const IconData icon7danciduiduipeng = IconData(0xe62f, fontFamily: _family);
  static const IconData icon13wodeduihuanfuben5 = IconData(0xe630, 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.icon2yuyinceping),
             Icon(IconFont.icon3lejie),
             Icon(IconFont.icon4zishiyingfenceng),
          ]
        ) ,
      )
    );
  }
}

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

​