How can i set the outer blur like this? - flutter

Question

So i want to achieve this transition color with flutter
There is a container that contain Text tile with blue color () that changing to transparent. Here is what i do so far. I'm trying to use stack and LinearGradient
return Stack(
children: [
InkWell(
onTap: () {},
child: AspectRatio(
aspectRatio: 16 / 9,
child: pageData.thumbnail == ""
? ThumnailError()
: CachedNetworkImage(
imageUrl: "https://via.placeholder.com/200x100",
placeholder: (context, url) => MyLoader(),
errorWidget: (context, url, error) => ThumnailError(),
imageBuilder: (context, imageProvider) => Container(
decoration: BoxDecoration(
image: DecorationImage(
image: imageProvider,
fit: BoxFit.cover,
),
),
),
),
),
),
Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(10.h),
decoration: BoxDecoration(
color: Colors.white,
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
colors: [
AppColors.primary,
Colors.transparent,
],
stops: [
0.2,
0.33
]),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
color: AppColors.primary,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextLarge(
label: "Title",
color: Colors.white,
fontWeight: FontWeight.bold,
),
Row(
children: [
TextMedium(
label: "Category",
color: Colors.white,
),
SizedBox(
width: 10.w,
),
TextMedium(
label: pageData.duration ?? "",
color: Colors.white,
)
],
),
],
),
),
),
],
);
and here is the result
So how can i achieve the first image that i put above ? thanks in advance and sorry for my english

Answer 1

You can try ShaderMask to achieve the desired result.
Stack(
children: [
ClipRRect(
child: ShaderMask(
shaderCallback: (Rect bounds) {
return LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.transparent,
Colors.black
]
).createShader(bounds);
},
blendMode: BlendMode.darken,
child: Container(
width: 300,
height: 250,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/someimage.jpg'),
fit: BoxFit.cover,
),
)
))
)
]
);
ShaderMask Widget