Flutter组件-Icon-IconData-字体图标

防采集标记：亢少军老师的课程和资料

字体图标效果图

步骤1

下载react-native-vector-icons
找到dist目录下的FontAwesome.ttf文件把它copy到工程的fonts目录下。

步骤2

在pubspec.yaml里添加字体配置

fonts:
    - family: FontAwesome
      fonts:
        - asset: fonts/FontAwesome.ttf

步骤3

打开FontAwesome.json文件 找到图标对应的code. 添加IconData代码如下：

IconData(
            //code
              61454,
              //字体
              fontFamily: 'FontAwesome'),

IconData第一个参数是字体code, 第二个参数是字体名称. 这样一个字体图标就加好了.

示例完整代码

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'IconData字体图标',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('IconData字体图标'),
        ),
        body: DemoPage(),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  @override
  DemoPageState createState() => DemoPageState();
}

class DemoPageState extends State<DemoPage> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(children: <Widget>[
        Icon(
          IconData(
              //code
              0xe8ad,
              //字体
              fontFamily: 'MaterialIcons'),
          color: Colors.redAccent,
        ),
        Icon(
          IconData(
            //code
              61447,
              //字体
              fontFamily: 'FontAwesome'),
          color: Colors.green,
          size: 68.0,
        ),

        Icon(
          IconData(
            //code
              61454,
              //字体
              fontFamily: 'FontAwesome'),
          color: Colors.green,
          size: 68.0,
        ),

      ]),
    );
  }
}

Flutter技术入门与实战图书查看地址: http://product.dangdang.com/26485813.html
Flutter交流学习群：894109159
Flutter开源项目请关注: https://github.com/kangshaojun
Flutter视频教程：https://edu.csdn.net/lecturer/2436