Flutter: Remove space between widgets

Question

By using CustomPainter i have created a half circle.Now i have this widget tree:

return Scaffold(
  body: Center(
    child: SingleChildScrollView(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Container(
            // card view
            height: 100,
            alignment: Alignment.center,
            margin: EdgeInsets.only(
                top: 20.0, bottom: 0.0, left: 50.0, right: 50.0),
            decoration: BoxDecoration(
              boxShadow: ([
                BoxShadow(
                  color: color_transparent_black,
                  spreadRadius: 5,
                  blurRadius: 3.0,
                  offset: Offset(2, 3),
                ),
              ]),
              borderRadius: BorderRadius.circular(14.0),
            ),),
            MyArc(diameter: 200),

This is MyArc:

class MyArc extends StatelessWidget {
  final double diameter;

  const MyArc({Key key, this.diameter = 200}) : super(key: key);

  @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, 0),
        height: size.height,
        width: size.width,
      ),
      6.4,
      2.9,
      false,
      paint,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

But i got this problem:

I don't want any space between gray and blue shape!!!

Answer 1

I finally figured it out...

import 'dart:math' as math;

//...

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint blue = Paint()..color = Colors.blue;

    canvas.translate(0, -size.height / 2);
    canvas.drawArc(
      Offset.zero & size,
      -math.pi,
      -math.pi,
      false,
      blue,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

If you want to make your canvas fit nicely also you can make it rectangular like so...

CustomPaint(
  painter: MyPainter(),
  size: Size(diamieter, diameter / 2),
)

Then have you custom painter as...

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint blue = Paint()..color = Colors.blue;
    Paint red = Paint()..color = Colors.red;

    canvas.drawRect(Offset.zero & size, red);

    canvas.translate(0, -size.height);
    canvas.drawArc(
      Offset.zero & Size(size.width, size.height * 2),
      -math.pi,
      -math.pi,
      false,
      blue,
    );
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

It'll fit snug this way...

Answer 2

try changing the spreadRadius to 3.0 Its possible that it's creating a boundary greater than the container's Blur Radius boundary.

BoxShadow( color: color_transparent_black, spreadRadius: 5, blurRadius: 3.0, offset: Offset(2, 3), ),