Question 177405 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – BackdropFilter widget is always visible in stack . How can i avoid this strange behavior

i have the following code

class MediaOpned extends ConsumerStatefulWidget {

  const MediaOpned({
    Key? key,

  }) : super(key: key);
  @override
  ConsumerState<MediaOpned> createState() => _MediaOpnedState();
}

class _MediaOpnedState extends ConsumerState<MediaOpned> {



  @override
  Widget build(BuildContext context) {
    return  Scaffold(
      backgroundColor: Colors.black,
      body: ListView.builder(
        itemCount: 5,
        itemBuilder: (BuildContext context, int index) {
       

          return
            Stack(
              children: [

            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
              child: Container(
                color: Colors.grey,
                width: double.infinity,
                height: imageHieght,
              ),
            ),
                CachedNetworkImage(
                  imageUrl: 'https://evrak.co/uploads/images/2022/10/UvpXJ.webp',
                  fit: BoxFit.cover ,
                ),

              ],
            );
        },
      )
    );
  }
}

i am trying to bluer images in my list you can say like custom loading time . but the problems is when image loaded successfully the bluer is still visible .

note that this happening if item count was more than 1 item . if it 1 item so bluer gone when image is loaded and it fully covered it as wanted . but when i increase the item count more than 1 so the result became weird and blur always visible

Tags:

2

Answers


  1. 0

    The BackdropFilter widget can overflow above the widget tree if it is not clipped. This is because the BackdropFilter widget applies a filter to its children, and the filter can extend beyond the bounds of the children. To prevent this, you can use the ClipRect widget to clip the BackdropFilter widget to the bounds of its children or you can try the clipBehavior: Clip.hardEdge

    Container(
  clipBehavior: Clip.hardEdge,
  decoration: const BoxDecoration(),
  child: BackdropFilter( .....))

    Or

    ClipRRect(
  child: BackdropFilter( .....))
    Login or Signup to reply.
  2. 0

    In your case, you should try ImageFiltered. BackdropFilter lets you apply the filter to everything that is painted beneath a widget, instead of applying the filter to the widget itself. It is also less performant.

    return ImageFiltered(
  imageFilter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
  child: CachedNetworkImage(
    imageUrl: 'https://evrak.co/uploads/images/2022/10/UvpXJ.webp',
    fit: BoxFit.cover,
  ),
);

    The correct way to use Backdropfilter is like this below (show something clearly above the blur area)

    return ClipRect(
  child: Stack(
    children: [
      CachedNetworkImage(
        imageUrl: 'https://evrak.co/uploads/images/2022/10/UvpXJ.webp',
        fit: BoxFit.cover,
      )
      BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
        child: Text('some text'),
      )
      ,
    ],
  ),
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search