[web] Shadows on flutter_web not rendering like shadows in flutter #32215
Description
Describe the bug
Using this exact code on both web and mobile results in noticeably different rendered output.
I expect that the rendering of shadows should be consistent. The most noticeable difference can be noticed between the BoxShadow, but Material with elevation seems to render differently as well. I use both as an example here.
void main() {
runApp(
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
color: Colors.orange,
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black38,
blurRadius: 6.0,
offset: new Offset(4.0, -4.0),
spreadRadius: 0.0,
),
],
),
),
Padding(
padding: EdgeInsets.only(top: 20.0),
),
Container(
height: 200.0,
width: 200.0,
child: Material(
color: Colors.lightBlueAccent,
elevation: 8.0,
),
),
],
),
),
);
}
To Reproduce
Use the code above, and run on web and mobile. You should notice the same thing as in the images below
Expected behavior
Shadows should render similarly if not exactly the same.
Screenshots
On the left is Chrome, on the right an iOS emulator:
Desktop (please complete the following information):
- OS:
macOS 10.14.4 (18E226) - Browser:
Chrome Version 73.0.3683.103 (Official Build) (64-bit) - Dart Version:
2.2.1 (build 2.2.1-dev.4.0 None) - Flutter Web commit SHA:
ecbdadf118b497f41c4ed4599baa0cc1c1c0fc08