Home > Software design >  Change Image.asset opacity using opacity parameter in Image widget
Change Image.asset opacity using opacity parameter in Image widget

Time:08-26

I have a simple image that I want to put semi transparent. I have seen some methods to do it, but none of them was talking about the parameter opacity of the own Image.asset that accepts a widget of type Animation. Is it possible to change the opacity permanently with this parameter?

Image.asset(
  "assets/images/triangles_small.png",
  height: 380,
),

enter image description here

CodePudding user response:

Actually, the question point using opcaity on Image.asset. You can use AlwaysStoppedAnimation

Image.asset(
  "image/link",
  opacity: const AlwaysStoppedAnimation(.5),

To have animation, you can pass animation here.

CodePudding user response:

If you want to use parameter inside the Image widget, you can construct something like this:

Image.asset(
        "assets/images/triangles_small.png",
        height: 380,
        opacity: AnimationController(
            vsync: this,
            value: 0.5
        )
      ),

But it's better to use @Hippo Fish receipt, to wrap Image inside Opacity widget:

Opacity(
          opacity: 0.5,
          child: Image.asset(
            "image/link",
            height: 380,
            width: 380,
          ),
        )

Of cause you need to use mixin like

with SingleTickerProviderStateMixin

to use vsync: this

  • Related