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

Question

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 an Image not supported?

Answer 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.