Flutter: draw half circle

Question

How to draw a half circle like this? please, i don`t want a Container widget and change its radius

use custom painter or clipper – diegoveloper Mar 01 '19 at 03:59 — diegoveloper, Mar 01 '19 at 03:59
yeah i know. i tried to do so but i couldn`t achieve it – M.Ali Mar 01 '19 at 14:28 — M.Ali, Mar 01 '19 at 14:28

score 3 · Answer 1 · answered Mar 04 '19 at 20:51

I don't understand what you mean in " i don`t want a Container widget and change its radius", but here is my way to create a half circle:

class Test extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return new Scaffold(
          body: new Container(
            padding: EdgeInsets.all(64.0),
            child: new Column(
              children: <Widget>[
                new ClipPath(
                  clipper: new CustomHalfCircleClipper(),
                  child: new Container(
                    height: 300.0,
                    width: 300.0,
                    decoration: new BoxDecoration(color: Colors.blue, borderRadius: BorderRadius.circular(150.0) ),
                  ),
                )
              ],
            ),
          ),
        );
      }
    }

    class CustomHalfCircleClipper extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        final Path path = new Path();
        path.lineTo(0.0, size.height / 2);
        path.lineTo(size.width, size.height / 2);
        path.lineTo(size.width, 0);
        return path;
      }
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return true;
      }
    }

unfortunately, if i set the the height to a lower value it will be flattened. in your solution i must maintain width and height ratio — M.Ali, Mar 05 '19 at 00:40

Saeed All Gharaee · Answer 2 · 2021-08-09T05:29:06.390

0

You only need a Container, EASY PEASY:

Container(
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100),
              topLeft: Radius.circular(100)),
         color: Colors.red,
         shape: BoxShape.rectangle,
     ),
     height: 35,
     width: 35,
),

edited Aug 09 '21 at 05:29

answered Jul 28 '21 at 04:54

Saeed All Gharaee

1,546
1
14
27

score 0 · Answer 3 · answered Mar 09 '22 at 13:49

Consider taking a look at this package: flutter_custom_clippers

They have several different types of clipping and the one you might be looking for is the OvalBottomBorderClip or OvalTopBorderClip.

Also, you can take a look on their code (and maths) to create your own.

score -1 · Answer 4 · answered Nov 04 '19 at 17:14

you can use CustomPainter.

class HalfCircle extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {

    canvas.drawArc(Rect.fromCircle(center:Offset(size.width/2,size.height/2),radius: 97), 3.14, 3.14, false, customPaint());
    canvas.drawPath(getTrianglePath(size,20, 15), customPaint());
  }

  Path getTrianglePath(Size size,double x, double y) {
    return Path()
      ..moveTo(size.width/2, 0)
      ..lineTo(size.width/2+x, y)
      ..lineTo(size.width/2, y)
      ..lineTo(size.width/2-x, y);
  }

  Paint customPaint(){
    Paint paint = Paint();
    paint.color = Color(0xff2EA760);
    paint.isAntiAlias = true;
    paint.strokeWidth = 10;
    return paint;
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }

}

it is a triangle , not a half circle – mohammad May 06 '20 at 07:00 — mohammad, May 06 '20 at 07:00

Flutter: draw half circle

4 Answers4