صميم شكل بحواف دائرية باستخدام ال path & clippers or custom painting في flutter

عليك أولاً  إنشاء Path:

Path path = Path();
path.moveTo(0, 0); // نقطة البداية
path.lineTo(100, 0); // الخط الأفقي
path.quadraticBezierTo(120, 20, 100, 40); // المنحنى الرباعي
path.lineTo(0, 40); // الخط الأفقي
path.quadraticBezierTo(20, 20, 0, 0); // المنحنى الرباعي
path.close(); // أغلاق المسار

quadraticBezierTo هو  لرسم الزوايا المنحنية.

ثم إنشاء مقصّ Clipper:

class CustomClipper extends CustomClipper<Rect> {
  @override
  Path getClip(Size size) {
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Rect> oldClipper) {
    return true;
  }
}

بعد ذلك استخدام Clipper مع عنصر Widget:

ClipPath(
  clipper: CustomClipper(),
  child: Container(
    width: 100,
    height: 40,
    color: Colors.pink,
  ),
),

من خلال تعديل قيم moveTo, lineTo, و quadraticBezierTo تستطيع تغيير أبعاد وموقع الشكل، وتغيير لون Container لتغيير لون الشكل.

أو مباشرًة من خلال Custom Painting لإنشاء الشكل المطلوب كالتالي:

class RoundedRectangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    // تحديد نصف قطر الزوايا
    const double radius = 30.0;

    path.moveTo(radius, 0);
    path.lineTo(size.width - radius, 0);
    path.quadraticBezierTo(size.width, 0, size.width, radius);
    path.lineTo(size.width, size.height - radius);
    path.quadraticBezierTo(size.width, size.height, size.width - radius, size.height);
    path.lineTo(radius, size.height);
    path.quadraticBezierTo(0, size.height, 0, size.height - radius);
    path.lineTo(0, radius);
    path.quadraticBezierTo(0, 0, radius, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

ثم استخدام CustomPainter في Widget:

ClipPath(
  clipper: RoundedRectangleClipper(),
  child: Container(
    width: 162.52,
    height: 240.85,
    decoration: BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
        colors: [Colors.green, Colors.pink],
      ),
    ),
  ),
)

تستطيع تعديل قيمة radius في RoundedRectangleClipper للتحكم في نصف قطر الزوايا.

لكن الشكل هذا مستطيل الشكل المرفق بالصوره غير