颤振：倒置ClipOval

我是Flutter的新手，我正在尝试编写一个库，以允许用户平移/缩放其个人资料图片。

为了使其可视化，我想将它们的图片与“反转的” ClipOval堆叠起来以显示边界。

到目前为止，这是我获得的结果：

这显示了边界，但是这不是用户友好的，我想“反转” ClipOval，以使剪辑的中心“清晰”，而外部则变灰（类似于蒙版）。

有什么办法可以做到这一点？

这是我到目前为止的代码（部分代码来自flutter_zoomable_image）：

import 'dart:ui' as ui;
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class ImagePanner extends StatefulWidget {
  ImagePanner(this.image, {Key key}) : super(key: key);

  /// The image to be panned
  final ImageProvider image;

  @override
  _ImagePannerState createState() => new _ImagePannerState();
}

class _ImagePannerState extends State<ImagePanner> {
  ImageStream _imageStream;
  ui.Image _image;
  double _zoom = 1.0;
  Offset _offset = Offset.zero;
  double _scale = 16.0;

  @override
  void didChangeDependencies() {
    _resolveImage();
    super.didChangeDependencies();
  }

  @override
  void reassemble() {
    _resolveImage();
    super.reassemble();
  }

  @override
  Widget build(BuildContext context) {
    if (_image == null) {
      return new Container();
    }
    return new Container(
      width: double.INFINITY,
      color: Colors.amber,
      child: new Padding(
          padding: new EdgeInsets.all(50.0),
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new AspectRatio(
                aspectRatio: 1.0,
                child: new Stack(
                  children: [
                    _child(),
                    new Opacity(
                      opacity: 0.5,
                      child: new ClipOval(
                        child: new Container(
                          color: Colors.black,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          )),
    );
  }


  Widget _child() {
    Widget bloated = new CustomPaint(
      child: new Container(),
      painter: new _ImagePainter(
        image: _image,
        offset: _offset,
        zoom: _zoom / _scale,
      ),
    );

    bloated = new Stack(
      children: [
        new Container(
        ),
        bloated
      ],
    );

    return new Transform(
        transform: new Matrix4.diagonal3Values(_scale, _scale, _scale),
        child: bloated);
  }

  void _resolveImage() {
    _imageStream = widget.image.resolve(createLocalImageConfiguration(context));
    _imageStream.addListener(_handleImageLoaded);
  }

  void _handleImageLoaded(ImageInfo info, bool synchronousCall) {
    print("image loaded: $info $synchronousCall");
    setState(() {
      _image = info.image;
    });
  }
}

class _ImagePainter extends CustomPainter {
  const _ImagePainter({this.image, this.offset, this.zoom});

  final ui.Image image;
  final Offset offset;
  final double zoom;

  @override
  void paint(Canvas canvas, Size size) {
    paintImage(canvas: canvas, rect: offset & (size * zoom), image: image);
  }

  @override
  bool shouldRepaint(_ImagePainter old) {
    return old.image != image || old.offset != offset || old.zoom != zoom;
  }
}

The outcome I would like to obtain is the following so that users will directly see the boundaries and will be able to center, pan, zoom their profile picture INSIDE the oval.

(I made this via Photoshop, since I don't know how to achieve this with Flutter)

Many thanks for your help.