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.

Solution

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,
),

Comments

[Raul Marquez]

Tested it out in the default flutter create app, but I don't see it show up anywhere, am I missing something? I placed it on both the Column and directly as the scaffold body.

[Rémi Rousselet]

You need to give it a size. It won't magically know which size you want. Wrap it into a SizedBox or anything else

[Raul Marquez]

Now it worked, please edit post with implementation using a wrapper and I will mark as accepted answer. And thanks!

[Rémi Rousselet]

What do you mean by that ?

[Raul Marquez]

Below your "which you can use by doing" comment, wrap the QuarterCircle in your suggested SizedBox.

[Rémi Rousselet]

Might as well force it to expand. Done