How to make ring using Custom Clipper in Flutter?

Question

i'am trying to make circle with a hole in center of the widget by using custom clipper in flutter but i'ts not working, and i don't know how to make it works.

so the result like this, like a ring with empty in center of the widget.

import 'package:flutter/material.dart';

class View_Test extends StatefulWidget {
  @override
  _View_TestState createState() => _View_TestState();
}

class _View_TestState extends State<View_Test> {
  double y = 200;
  double x = 100;
  double w = 10; 

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    double width = MediaQuery.of(context).size.width;

    return Scaffold(
    appBar: AppBar(
      title: Text("test"),
    ),
    body: Container(
        height: height,
        width: width,
        color: Colors.yellow,
        child: Center(
            child: ClipPath(
                clipper: Clip(x: x, y: y, w: w),
                child: Container(
                  color: Colors.grey,
                  height: y,
                  width: x,
                )))));
  }
}

class Clip extends CustomClipper<Path> {
  double x;
  double y;
  double w;
  Clip({this.x, this.y, this.w});

  @override
    Path getClip(Size size) {
    var path = Path();
    var rect = Rect.fromLTRB(0, 0, x, y);
    path.addOval(rect);
    var rect2 = Rect.fromLTRB(0 + w, 0 + w, x - w, y - w);
    path.addOval(rect2);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

this is my code. please help me.

Answer 1

its working, this is the code.

class Clip extends CustomClipper<Path> {
  double x;
  double y;
  double w;
  Clip({this.x, this.y, this.w});

  @override
  Path getClip(Size size) {
    var path = Path();
    var rect = Rect.fromLTRB(0, 0, x, y);
    path.addOval(rect);
    path.fillType = PathFillType.evenOdd;
    var rect2 = Rect.fromLTRB(0 + w, 0 + w, x - w, y - w);
    path.addOval(rect2);
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }
}

result