flutter_font 自定义图标 自带图标

129 阅读1分钟
/// 1、flutter01/fonts 放入iconfont.json和iconfont.ttf文件
/// 2、新建jeyar_font.dart文件,内容如下
import 'package:flutter/material.dart';

class JeyarFont {
  static const IconData geren = IconData(
    0xe60b,
    fontFamily: "jeyarIcon",
    matchTextDirection: true,
  );
  static const IconData fenlei = IconData(
    0xe60a,
    fontFamily: "jeyarIcon",
    matchTextDirection: true,
  );
  static const IconData shu = IconData(
    0xe617,
    fontFamily: "jeyarIcon",
    matchTextDirection: true,
  );
  static const IconData sousuo = IconData(
    0xe618,
    fontFamily: "jeyarIcon",
    matchTextDirection: true,
  );
}

自定义图标使用

import 'package:flutter/material.dart';
// 1、引入jeyar_font.dart
import './jeyar_font.dart';

class FontPage extends StatelessWidget {
  const FontPage({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flutter ICON")),
      body: const IconPage(),
    );
  }
}

class IconPage extends StatelessWidget {
  const IconPage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return const Column(
      children: [
        SizedBox(height: 20),
        Icon(
          Icons.home,
          size: 40,
          color: Colors.red,
        ),
        SizedBox(height: 20),
        Icon(Icons.settings),
        SizedBox(height: 20),
        Icon(Icons.search),
        SizedBox(height: 20),
        Icon(Icons.personal_injury_outlined),
        SizedBox(height: 20),
        Icon(
          Icons.category,
          size: 60,
          color: Colors.blue,
        ),
        Icon(
          Icons.category,
          size: 60,
          color: Colors.blue,
        ),
        Icon(
          Icons.shop,
          size: 60,
          color: Colors.red,
        ),
        SizedBox(height: 40),
        // 2、使用自定义图标
        Icon(
          JeyarFont.shu,
          size: 40,
          color: Colors.orange,
        ),
        SizedBox(height: 20),
        Icon(
          JeyarFont.geren,
          size: 40,
          color: Colors.green,
        ),
        SizedBox(height: 20),
        Icon(
          JeyarFont.fenlei,
          size: 30,
          color: Colors.black,
        ),
        SizedBox(height: 20),
        Icon(JeyarFont.sousuo),
        SizedBox(height: 20),
        Icon(JeyarFont.fenlei),
      ],
    );
  }
}