How to implement this type of blur effect in flutter

Question

I am trying to find the solution for this type of effect for 1 day in youtube, websites, official website of flutter but I do not find like this. Any one knew how to implement this blurry effect at the edge of the corner of Container Widget?

https://stackoverflow.com/questions/61150862/how-do-i-add-a-blur-effect-at-the-right-edge-horizontal-listview-to-show-that-th have you tried this? — Aloysius Samuel, Aug 10 '21 at 06:16
@AloysiusSamuel No, I did not find this solution before, Thanks sir, I think this will work.. — Farhan Yousaf, Aug 10 '21 at 06:18

score 0 · Accepted Answer · answered Aug 19 '21 at 18:39

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,
     ),
   ],
 )
)

How to implement this type of blur effect in flutter

1 Answers1