I tried to blur the widgets inside the container, but i am getting the result as expected. Please check the code and image below.

ClipRRect(
                              child: BackdropFilter(
                                filter: ImageFilter.blur(sigmaX: 5,sigmaY: 5),
                                child: Padding(
                                    padding: const EdgeInsets.symmetric(vertical: 10),
                                    child: Column(
                                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                      children: <Widget>[
                                        SvgPicture.asset('assets/svg/debit_account.svg', width: 50),
                                        Container(
                                          width: selectedWidthInActive * 0.6,
                                          decoration: BoxDecoration(
                                            color: Colors.white.withOpacity(0.75),
                                            borderRadius: BorderRadius.all(Radius.circular(20)),
                                          ),
                                          child: Padding(
                                            padding: const EdgeInsets.symmetric(vertical: 5, horizontal: 10),
                                            child: Text(
                                              'Savings',
                                              style: TextStyle(fontSize: 13, fontFamily: 'Gilroy Medium'),
                                              textAlign: TextAlign.center,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                              ),
                            )

But the expected output is

Can anyone please help me to achieve this.

CodePudding user response：

The child of backdrop filter ignores the filter. You should try adding it in a stack with its first child as your card and second child as the filter

import 'dart:ui' as ui;
Stack(
      
      children: [
        child,//your card here
        BackdropFilter(
          filter: ui.ImageFilter.blur(
            sigmaX: 5.0,
            sigmaY: 5.0,
          ),
          child: Container(
            color: Colors.transparent,
          ),
        )
      ],
    )