Why Is PNG file with Drop Shadow in Flutter Web App Grainy?

198

Solution 1

Version 3.0.x has this bug, but if you use the actual master branch(3.1.0-0.0.pre.2481) of flutter the issue is fixed already. Therefore it should be fixed in next stable release too.

Solution 2

I just set the filterQuality to FilterQuality.high, and it worked on 3.0.5:

Image.asset(
  'circle.png',
  width: 208,
  height: 208,
  filterQuality: FilterQuality.high,
),

Share:
198
Clifton Labrum
Author by

Clifton Labrum

Updated on January 05, 2023

Comments

  • Clifton Labrum
    Clifton Labrum 9 minutes

    I just started to learn Flutter to build a web app, and I can't figure out why the PNG images I include in the app are grainy. Here's how it looks in Chrome:

    enter image description here

    Here is the entirety of my app:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(const MyApp());
    }
    
    class MyApp extends StatelessWidget {
      const MyApp({Key? key}) : super(key: key);
    
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return const MaterialApp(
          title: 'Flutter Demo',
          home: MyHomePage(),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      const MyHomePage({Key? key}) : super(key: key);
    
      @override
      State<MyHomePage> createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('Test App'),
          ),
          body: Container(
            color: Colors.black,
            child: Image.asset(
              'circle.png',
              width: 208,
              height: 208,
            ),
          ),
        );
      }
    }
    

    Here is the image I am using: https://www.dropbox.com/s/barf3lcj80fqbqg/circle.png?dl=0

    I've tried a few different PNG files and these are exported from Figma. They appear to have transparency and a drop shadow when I open them in macOS Finder or in Chrome directly. But something happens when Flutter renders them.

    Am I missing a property on the Image widget? Or is a drop shadow on an Image not supported?

    • MendelG
      MendelG 6 months
      For me, the image does load correctly, see it here. Try running flutter clean and flutter pub get. Also, try opening a new project
    • Clifton Labrum
      Clifton Labrum 6 months
      I'm using a MacBook Pro with a high-resolution monitor and I wonder if it's related to that. I just added a /2x and /3x folder inside /assets and then put the @2x and @3x versions of the circle.png in those respective folders, but it still looks grainy. 🤔
    • MCB
      MCB 5 months
      Seems like a bug of the current flutter version. I have the same problem... I used Flutter 2.10.3 and the png looked as it should. Now I changed the version to 3.0.5 and the picture has white pixels all around ...