Masked Blur for Image - flutter

Question

I would like to implement the effect shown below in which most parts of an image are blurred and only the interesting part of the image is shown crisp (with a border).
I am not sure how to implement the effect and would like to consider your ideas. Blurring the image is not the problem (i am doing it as described here), but leaving a part of the image non-blurred is quite a challenge. I thought about layering two images (one blurred and one non-blurred) over each other. However that will not work because then the blurred image will cast a shadow over the cutout section.
I also tried to use a CustomPainter, however i failed to get the blur working.

Answer 1

This is how you can do it , The idea is to make CustomClipper to invert the behavior of the BackDropFilter.
import 'dart:ui';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SizedBox(
height: 250,
child: Stack(
children: <Widget>[
Center(
child: Image.network(
'https://cdn-prod.medicalnewstoday.com/content/images/articles/322/322736/elephant-from-the-front.jpg')),
Center(
child: ClipPath(
clipper: InvertedRect(),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
color: Colors.transparent,
),
),
),
),
],
),
),
);
}
}
class InvertedRect extends CustomClipper<Path> {
#override
getClip(Size size) {
print(size);
return Path()
..addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
..addRect(Rect.fromLTWH(100.0, 40.0, 100, 100))
..fillType = PathFillType.evenOdd;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}