图像蒙版模糊

Question

我想实现如下所示的效果，其中图像的大部分部分被模糊，只有图像中有趣的部分显示清晰（带边框）。

我不确定如何实现效果，并想考虑您的想法。模糊图像不是问题（我正在按照here 的描述进行操作），但是让图像的一部分不模糊是一个很大的挑战。我考虑过将两张图像（一张模糊，一张非模糊）叠加在一起。但是，这将不起作用，因为模糊的图像会在剪切部分上投下阴影。

我也尝试使用 CustomPainter，但是我无法让模糊效果正常。

Answer 1

这个是怎么做的，想法是让CustomClipper反转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;
}