Quarter circle shape with a container in flutter

Question

I want to have a container with a quarter circle shape, think of a quarter slice of a whole pizza.

How do I achieve this? Basically I want to place it on top of another container in the lower right location with the round part facing inward and the angle of course matching where the lower right corner form the bottom container is, using a stack widget.

Thanks.

Answer 1

It will be very easy to use Container for creating Quarter-circle. Just create a Container with equal height and width . Use borderRadius: BorderRadius.only() property and set radius for any one side with same height

Sample code:

 Container(
    width: 50,
    height: 50,
    decoration: const BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(50),
      ),
    ),
  )

Answer 2

You can use CustomPainter combined with ClipRect to draw a circle and crop it.

enum CircleAlignment {
  topLeft,
  topRight,
  bottomLeft,
  bottomRight,
}

class QuarterCircle extends StatelessWidget {
  final CircleAlignment circleAlignment;
  final Color color;

  const QuarterCircle({
    this.color = Colors.grey,
    this.circleAlignment = CircleAlignment.topLeft,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox.expand(
      child: ClipRect(
        child: CustomPaint(
          painter: QuarterCirclePainter(
            circleAlignment: circleAlignment,
            color: color,
          ),
        ),
      ),
    );
  }
}

class QuarterCirclePainter extends CustomPainter {
  final CircleAlignment circleAlignment;
  final Color color;

  const QuarterCirclePainter({this.circleAlignment, this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final radius = math.min(size.height, size.width);
    final offset = circleAlignment == CircleAlignment.topLeft
        ? Offset(.0, .0)
        : circleAlignment == CircleAlignment.topRight
            ? Offset(size.width, .0)
            : circleAlignment == CircleAlignment.bottomLeft
                ? Offset(.0, size.height)
                : Offset(size.width, size.height);
    canvas.drawCircle(offset, radius, Paint()..color = color);
  }

  @override
  bool shouldRepaint(QuarterCirclePainter oldDelegate) {
    return color == oldDelegate.color &&
        circleAlignment == oldDelegate.circleAlignment;
  }
}

which you can use by doing

QuarterCircle(
  circleAlignment: CircleAlignment.bottomLeft,
),