如何使用自定义绘画在 Flutter 中绘制弧线？

Question

I need to create image like this in Flutter using custom painting:

I have the following code:

Center(
    child: CustomPaint(
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
      ),
  painter: CustomWave(),
))

Can anyone help me to do this?

Answer 1

Try this:

class Moon extends CustomPainter:

import 'package:flutter/material.dart';

class Moon extends CustomPainter {
  final double width;
  Moon({required this.width});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.orange
      ..strokeWidth = 2
      ..style = PaintingStyle.fill
      ..strokeCap = StrokeCap.round;
    Path path = Path();
   path.arcToPoint(Offset(width, 0), radius: Radius.circular(width + 200)); //change the radius as you like
    path.arcToPoint(const Offset(0, 0), radius: Radius.circular(width - 60), clockwise: false); //change the radius as you like
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(Moon oldDelegate) => false;

  @override
  bool shouldRebuildSemantics(Moon oldDelegate) => false;
}

use:

@override
Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: CustomPaint(
          painter: Moon(width: MediaQuery.of(context).size.width),
          child: SizedBox(
            width: MediaQuery.of(context).size.width,
            height: 50,
          ),
        ),
      ),
    );
  }