Why does my image lose its gradient in flutter?

Issue

So I was trying to create a welcome page when I got this problem. At first, everything was fine, but when I insert an image using DecorationImage, it looks like my image has an error in the color gradient. The real image look like this:enter image description here

But when i run my app, i get this:

enter image description here

I use PageView.Builder in Scaffold to show my images. My code look like this:

return Scaffold(
      body: PageView.builder(
          scrollDirection: Axis.vertical,
          itemCount: img.length,
          itemBuilder: (_,index){
            return Container(
              width: double.maxFinite,
              height: double.maxFinite,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(
                          "assets/image/"+img[index]
                      ),
                      fit: BoxFit.cover
                  )
              ),

I put all my image names in a list and use the index to call each images.

The goldfish looks pretty much the same but the gradient at the bottom is disturbed. At first, I thought it was because I was using a low spec virtual device, but then I tried with a different virtual device and still got the same result. Why this happened? Does anyone know where I went wrong?

Edit: i try to add FilterQuality

return Container(
              width: double.maxFinite,
              height: double.maxFinite,
              decoration: BoxDecoration(
                  image: DecorationImage(
                      image: AssetImage(
                          "assets/image/"+img[index]
                      ),
                      fit: BoxFit.cover,
                      filterQuality:FilterQuality.high
                  )
              ),

But nothing happen. Did I put it wrong?

Solution

i tried using real device and it works, but i don’t know why

Answered By – Flitzcore

Answer Checked By – David Marino (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *