Flutter how to draw semicircle (half circle)

Question

How can I draw semicircle like this?

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;
  }

CopsOnRoad · Accepted Answer · 2022-11-22T18:20:38.087

35

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

edited Nov 22 '22 at 18:20

answered Sep 01 '19 at 18:25

CopsOnRoad

237,138
77
654
440

how do we add a ```LinearGradient``` as a color to the paint class? – user2511882 Feb 01 '20 at 17:05
2

You need to use `Shader` on the `Paint` object. – CopsOnRoad Feb 02 '20 at 02:17
Any idea as to how I can flip this so that the rounded side is downwards ?? – L.Goyal Nov 21 '22 at 10:36
@L.Goyal In the third parameter of `drawArc`, use `-math.pi`. – CopsOnRoad Nov 22 '22 at 18:20

score 11 · Answer 2 · edited Sep 15 '21 at 05:43

11

Container(
    decoration: const BoxDecoration(
      color: Colors.black,
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(100),
        bottomRight: Radius.circular(100),
      ),

With this code you can make a half circle.

edited Sep 15 '21 at 05:43

Ruli

2,592
12
30
40

answered Sep 15 '21 at 02:28

sandwhale

145
1
5

1

you MUST reformat your code before send it here – DolDurma Sep 15 '21 at 03:30
1

sorry i am new at this – sandwhale Sep 15 '21 at 04:06
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 15 '21 at 04:20
thank you thank you – sandwhale Oct 21 '21 at 04:40
please sir fix the code. many reports came in shows that people suffered from cancer and diabetes just by looking at it – stackunderflow Jan 15 '23 at 05:38

score 5 · Answer 3 · answered Nov 06 '21 at 23:03

create a class that extends from CustomClipper and use the arcToPoint method to draw the circle and use the ClipPath widget, here is the code to implement that

ClipPath(
      clipper: CustomClip(),
      child: Container(
        width: 200,
        height: 100,
        color: Colors.blue,
      ),
    ),

    class CustomClip extends CustomClipper<Path> {
      @override
      Path getClip(Size size) {
        double radius = 100;
    
        Path path = Path();
        path
          ..moveTo(size.width / 2, 0)
          ..arcToPoint(Offset(size.width, size.height),
              radius: Radius.circular(radius))
          ..lineTo(0, size.height)
          ..arcToPoint(
            Offset(size.width / 2, 0),
            radius: Radius.circular(radius),
          )
          ..close();
    
        return path;
      }
    
      @override
      bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
        return true;
      }
    }

score 3 · Answer 4 · answered May 23 '21 at 14:48

with a simple implementation( not the best)

you can draw 2 container both have same width and height inside a row and provide a BoxDectoration for each container => BorderRadius as the following code, this is not the best implementation , it just works

Row(children: [

          Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topRight: Radius.circular(200),),
            color: Colors.blue[300],
            ),
            width: 200,
            height: 200,
            ),
            Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(topLeft: Radius.circular(200),),
            color: Colors.blue[300],
            ),
            width: 200,
            height: 200,
            )

], ),

make sure that the width = height = circular border radius – Mohammed Adel May 23 '21 at 14:53 — Mohammed Adel, May 23 '21 at 14:53

Saeed All Gharaee · Answer 5 · 2021-12-12T07:18:31.043

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

Here is a simple code using Stack. You can easily generate a semicircle using a rectangle and a circle. Reshape the containers with BoxDecoration(shape:)

Stack(
   children: [
        Align(
           alignment: Alignment.center,
           child: Container(
                height: 35,
                          width: 35,
                          decoration: BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.circle,
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment.centerLeft,
                        child: Container(
                          decoration: BoxDecoration(
                            color: Colors.red,
                            shape: BoxShape.rectangle,
                          ),
                          height: 35,
                          width: 35,
                        ),
                      ),
                    ],
                  ),

score 0 · Answer 6 · answered Aug 24 '22 at 09:21

This will work, you can change the dimensions, but make sure the height is half the borderRadius and the width is equal to the borderRadius.

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

Flutter how to draw semicircle (half circle)

6 Answers6

Linked

Related