开发文档
Flutter
图标

图标

注意图标来源，此文档以Material 3图标为例

基本使用 

return Icon(
  Icons.home, // 图标名称
  size: 16, // 图标大小
  color: Colors.blue, // 图标颜色
)

所有的Google图标可以点击这里查看

动画

注意，AnimatedIcon不能用于创建图标动画，这里以修改图标颜色动画为例

方法一: 使用AnimatedSwitcher 

// 无效的AnimatedSwitcher，因为每个Icon没有指定的Key
return Obx(()=>
  AnimatedSwitcher(
    duration: const Duration(milliseconds: 200),
    child: useBlue ? Icon(
      Icons.home,
      color: Colors.blue,
    ) : Icon(
      Icons.home,
      color: Colors.red,
    )
  )
);

正确做法:

return Obx(()=>
  AnimatedSwitcher(
    duration: const Duration(milliseconds: 200),
    child: useBlue ? Icon(
      key: ValueKey("blue")
      Icons.home,
      color: Colors.blue,
    ) : Icon(
      key: ValueKey("red")
      Icons.home,
      color: Colors.red,
    )
  )
);

方法二 (建议): 使用Tween 

return TweenAnimationBuilder(
  tween: ColorTween(end: controller.val.value==1 ? Colors.blue : Colors.red), 
  duration: const Duration(milliseconds: 200), 
  builder: (_, value, __) => Icon(
    Icons.home,
    color: value,
  )
);
嵌套Widget长度参数