How to implement blurred background Bottom Modal Sheet in Flutter?

Question

I am doing one project and for that I want to have a bottom sheet with blurred image background. For this I've implemented this code which works fine but have one problem.

  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.33,
      child: Stack(
        overflow: Overflow.visible,
        fit: StackFit.expand,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.25,
            decoration: new BoxDecoration(
                image: new DecorationImage(
              image: new AssetImage("assets/images/bookshelf.jpg"),
              fit: BoxFit.cover,
            )),
          ),
          Positioned(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height * 0.25,
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
              child: Container(color: Colors.white.withOpacity(0)),
            ),
          ),
        ],
      ),
    );
  }

Output is this: It is blurring whole screen but I want to blur just in modal sheet. What's my problem? I am new to flutter so don't know much things about it. Please help me with this.

Answer 1

Here is your solution,

 showModalBottomSheet(
              context: context,
              clipBehavior: Clip.antiAlias,
              builder: (context){
                return Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage("assets/images/bookshelf.jpg"),
                    ),
                  ),
                  child: BackdropFilter(
                    filter: ImageFilter.blur(sigmaX: 3, sigmaY: 3),
                    child: Center(
                      child: Text('welcome'),
                    ),
                  ),
                );
              }
          );