Skip to content

Instantly share code, notes, and snippets.

@rydmike
Created January 27, 2020 17:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rydmike/e7ba470d632d65d096103dc3d91f6529 to your computer and use it in GitHub Desktop.
Save rydmike/e7ba470d632d65d096103dc3d91f6529 to your computer and use it in GitHub Desktop.
Demo of Flutter WEB shadows (and fonts) rendering issue
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.indigo,
),
home: ShadowsExample(),
);
}
}
class ShadowsExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Shadows WEB issue'),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.fromLTRB(20, 30, 20, 50),
child: Column(
children: <Widget>[
Text('Shadows on Web look incorrect',
style: TextStyle(fontSize: 20)),
SizedBox(height: 10),
Card(
elevation: 0,
margin: EdgeInsets.all(0),
color: Colors.indigo[100],
child: Container(
child: Center(child: Text('Material Card with elevation 0')),
height: 100,
),
),
SizedBox(height: 20),
Card(
elevation: 5,
margin: EdgeInsets.all(0),
color: Colors.indigo[100],
child: Container(
child: Center(child: Text('Material Card with elevation 5')),
height: 100,
),
),
SizedBox(height: 20),
Card(
elevation: 10,
margin: EdgeInsets.all(0),
color: Colors.indigo[100],
child: Container(
child: Center(child: Text('Material Card with elevation 10')),
height: 100,
),
),
SizedBox(height: 20),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.indigo.withOpacity(0.7),
offset: Offset(3, 4),
blurRadius: 6,
spreadRadius: 3,
),
],
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4),
color: Colors.indigo[100],
),
child: Center(
child: Text('Container with custom BoxShadow')),
height: 100,
),
),
SizedBox(height: 20),
Text('The fonts on WEB are also fuzzier, like too much antialias'),
],
),
),
),
);
}
}
@rydmike
Copy link
Author

rydmike commented Feb 17, 2020

Just as info: This issue is a known issue and reported here: flutter/flutter#32215

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment