شرح استخدام ويدجت CustomPaint في فلاتر

يوفر Flutter العديد من العناصر الواجهة لبناء واجهات المستخدم الديناميكية، ولكن قد يكون من الصعب تحديد شكل أو رسم معين. هنا يأتي دور CustomPaint في Flutter، والذي يسمح للمطورين بإنشاء أشكال ورسومات مخصصة وعرضها في واجهة المستخدم.

ما هو CustomPaint؟

CustomPaint هو عنصر واجهة Flutter يسمح للمطورين برسم الشكل والرسومات المخصصة في واجهة المستخدم. يمكن استخدام CustomPaint لإنشاء أشكال مخصصة ورسومات مستوحاة من الفن وعرضها في التطبيق. يمكن استخدام CustomPaint في تطبيقات Flutter لتحسين جودة التصميم وتوفير تجربة مستخدم أفضل.

“اقرأ أيضاً: شرح استخدام ويدجت ClipRect في فلاتر“

خصائص CustomPaint

تحتوي CustomPaint على مجموعة من الخصائص التي يمكن تعيينها لتحديد سلوك العنصر. يتم تفصيل الخصائص في الأسفل:

painter

تحدد الرسام (Painter) الذي يتم استخدامه لرسم الشكل أو الرسم المخصص. يمكن تعيين هذه الخاصية عبر الكود التالي:

painter: MyPainter(),

“اقرأ أيضاً: شرح استخدام ويدجت Offstage في فلاتر“

size

حجم العنصر الذي يتم رسم الشكل أو الرسم المخصص عليه. يمكن تعيين هذه الخاصية عبر الكود التالي:

size: Size(200, 200),

isComplex

تحدد ما إذا كان الرسم المخصص يحتوي على عناصر معقدة. يمكن تعيين هذه الخاصية عبر الكود التالي:

isComplex: true,

willChange

تحدد ما إذا كان الرسم المخصص سيتغير بين عمليات الإعادة الإنشاء. يمكن تعيين هذه الخاصية عبر الكود التالي:

willChange: true,

مثال على استخدام CustomPaint في Flutter

هذا مثال بسيط على كيفية استخدام CustomPaint في تطبيق فلاتر:

في الملف الرئيسي للتطبيق، ننشئ StatefulWidget الخاص بنا:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Custom Paint Example')),
      body: Center(child: MyCustomPaint()),
    );
  }
}

ثم ننشئ CustomPainter الخاص بنا ونستخدمه في CustomPaint:

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

    canvas.drawLine(
      Offset.zero,
      Offset(size.width, size.height),
      paint,
    );
  }

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

class MyCustomPaint extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(200, 200),
      painter: MyCustomPainter(),
    );
  }
}

في هذا المثال، يتم استخدام CustomPaint لإنشاء عنصر واجهة مستخدم يمكن استخدامه في رسم الرسومات المخصصة. يتم تحديد الرسام المخصص (MyCustomPainter) باستخدام CustomPainter، ويتم رسم خط بسيط بلون أزرق في وسط العنصر المخصص. يتم تمرير حجم العنصر المخصص (200×200) إلى CustomPaint باستخدام size.

ولرسم دائرة استخدام هذة الكود:

canvas.drawCircle(
  Offset(100, 100),
  100,
  paint,
);

“اقرأ أيضاً: شرح استخدام ويدجت TextButton في فلاتر“

CustomPaint هو أداة قوية في Flutter لإنشاء الشكل والرسومات المخصصة. يمكن استخدام CustomPaint لإضافة جمال وتفاصيل إلى تطبيقات Flutter الخاصة بك. يتميز CustomPaint بمجموعة من الخصائص التي تتيح للمطورين تحديد سلوك العنصر والتحكم فيه. يمكن استخدام الأمثلة السابقة لإنشاء CustomPaint في تطبيقات Flutter الخاصة بك.