Why Is PNG file with Drop Shadow in Flutter Web App Grainy?
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,
),

Clifton Labrum
Updated on January 05, 2023Comments
-
Clifton Labrum 5 months
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:
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 anImage
not supported?-
MendelG 11 monthsFor me, the image does load correctly, see it here. Try running
flutter clean
andflutter pub get
. Also, try opening a new project -
Clifton Labrum 11 monthsI'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 thecircle.png
in those respective folders, but it still looks grainy. 🤔 -
MCB 9 monthsSeems 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 ...
-