Flutter开发中如何将assets/icons目录的图标添加到自定义按钮组件

步骤1：配置资源路径 #

• 打开项目根目录下的pubspec.yaml文件，找到flutter配置块，添加图标目录的资源声明：

flutter:
  assets:
    - assets/icons/

• 配置完成后在终端执行flutter pub get命令，让配置生效。

步骤2：修改自定义按钮组件 #

给按钮组件新增可选的图标路径参数，将原有的纯Text子组件替换为Row布局，同时兼容无图标的使用场景，修改后完整代码如下：

// 先在组件类中新增可选参数声明
final String? iconPath;

Widget build(BuildContext context) {    
  return MaterialButton(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(40)),
      side: BorderSide(color: kPrimaryColor)
    ),
    padding: padding,
    color: color,
    minWidth: 280,
    onPressed: press,
    child: Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        // 传入了图标路径才渲染图标
        if (iconPath != null)
          Image.asset(
            iconPath!,
            height: 20,
            width: 20,
          ),
        // 图标和文字的间距
        if (iconPath != null)
          const SizedBox(width: 8),
        Text(
          text,
          style: TextStyle(
            color: Colors.grey[900],
            fontSize: 15,
          ),
        ),
      ],
    ),
  );
}

步骤3：组件调用示例 #

// 带图标按钮调用
CustomButton(
  text: "登录",
  color: Colors.white,
  padding: const EdgeInsets.symmetric(vertical: 16),
  press: () { /* 点击逻辑 */ },
  iconPath: "assets/icons/login_icon.png",
)

// 不带图标沿用原有调用方式
CustomButton(
  text: "注册",
  color: Colors.white,
  padding: const EdgeInsets.symmetric(vertical: 16),
  press: () { /* 点击逻辑 */ },
)

如果你使用的是svg格式的图标，需要额外引入flutter_svg依赖，将Image.asset替换为SvgPicture.asset即可正常渲染。

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