Flutter comment dessiner un demi-cercle (half circle)

Question

Comment puis-je dessiner un demi-cercle comme ceci ?

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

Answer 1

Créer un StatelessWidget dites MyArc qui accepte un diameter .

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, size.width / 2),
        height: size.height,
        width: size.width,
      ),
      math.pi,
      math.pi,
      false,
      paint,
    );
  }

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

Utilisation :

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

Answer 2

Avec une mise en œuvre simple( pas la meilleure)

vous pouvez dessiner 2 conteneurs ayant tous deux la même largeur et la même hauteur à l'intérieur d'une rangée et fournir une BoxDectoration pour chaque conteneur => BorderRadius comme le code suivant, ce n'est pas la meilleure implémentation, mais elle fonctionne simplement.

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

], ),