如何使用自定義繪畫在 Flutter 中繪制弧線？

Question

我需要使用自定義繪畫在 Flutter 中創建這樣的圖像：

我有以下代碼：

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

誰能幫我做這個？

Answer 1

試試這個：

class Moon擴展了 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;
}

采用：

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