为什么PNG文件在Flutter Web应用程序中带有落下阴影？
我刚刚开始学习幻想以构建 Web应用程序，我无法弄清楚为什么在应用程序中包含的PNG图像是颗粒状的。以下是在Chrome中的外观：
这是我的应用的整体：
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,
),
),
);
}
}
这是我是图像使用： circle.png？dl = 0
我尝试了一些不同的PNG文件，这些文件已从无花果中导出。当我在MacOS Finder或直接在Chrome中打开它们时，它们似乎具有透明度和落下阴影。但是，当颤抖呈现它们时，会发生一些事情。
我是否缺少图像小部件上的属性？还是不支持图像上的落下阴影？
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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我只是将
filterqualigal设置为filterquality.high，它在3.0.5：I just set the
filterQualitytoFilterQuality.high, and it worked on 3.0.5:版本3.0.x具有此错误，但是如果您使用Flutter的实际主分支（3.1.0-0.0.pre.2481），则问题已经修复。因此，它也应该在下一个稳定版本中固定。
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.