How to add background blur overlay to image?

Question

I want to have a background overlay blur on a image if it is rectangular. Like if the image sides are of brown color it should have brown blur background to support its sides. Likewise if it has grey sides it should have grey blur background.

This is what i want to achieve

One more example

Pls help...

Answer 1

ClipRect(
              child: BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    color: Colors.grey.shade200.withOpacity(0.5)
                  ),
                  child: Center(
                    child: Text(
                      'Blue Image',
                    ),
                  ),
                ),
              ),
            ),