How to make cards blur in flutter?-CodePudding

I have a grid in an app. (not made of grid view builder but of column of rows). I have to make the cards blurry. I used backdrop filter but the problem is its blurring the whole screen but i want it to blur the cards only. This is code snippet :

Column(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              rowfunc(0, 5),
                              SizedBox(
                                height: 6,
                              ),
                              rowfunc(5, 10),
                              SizedBox(
                                height: 15,
                              ),
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment:
                                    MainAxisAlignment.spaceEvenly,
                                children: [
                                  for (int i = 10; i < 12; i  ) rowWidget(i),
                                  logoCard,
                                  for (int i = 12; i < 14; i  ) rowWidget(i),
                                ],
                              ),
                              SizedBox(
                                height: 20,
                              ),
                              rowfunc(14, 19),
                              rowfunc(19, 24),
                              // rowfunc(23, 24),
                            ])

This is rowWidget :

rowWidget(index) {
      return card(index);
    }

This is rowfunc :

rowfunc(int start, end) {
      return Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          for (int i = start; i < end; i  )
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
              child: card(i),
            ),

          // for (int i = start; i < end; i  ) rowWidget(i),
        ],
      );
    }

Why i used two of them is bcoz i have 24 cards and at index 12 i have to add a logo. I dont have to blur this but again its getting blurred, i can't decipher how. I think the blur which should go to the card at index 23 is getting to my logo. So my requirement is straight NOT to blur my logo but every other card. Plus using backdrop filter to blur cards is making this very page lag. IS there any way to blur cards or how can we improve its efficiency? New to flutter... Thankyou

CodePudding user response：

I'm not familiar with flutter animations, but from a quick glance on documentation, you might miss a Clip widget in ancestor widget:

The filter will be applied to all the area within its parent or ancestor widget's clip. If there's no clip, the filter will be applied to the full screen.

Refer here.

Stack(
  fit: StackFit.expand,
  children: <Widget>[
    Text('0' * 10000),
    Center(
      child: ClipRect(  // <-- clips to the 200x200 [Container] below
        child: BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Container(
            alignment: Alignment.center,
            width: 200.0,
            height: 200.0,
            child: const Text('Hello World'),
          ),
        ),
      ),
    ),
  ],
)

,so to summarise, try this:

 for (int i = start; i < end; i  )
     ClipRect(
         child:BackdropFilter(
             filter: ImageFilter.blur(sigmaX: 1.0, sigmaY: 1.0),
             child: card(I),
         ),
     ),