为什么我无法使用 Tree Shake 图标字体？

Question

我可以在我的计算机上运行该应用程序。但是当我在 Github 上创建拉取请求并推送代码时，它在检查时显示错误：

“此应用程序无法对图标字体进行树状抖动。它在以下位置具有 IconData 的非常量实例：Product_Model”

代码片段如下：

class ProductModel extends Equatable {
  final DocumentReference selfRef;
  final String productName;
  final String description;
  final DocumentReference defaultPlan;
  final IconData icon;
  const ProductModel(
      {required this.selfRef,
      required this.productName,
      required this.defaultPlan,
      required this.icon,
      required this.description});
  factory ProductModel.fromSnapshot(
      DocumentSnapshot<Map<String, dynamic>> snapshot) {
    final data = snapshot.data()!;

    return ProductModel(
        selfRef: snapshot.reference,
        productName: data['name'] as String,
        defaultPlan: data['defaultPlan'],
        icon: IconData(data['iconId'] as int, fontFamily: 'MaterialIcons'),
        description: data['description'] as String);
  }

 @override
  List<Object> get props => [selfRef, productName, defaultPlan, icon];
}

为什么它在我的电脑上运行而不是在 Github 上运行？有什么办法解决这个问题吗？

Answer 1

flutter 中的

Tree shake 过程用于删除任何未使用的代码和资源，包括最终构建中未使用的 IconData 实例，以减少应用程序的大小。现在你从 GitHub 中提取代码，它会抱怨这部分代码

icon: IconData(data['iconId'] as int, fontFamily: 'MaterialIcons'),

这是因为

IconData 是从检索到的数据实例化的。 您应该避免基于运行时数据动态实例化 IconData 实例，因为它会阻止 Tree shake 图标字体。

要解决这个问题，您可以尝试将 IconData 实例化移到类定义之外；这样，IconData 就变成了一个常量值，允许 Flutter 正确地进行树抖动。

试试这个：

class ProductModel extends Equatable {
  final DocumentReference selfRef;
  final String productName;
  final String description;
  final DocumentReference defaultPlan;
  final IconData icon;

  const ProductModel({
    required this.selfRef,
    required this.productName,
    required this.defaultPlan,
    required this.icon,
    required this.description,
  });

  factory ProductModel.fromSnapshot(
    DocumentSnapshot<Map<String, dynamic>> snapshot,
  ) {
    final data = snapshot.data()!;

    return ProductModel(
      selfRef: snapshot.reference,
      productName: data['name'] as String,
      defaultPlan: data['defaultPlan'],
      icon: productIcon(data['iconId'] as int),
      description: data['description'] as String,
    );
  }

  @override
  List<Object> get props => [selfRef, productName, defaultPlan, icon];
}

// Function to get IconData based on iconId
IconData productIcon(int iconId) {
  switch (iconId) {
    case 1:
      return Icons.icon1;
    case 2:
      return Icons.icon2;
    // Add more cases as needed
    default:
      // Return a default icon or handle invalid iconIds
      return Icons.error;
  }
}

在这里，您获取

'iconId'

 并将其传递给 

productIcon

 函数，以便返回具有相同 

'iconId'

 的图标。