Search code examples
flutterflutter-layout

Flutter how to draw semicircle (half circle)


How can I draw semicircle like this?

enter image description here

Code:

class DrawHalfCircleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = new Path();
    ...
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return true;
  }

Solution

  • Create a StatelessWidget say MyArc which accepts a diameter.

    import 'dart:math' as math;
    
    class MyArc extends StatelessWidget {
      final double diameter;
    
      const MyArc({super.key, this.diameter = 200});
    
      @override
      Widget build(BuildContext context) {
        return CustomPaint(
          painter: MyPainter(),
          size: Size(diameter, diameter),
        );
      }
    }
    
    
    // This is the Painter class
    class MyPainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        Paint paint = Paint()..color = Colors.blue;
        canvas.drawArc(
          Rect.fromCenter(
            center: Offset(size.height / 2, size.width / 2),
            height: size.height,
            width: size.width,
          ),
          math.pi,
          math.pi,
          false,
          paint,
        );
      }
    
      @override
      bool shouldRepaint(CustomPainter oldDelegate) => false;
    }
    

    Usage:

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(),
        body: MyArc(diameter: 300),
      );
    }