在颤动中填充图像的背景颜色

Question

是否可以为图标图像添加背景颜色？我正在使用以下代码来呈现图标。

      Icon(
            Icons.check_circle_outline,
            size: 35.0,
          )

我想在绘制图像时输出如下图

Answer 1

这个怎么样？

Container(
  color: Colors.blue,
  child: Icon(
    Icons.check_circle_outline,
    size: 35.0,
  ),
),

Answer 2

如果您试图让图标与图片中的完全一样，那么这是不可能的。图标 check_circle_outline 如下所示：

所以你在一个图标中有一个复选标记和一个圆圈。你想要的只是改变图标的一部分（在你的例子中是圆圈）

但是如果你只是想在图标后面添加背景颜色，那么你可以像Viren说的那样：

Container(
  color: Colors.blue,
  child: Icon(
    Icons.check_circle_outline,
    size: 35.0,
  ),
)

如果您想要与图片中完全相同的图标，请使用另一个图标 check 圆圈和此代码段：

ClipOval(
  child: Container(
    color: Colors.green,
    child: Icon(        
      Icons.check,
      color: Colors.white,
      size: 35.0,
    ),
  ),
);

Answer 3

下面的解决方案提供了准确的输出

Container(
          color: Colors.blue,
          padding: EdgeInsets.all(5),
          child: ClipOval(
            child: Container(
              color: Colors.green,
              child: Icon(
                Icons.check,
                color: Colors.white,
                size: 30,
              ),
            ),
          ),
        )

输出：

Answer 4

根据图标的形状和大小，可以将图标堆叠在具有所需背景色的方形小部件上。

  Stack(alignment: Alignment.center, children: [
    Container(height: 20.0, width: 20.0, color: Colors.black),
    Icon(Icons.photo_size_select_actual, color: Colors.cyanAccent, size: 35.0)
  ]),

您也可以堆叠在圆形小部件的顶部。

在颤动中填充图像的背景颜色

Fill background color of Image in flutter

flutter

flutter-layout

flutter-widget