Flutter：参数类型无法分配给IconData?，如何为列表项配置自定义图标？

你遇到的错误核心是类型不匹配：在categories.dart中给Category存储的是Icon组件，但Icon组件的构造函数需要的是IconData类型参数，导致代码无法识别传入的数据类型。

修复步骤： #

1. 修改categories.dart，存储IconData而非Icon组件

将每个Category的第三个参数从Icon(MyFlutterApp.xxx)改为直接传入MyFlutterApp.xxx（这本身就是IconData类型）：

import 'package:flutter/material.dart';

import 'package:shopping_list/models/category.dart';
import 'package:shopping_list/presentation/my_flutter_app_icons.dart';

const categories = {
  Categories.vegetables: Category(
    'Vegetables',
    Color.fromARGB(255, 0, 255, 128),
    MyFlutterApp.carrot,
  ),
  Categories.fruit: Category(
    'Fruit',
    Color.fromARGB(255, 145, 255, 0),
    MyFlutterApp.apple_alt,
  ),
  Categories.meat: Category(
    'Meat',
    Color.fromARGB(255, 255, 102, 0),
    MyFlutterApp.meat,
  ),
  Categories.dairy: Category(
    'Dairy',
    Color.fromARGB(255, 0, 208, 255),
    MyFlutterApp.cheese,
  ),
  Categories.carbs: Category(
    'Carbs',
    Color.fromARGB(255, 0, 60, 255),
    MyFlutterApp.toast,
  ),
  Categories.sweets: Category(
    'Sweets',
    Color.fromARGB(255, 255, 149, 0),
    MyFlutterApp.candy_cane,
  ),
  Categories.spices: Category(
    'Spices',
    Color.fromARGB(255, 255, 187, 0),
    MyFlutterApp.leaf,
  ),
  Categories.convenience: Category(
    'Convenience',
    Color.fromARGB(255, 191, 0, 255),
    MyFlutterApp.local_convenience_store,
  ),
  Categories.hygiene: Category(
    'Hygiene',
    Color.fromARGB(255, 149, 0, 255),
    MyFlutterApp.hands_wash,
  ),
  Categories.other: Category(
    'Other',
    Color.fromARGB(255, 0, 225, 255),
    MyFlutterApp.shop,
  ),
};

2. 调整grocery_list.dart中的Icon使用

去掉Icon前的const（因为要动态获取数据，无法使用常量），直接传入category.icon（现在是IconData类型），还可以添加大小和颜色适配容器：

import 'package:flutter/material.dart';
import 'package:shopping_list/data/dummy_items.dart';
import 'package:shopping_list/presentation/my_flutter_app_icons.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          'Your groceries',
        ),
      ),
      body: ListView.builder(
        itemCount: groceryItems.length,
        itemBuilder: (ctx, index) => ListTile(
            title: Text(
              groceryItems[index].name,
            ),
            leading: Container(
              width: 28,
              height: 28,
              color: groceryItems[index].category.color,
              child: Icon(
                groceryItems[index].category.icon,
                size: 16,
                color: Colors.white,
              ),
            ),
            trailing: Text(
              groceryItems[index].quantity.toString(),
            ),),
      ),
    );
  }
}

3. 确认Category模型类的类型

确保你的Category类中对应图标的字段类型是IconData，示例：

class Category {
  const Category(this.name, this.color, this.icon);

  final String name;
  final Color color;
  final IconData icon; // 类型必须是IconData
}

完成以上修改后，类型不匹配的错误就会消失，自定义图标就能正常显示在每个杂货项的leading位置了。

内容的提问来源于stack exchange，提问作者sevde