flutter：图标 Icon

大前端 flutter

发布时间 : 2025-08-17 00:00

字数:251 阅读 :

定义
开启 pubspec.yaml
使用
1. icon 预览
2. 代码使用
苹果 Icon

Icon 组件用来显示可缩放的图标，不会像图片一样失真，还能设置颜色。

定义

  const Icon(
    
    // IconData 图标数据
    this.icon, {
    Key? key,
      
    // 尺寸
    this.size,
      
    // 颜色
    this.color,
    
    // 方向
    this.textDirection,
      
    this.semanticLabel,
  }) : super(key: key);

开启 pubspec.yaml

# The following section is specific to Flutter.
flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

使用

icon 预览

可以在下面这个网站找到自己想要的图标

https://fonts.google.com/icons

觉得哪个合适，复制它的名字就可以

代码使用

class ComponentPage extends StatelessWidget {
  const ComponentPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(title: const Text('组件')),
      body: Center(
        child: Column(
          children: [
            // 添加购物车图标
            Icon(
              // 购物车图标
              Icons.shopping_cart,
              // 选择大小
              size: 100,
              // 选择颜色
              color: Colors.blue,
            ),
          ],
        ),
      ),
    );
  }
}

苹果 Icon

苹果风格 icon 需要用 CupertinoIcons 对象来访问

https://api.flutter.dev/flutter/cupertino/CupertinoIcons-class.html

Icon(
  // 购物车图标
  CupertinoIcons.shopping_cart,
  // 选择大小
  size: 100,
  // 选择颜色
  color: Colors.blue,
),