Skip to content

Instantly share code, notes, and snippets.

@hellohejinyu
Last active February 9, 2023 23:46
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hellohejinyu/09c0048e94e12b4a3ab43471dfce9b41 to your computer and use it in GitHub Desktop.
Save hellohejinyu/09c0048e94e12b4a3ab43471dfce9b41 to your computer and use it in GitHub Desktop.
flutter colorfiltered bug in web
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
fit: StackFit.expand,
children: [
Image.network(
'https://image.freepik.com/free-vector/artistic-mobile-wallpaper-with-hand-drawn-roses_79603-466.jpg',
fit: BoxFit.cover,
),
ColorFiltered(
colorFilter: ColorFilter.mode(
Colors.black.withOpacity(0.8),
BlendMode.srcOut,
),
child: Stack(
fit: StackFit.expand,
children: [
Container(
decoration: BoxDecoration(
color: Colors.black,
backgroundBlendMode: BlendMode.dstOut,
),
),
Align(
alignment: Alignment.topCenter,
child: Container(
margin: const EdgeInsets.only(top: 80),
height: 200,
width: 200,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(100),
),
),
),
Center(
child: Text(
'Hello World',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.w600,
),
),
)
],
),
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment