How can I create a Half Circle without Spacing in Flutter

Question

I want to create a half Circle at the bottom. But theres some space which I cant delete. // Flutter

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

Mohamed Sayed · Answer 1 · 2021-05-11T15:53:45.140

11

why not going the easy way
something like this

Container(
    height: 30,
    width: 50,
    color: Colors.transparent,
    child: new Container(
        decoration: new BoxDecoration(
            color: Colors.black,
            borderRadius: new BorderRadius.only(
                topLeft: const Radius.circular(40.0),
                topRight: const Radius.circular(40.0),
            ),
        ),
    ),
),

edited May 11 '21 at 15:53

answered Sep 09 '19 at 13:14

Mohamed Sayed

844
5
15

Simple solution, Thank you – Azhar Ali May 21 '21 at 07:49

Kailash Chouhan · Accepted Answer · 2019-09-09T13:36:15.210

You can easily achieve this view using ArcView link. See attached image

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Row(
          children: <Widget>[
            Align(
              alignment: Alignment.bottomCenter,
              child: Arc(
                arcType: ArcType.CONVEX,
                edge: Edge.TOP,
                height: 70.0,
                clipShadows: [ClipShadow(color: Colors.black)],
                child: new Container(
                  height: 70,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.lime,
                ),
              ),
            ),
          ],
        ),
      ),
    );
}

Or create a custom clipper

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

Use Above class as shown below

new ClipPath(
          clipper: new CustomHalfCircleClipper(),
          child: new Container(
            height: MediaQuery.of(context).size.width,
            width: MediaQuery.of(context).size.width,
            decoration: new BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(
                  MediaQuery.of(context).size.width / 2),
            ),
          ),
        )

How can I create a Half Circle without Spacing in Flutter

2 Answers2