أسرار الـ Custom Paint في Flutter: ارسم كل اللي تتخيله بإيدك

أكيد مريت باللحظة دي في شغلك بـ Flutter: بيجيلك تصميم من الـ Designer فيه شكل هندسي معقد، أو انيميشن (Animation) مخصص، أو رسم بياني (Graph) مش موجود في الـ Widgets الجاهزة. بتقعد تدور في الـ Pub.dev ساعات وفي الآخر مفيش حاجة بتركب على دماغك، أو بتلاقي مكتبة تقيلة بتبوظ الأداء. هنا بيجي دور الـ Custom Paint، الأداة اللي بتخليك ترسم حرفياً أي حاجة على الشاشة باستخدام الـ Canvas.

يعني إيه Custom Paint وليه محتاجه؟

الـ Custom Paint مش مجرد Widget عادية، ده كلاس بيسمحلك تتحكم في كل بكسل (Pixel) في المساحة المخصصة ليك. بدل ما تعتمد على الـ Containers والـ Rows والـ Columns، إنت هنا بتتعامل مع لغة الرسم المباشر (Low-level rendering). الـ Canvas هو اللوحة البيضاء، والـ Painter هو الفرشاة بتاعتك.

الأدوات الأساسية اللي لازم تعرفها

عشان تبدأ ترسم، لازم تفهم 3 حاجات أساسية:

• الـ CustomPainter: ده الكلاس اللي بتورث منه عشان تكتب منطق الرسم بتاعك.
• الـ Canvas: اللوحة اللي بترسم عليها، وفيها ميثودز زي drawLine و drawRect و drawPath.
• الـ Paint: ده "صندوق الألوان" بتاعك، اللي بتحدد فيه لون الخط، السمك (Stroke width)، هل الشكل مليان (Fill) ولا مفرغ، وهكذا.

ازاي ترسم أول Path خاص بيك؟

الـ Path هو أهم أداة لو عايز ترسم أشكال مش منتظمة. تخيل إنك ماسك قلم وبتحدد نقط على الشاشة وبتمشي بينهم. شوف الكود ده مثال بسيط لرسم مثلث:

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.blue
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke;

    final path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);
    path.close();

    canvas.drawPath(path, paint);
  }

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

الاحتراف في الـ Custom Paint

السر الحقيقي مش في الرسم الثابت، السر في الربط بين الـ AnimationController والـ CustomPainter. لما بتعمل انيميشن، الـ Flutter بيعمل Re-build للـ Widget، فبالتالي الـ paint ميثود بتستدعي تاني وبترسم الشكل في وضع جديد، وده اللي بيخليك تعمل رسومات بيانية بتتحرك أو تأثيرات بصرية (Visual Effects) مذهلة.

نصيحة من أخ لمبرمج

الـ Custom Paint قوة كبيرة، بس زي ما بيقولوا "القوة الكبيرة بتجيب مسؤولية كبيرة". بلاش تبالغ في استخدامه في حاجات ممكن الـ Widgets العادية تعملها، لأن الـ Layout العادية بتتعمل لها Optimizations من الـ Flutter Engine. استخدم الـ Custom Paint لما يكون فعلاً ده الحل الوحيد أو الأمثل للأداء. اتعلم الرياضيات البسيطة (Trigonometry) هتحتاجها كتير لو عايز ترسم منحنيات (Curves) أو رسومات دائرية.

ابدأ بمشروع صغير، ارسم ساعة تناظرية، أو شريط تقدم (Progress Bar) بشكل مختلف، هتلاقي نفسك دخلت عالم تاني من الإبداع في البرمجة.