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ütte_-_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
CodePudding user response:
Use the ImageFiltered widget instead of BackdropFilter
Center(
child: Stack(alignment: Alignment.center, children: [
Image.network(
"https://mojekooh.com/wp-content/uploads/2020/09/1024px-Matterhorn_from_Domhütte_-_2.jpg"),
ClipRRect(
child: ImageFiltered(
imageFilter: 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),
),
),
)
]),
),
Remember to import 'dart:ui'
CodePudding user response:
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