颤振中的自定义颜色背景
Custom colors background in flutter
这个王者背景怎么办:
https://dribbble.com/shots/14805280-Wallet-app
我尝试了渐变,但不仅仅是一个简单的渐变,我还尝试了 ShaderMask 和 3 个容器,正确的方法是什么?
这是我通过简单实现获得的最接近结果,包含模糊效果和一些容器。有一些 issues 带有剪裁模糊的边界,如果它解决了,它会与您的实例更加相似。
codepen link也可以
class FancyBlurBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
width: 200,
height: 120,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Color(0xFF7dccf3))),
Expanded(
child: Container(color: Color(0xFF695bf4))),
],
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Color(0xFFde536f))),
Expanded(
child: Container(color: Color(0xFFf6c37f))),
],
),
),
],
),
Transform.translate(
offset: Offset(10, 10),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
child: Container(color: Colors.white.withOpacity(0.0)),
),
),
],
),
),
),
),
);
}
}
这个王者背景怎么办: https://dribbble.com/shots/14805280-Wallet-app
我尝试了渐变,但不仅仅是一个简单的渐变,我还尝试了 ShaderMask 和 3 个容器,正确的方法是什么?
这是我通过简单实现获得的最接近结果,包含模糊效果和一些容器。有一些 issues 带有剪裁模糊的边界,如果它解决了,它会与您的实例更加相似。
codepen link也可以
class FancyBlurBox extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ClipRRect(
borderRadius: BorderRadius.circular(15),
child: SizedBox(
width: 200,
height: 120,
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Color(0xFF7dccf3))),
Expanded(
child: Container(color: Color(0xFF695bf4))),
],
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(color: Color(0xFFde536f))),
Expanded(
child: Container(color: Color(0xFFf6c37f))),
],
),
),
],
),
Transform.translate(
offset: Offset(10, 10),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 30.0, sigmaY: 30.0),
child: Container(color: Colors.white.withOpacity(0.0)),
),
),
],
),
),
),
),
);
}
}