1

So am trying to change image opacity using the opacity property i found in Image() widget, this is a short code to be clear :

Padding(
            padding: EdgeInsets.all(10.0),
            child: Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(15),
                child: Image(
                  image: NetworkImage(challengeImage),
                  fit: BoxFit.cover,
                  height: 150,
                  width: 350,
                  opacity: //not sure how to use
                ),
              ),
            ),
          ),

the image is a network image i retrieved from Firestore and am not sure what is the value i should put if its not double in order to apply opacity on the image. i thought to create a stack and insert asset image as a layer above my image and use the filter property but i would really like to know how the opacity can work with my code above, Thank you.

Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
editix
  • 322
  • 2
  • 14

2 Answers2

2

You can use AlwaysStoppedAnimation or create an Animation<double>

Image(
  image: NetworkImage(""),
  opacity: AlwaysStoppedAnimation(.1),
),
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
2

Another solution : wrap the widget with Opacity Widget it accepts a double value in range [0,1] where 1 is fully displaying and 0 is not

Wissam Sbenaty
  • 153
  • 8
  • i Would choose your answer it is a great one and nice technique, but Yeasin gives a direct answer to opacit usage within Image() widget, Thank you anyway. – editix Aug 10 '22 at 18:59