Flutter如何创建封装全量图标导入的图标组件供其他dart文件使用

核心实现逻辑 #

和你在React Native中实现同类功能的逻辑一致：把图标字体资源、图标编码映射关系、图标渲染逻辑全部收敛到单个独立文件中，其他业务页面只需要引入这一个文件，即可直接调用图标，无需重复配置字体、单独引入零散图标资源。 #

具体实现步骤 #

• 第一步：配置全局图标字体
  把整理好的全量图标ttf字体文件放到项目assets/fonts/目录下，在项目根目录的pubspec.yaml中全局注册字体，配置完成后执行flutter pub get生效：

  flutter:
    uses-material-design: true
    fonts:
      - family: AppIconFont
        fonts:
          - asset: assets/fonts/app_custom_icons.ttf
  

• 第二步：编写统一图标封装文件
  新建components/app_icon.dart文件，在文件内统一维护所有图标的编码映射，同时封装对外暴露的通用图标组件：

  import 'package:flutter/material.dart';
  
  // 全量图标编码映射，后续新增图标只需要在这里追加
  class AppIcons {
    static const IconData home = IconData(0xe6a2, fontFamily: 'AppIconFont');
    static const IconData mine = IconData(0xe619, fontFamily: 'AppIconFont');
    static const IconData search = IconData(0xe65c, fontFamily: 'AppIconFont');
    static const IconData setting = IconData(0xe607, fontFamily: 'AppIconFont');
    static const IconData back = IconData(0xe61f, fontFamily: 'AppIconFont');
    static const IconData arrowRight = IconData(0xe623, fontFamily: 'AppIconFont');
    // 剩余全量图标按相同格式在此处追加即可
  }
  
  // 通用图标组件，对外直接调用
  class AppIcon extends StatelessWidget {
    // 要渲染的图标对象
    final IconData icon;
    // 图标尺寸，默认24
    final double size;
    // 图标颜色，默认深灰
    final Color color;
  
    const AppIcon(
      this.icon, {
      super.key,
      this.size = 24,
      this.color = const Color(0xFF333333),
    });
  
    @override
    Widget build(BuildContext context) {
      return Icon(
        icon,
        size: size,
        color: color,
      );
    }
  }
  

  如果需要统一封装Flutter自带的Material Design或Cupertino风格图标，不需要额外引入ttf文件，直接在AppIcons类中追加对应内置图标即可，无需配置fontFamily参数。

• 第三步：业务页面调用
  在任意需要使用图标的.dart文件中，只需要导入app_icon.dart这一个文件，即可直接使用所有图标，无需其他额外配置：

  // 页面中使用示例
  AppIcon(
    AppIcons.home,
    size: 28,
    color: Colors.blueAccent,
  )
  

可选扩展：支持字符串名称传参调用 #

如果习惯和RN中一样传入图标名字符串调用，可以在app_icon.dart中追加名称到图标对象的映射关系：

const Map<String, IconData> appIconNameMap = {
  'home': AppIcons.home,
  'mine': AppIcons.mine,
  'search': AppIcons.search,
  'setting': AppIcons.setting,
  'back': AppIcons.back,
  'arrowRight': AppIcons.arrowRight,
};

// 调用示例
AppIcon(appIconNameMap['home']!, size: 24)

内容的提问来源于stack exchange，提问作者saffi ullah khugyani