flutterdartgeometrycustom-painterflutter-custompaint

How to show a part of the circle using custom painter?


So I have this card widget to create enter image description here

how can I create the golden part of the circle using custom painter?.I can create a full circle but how can I just display that small part of the circle and hide the rest?

Card(
        color: Colors.grey,
        child: Row(
          children: [
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Container(
                      width: MediaQuery.of(context).size.width * 0.4,
                      child: Text(
                          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cursus sed eros ullamcorper.")),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text("*Conditions Apply"),
                )
              ],
            ),
            Container(
              color: Colors.pink,
              width: 200,
              height: 300,
              child: CustomPaint(
                painter: ArcPainter(),
              ),
            )
          ],
        )));

Solution

  • You can use ArcShape using the shape_of_view package.

    ShapeOfView(
      shape: ArcShape(
        direction: ArcDirection.Outside,
        height: 20,
        position: ArcPosition.Bottom
      ),
      child: ...
    )