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

309 views Asked by At

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(),
              ),
            )
          ],
        )));
1

There are 1 answers

0
M Karimi On BEST ANSWER

You can use ArcShape using the shape_of_view package.

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