flutter图标组件

1.Icon加载系统图标

所有系统图标命名参考系统图标网站,不过该网站经常性加载不出来,可以参考简书文章

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.green,
              size: 40,
            ),
          )),
    );
  }
}

2.Icon加载Iconfont图标

• 在阿里图标创建项目,选择图标
• 下载Iconfont.ttf字体,放入flutter工程中
  配置工程目录
• 在pubspec.yaml中配置下Iconfont.ttf字体

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

• 使用查看阿里图标我的项目中的编码

  
  阿里-我的图标
• 使用

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
            child: Icon(
              IconData(0xe667, fontFamily: 'iconfont'),
//             Icons.phone,
              color: Colors.green,
              size: 40,
            ),
          )),
    );
  }
}

3.图标按钮IconButton

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: '晴天',
      home: Scaffold(
          appBar: AppBar(title: Text('系统图标')),
          body: Center(
              child: IconButton(
            icon: Icon(
              Icons.add,
              size: 40,
            ),
            onPressed: () {
              print("按下操作");
            },
            tooltip: '按下操作',
          ))),
    );
  }
}