Flutter中BottomNavigation自定义图片替换原生图标的问题

问题根源 #

你代码里的错误在于：

• Icon组件仅用于Material内置图标（比如Icons.home_filled），不能直接传入Image.asset或错误的Icons.image.asset（Icons类里根本没有这个属性）
• 自定义图片组件不能用const修饰，因为AssetImage是动态资源，无法被编译为常量

正确实现方式 #

方式1：使用ImageIcon（推荐，适配IconButton的点击区域和样式） #

ImageIcon是专门为图标场景设计的组件，能和IconButton完美配合，用法如下：

IconButton(
  enableFeedback: false,
  onPressed: () {
    setState(() {
      pageIndex = 0;
    });
  },
  icon: pageIndex == 0
      ? ImageIcon(
          AssetImage("images/dog.jpg"),
          color: Colors.white,
          size: 35,
        )
      : const Icon(
          Icons.home_outlined,
          color: Colors.white,
          size: 35,
        ),
)

方式2：直接使用Image.asset #

如果需要更灵活的图片控制（比如调整缩放、裁剪），可以直接用Image.asset：

IconButton(
  enableFeedback: false,
  onPressed: () {
    setState(() {
      pageIndex = 0;
    });
  },
  icon: pageIndex == 0
      ? Image.asset(
          "images/dog.jpg",
          color: Colors.white,
          width: 35,
          height: 35,
        )
      : const Icon(
          Icons.home_outlined,
          color: Colors.white,
          size: 35,
        ),
)

必做配置：pubspec.yaml声明资源 #

别忘了在项目根目录的pubspec.yaml里添加图片资源路径，否则会找不到图片：

flutter:
  assets:
    - images/dog.jpg
    # 如果images文件夹下有多个图片，可以直接写 - images/

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