flutter - 如何在flutter中实现这种类型的模糊效果

Question

我正在尝试在 youtube、网站、flutter 官方网站中找到这种效果的解决方案 1 天，但我没有找到这样的解决方案。有人知道如何在 Container Widget 的角落边缘实现这种模糊效果吗？

标签： flutterflutter-layout

Answer 1

ShaderMask(
 shaderCallback: (Rect bounds) {
   return LinearGradient(
     colors: [Colors.white.withOpacity(0.05),Colors.white],
     stops: [0.1, 1],
     tileMode: TileMode.mirror,
     begin: Alignment.topCenter,
     end: Alignment.bottomCenter
   ).createShader(bounds);
 },
 child: Column(
   mainAxisSize: MainAxisSize.min,
   children: [
     Container(
       width: 50,height: 50,
       color: Colors.red,
     ),
     Container(
       width: 50,height: 50,
       color: Colors.blue,
     ),
     Container(
       width: 50,height: 50,
       color: Colors.black,
     ),
     Container(
       width: 50,height: 50,
       color: Colors.red,
     ),
     Container(
       width: 50,height: 50,
       color: Colors.blue,
     ),
     Container(
       width: 50,height: 50,
       color: Colors.black,
     ),
   ],
 )
)