Flutter自带图标组件和自定义图标

自带图标组件使用

import 'package:flutter/material.dart';

void main(){
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter app")),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        SizedBox(height: 20,),
        Icon(Icons.home,color: Colors.red,size: 40,),
        SizedBox(height: 20,),
        Icon(Icons.settings),
        SizedBox(height: 20,),
        Icon(Icons.search),
        Icon(Icons.personal_injury_outlined),
        SizedBox(height: 20,),
        Icon(
          Icons.category,
          size: 60,
          color: Colors.blue,
        ),
        Icon(
          Icons.shop,
          size: 60,
          color: Colors.red,
        )
      ],
    );
  }
  
}

借助阿里巴巴图标库自定义字体图片

1. 导入字体图标文件;这一步和导入字体文件相同，假设我们的字体图标文件保存在项目根目录下，路径为"fontsnconfont.ttf"

• 阿里巴巴图标库
• 加入购物车
• 下载代码
• 在根目录创建fonts文件夹，把iconfont.json和iconfont.ttf放入

2. 找到pubspec.yaml，搜索font，引入字体的代码

# fonts:
  #   - family: Schyler
  #     fonts:
  #       - asset: fonts/Schyler-Regular.ttf
  #       - asset: fonts/Schyler-Italic.ttf
  #         style: italic
  fonts:
    - family: ityingIcon #指定字体名 根据自己的需求定义
      fonts:
        - asset: fonts/iconfont.ttf

3. 为了使用方便，我们定义一个MyIcons 类，功能和Icons 类一样：将字体文件中的所有图标都定义成静态变量：

• 创建 ifyingFont.dart

import 'package:flutter/material.dart';

class ItyingFont {
  static const IconData book = IconData(
    0xf00a1, //在iconfont.json 里 unicode
    fontFamily: "ityingIcon",
    matchTextDirection: true
  );
  static const IconData weixin = IconData(
      0xf0106, //在iconfont.json 里 unicode
      fontFamily: "ityingIcon",
      matchTextDirection: true
  );
  static const IconData cart = IconData(
      0xf00a1, //在iconfont.json 里 unicode
      fontFamily: "344b",
      matchTextDirection: true
  );
}

• 添加新的图标，继续上述1操作

配置pubspec.yaml

  fonts:
    - family: ityingIcon #指定字体名 根据自己的需求定义
      fonts:
        - asset: fonts/iconfont.ttf
    - family: flutterIcon
      fonts:
        - asset: fonts/newiconfont.ttf

修改ifyingFont.dart

import 'package:flutter/material.dart';

class ItyingFont {
  static const IconData book = IconData(
    0xf00a1, //在iconfont.json 里 unicode
    fontFamily: "ityingIcon",
    matchTextDirection: true
  );

  static const IconData weixin = IconData(
      0xf0106, //在iconfont.json 里 unicode
      fontFamily: "ityingIcon",
      matchTextDirection: true
  );
  static const IconData cart = IconData(
      0x344b, //在iconfont.json 里 unicode
      fontFamily: "ityingIcon",
      matchTextDirection: true
  );

  static const IconData yonghu = IconData(
      0xe633, //在iconfont.json 里 unicode
      fontFamily: "flutterIcon",
      matchTextDirection: true
  );
  static const IconData address = IconData(
      0xe63c, //在iconfont.json 里 unicode
      fontFamily: "flutterIcon",
      matchTextDirection: true
  );
  static const IconData category = IconData(
      0xe62f, //在iconfont.json 里 unicode
      fontFamily: "flutterIcon",
      matchTextDirection: true
  );
}

继续添加图标

import 'package:flutter/material.dart';
import 'package:fitst_flutter_app/ifyingFont.dart';
void main(){
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.blue
      ),
      home: Scaffold(
        appBar: AppBar(title: const Text("Flutter app")),
        body: const MyHomePage(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      children: const [
        SizedBox(height: 20,),
        Icon(Icons.home,color: Colors.red,size: 40,),
        SizedBox(height: 20,),
        Icon(Icons.settings),
        SizedBox(height: 20,),
        Icon(Icons.search),
        Icon(Icons.personal_injury_outlined),
        SizedBox(height: 20,),
        Icon(
          Icons.category,
          size: 60,
          color: Colors.blue,
        ),
        Icon(
          Icons.shop,
          size: 60,
          color: Colors.red,
        ),
        SizedBox(height: 20,),
        Icon(ItyingFont.address,size: 40,color: Colors.black,),
        SizedBox(height: 20,),
        Icon(ItyingFont.category,size: 40,color: Colors.black,),
        SizedBox(height: 20,),
        Icon(ItyingFont.book,size: 40,color: Colors.orange,),
        SizedBox(height: 20,),
        Icon(ItyingFont.weixin,size: 40,color: Colors.green,),
        SizedBox(height: 20,),
        Icon(ItyingFont.cart,size: 40,color: Colors.black,),

      ],
    );
  }
  
}