I want to have only one blurred circle but this is not possible and the outer parts of the circle i.e. Container are completely blurred. The same is true for CustomPoint.
Codes :
Center(
child: Stack(alignment: Alignment.center, children: [
Image.network(
"https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_2.jpg"),
ClipRRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
width: 200,
height: 100,
decoration: const BoxDecoration(
color: Color.fromARGB(33, 255, 0, 0),
shape: BoxShape.circle),
),
),
)
]),
),
I searched the internet and did not find anything
Update:
My friends, I solved this problem:
Stack(alignment: Alignment.center, children: [
Image.network(
"https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domh%C3%BCtte_-_2.jpg"),
ClipOval(
clipper: CoustomCircle(),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
child: Container(
width: 200,
height: 200,
decoration: const BoxDecoration(
color: Color.fromARGB(57, 255, 0, 0),
shape: BoxShape.circle),
),
),
)
]),
class CoustomCircle extends CustomClipper<Rect> {
@override
Rect getClip(size){
return const Rect.fromLTWH(0, 0, 200, 200);
}
@override
bool shouldReclip(oldClipper){
return true;
}
}
3
Answers
My friends, I solved this problem:
Use the ImageFiltered widget instead of BackdropFilter
Remember to import ‘dart:ui’
Rather than blurring out a container, you could blur out a
CircleAvatar
. Refer this too Create a blur shadow to a circular image in flutter