Flutter开发：AppIconText组件报color与decoration冲突错误

错误信息 #

color == null || decoration == null
"Cannot provide both a color and a decoration
To provide both, use "decoration: BoxDecoration(color: color)"."
错误组件：AppIconText
路径：file:///Users/jessezephyr/projects/flutter/ticketapp/lib/screens/search_screen.dart:67:17

问题原因 #

在AppIconText组件的Container中，同时声明了color属性和decoration属性。Flutter的Container组件不允许这种写法——当使用decoration时，必须把颜色配置到BoxDecoration的color参数中，不能单独设置Container的color。

修改后的代码 #

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:ticketapp/utils/app_layout.dart';

import '../utils/app_styles.dart';

class AppIconText extends StatelessWidget {
  final IconData icon;
  final String text;
  const AppIconText({super.key, required this.icon, required this.text});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(
          vertical: AppLayout.getWidth(12),
          horizontal: AppLayout.getHeight(12)),
      decoration: BoxDecoration(
        color: Colors.white, // 将颜色移至BoxDecoration内
        borderRadius: BorderRadius.circular(AppLayout.getWidth(10)),
      ),
      child: Row(
        children: [
          Icon(
            icon,
            color: const Color(0XFF8FC20F),
          ),
          Gap(AppLayout.getWidth(10)),
          Text(
            text,
            style: Styles.textStyle,
          )
        ],
      ),
    );
  }
}

修改说明 #

• 移除了Container单独的color: Colors.white属性
• 将颜色配置整合到BoxDecoration的color参数中

修改完成后，AppIconText组件即可正常显示图标与文本。

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