如何在Flutter中使图片变灰

hl0ma9xz  于 2023-02-16  发布在  Flutter
关注(0)|答案(3)|浏览(262)

我试图灰出底部应用程序栏中的一个非活动按钮,但与彩色过滤器小部件得到灰色的图片。我怎么能灰出只有图片(*.png)

return GestureDetector(
      onTap: this.widget.onTapFunction,
      child: Container(
        width: 50,
        height: 55,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Expanded(
              child: ColorFiltered(
                colorFilter:
                    ColorFilter.mode(this.widget.color,                               BlendMode.saturation),
                child:                    Image.asset("assets/icons/${this.widget.iconName}"),
              ),
            ),
            Text(
              this.widget.title,
              style: GoogleFonts.lobster(
                fontSize: 14,
              ),
            )
          ],
        ),
      ),
    );

这是一张图片:

58wvjzkj

58wvjzkj1#

将ColorFiltered替换为以下内容:

Image.asset(
  'assets/icons/${this.widget.iconName}',
  color: Colors.grey,
  colorBlendMode: BlendMode.color,
)
h6my8fg2

h6my8fg22#

你试过阴影蒙版吗?我今天才看到,所以我不确定这是否对你所需要的起作用。
https://youtu.be/7sUL66pTQ7Q

pes8fvy9

pes8fvy93#

您不需要使用ColorFiltered小部件,只需使用Image小部件的color属性即可:

Image.asset(
    'IMAGE_URL',
    color: Colors.grey
)

相关问题