0

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(),
              ),
            )
          ],
        )));
Kavishka Rajapakshe
  • 537
  • 1
  • 8
  • 23
  • you need a `ClipPath`, not `CustomPaint` - in your case the child of `ClipPath` would be `Image.asset` / `Image.network` etc – pskink May 02 '22 at 08:28
  • Although not an answer to your question... since you will surely not hand-paint the hand and sale sign in a custompaint in flutter, why not just include the golden circle in the picture you will need to use anyway? – nvoigt May 02 '22 at 08:52

1 Answers1

1

You can use ArcShape using the shape_of_view package.

ShapeOfView(
  shape: ArcShape(
    direction: ArcDirection.Outside,
    height: 20,
    position: ArcPosition.Bottom
  ),
  child: ...
)
M Karimi
  • 1,991
  • 1
  • 17
  • 34