RenderObject Tree: یہ کیا ہے، رینڈرنگ کے اصول اور Flutter میں اس کا کردار

Flutter میں RenderObject Tree کیا ہے?

RenderObject Tree رینڈر آبجیکٹس کا ایک درجہ بند چھتا ہے جو میموری میں انٹرفیس کی حقیقی نمائندگی کے طور پر کام کرتا ہے۔ ہر RenderObject اپنے سائز، سکرین پر مقام اور خود کو کیسے بنانا ہے جانتا ہے۔ وائجٹس کے برعکس، جو ہلکے ہیں اور سیکنڈ میں سوؤوں بار دوبارہ بنائے جا سکتے ہیں، RenderObject ایک بھاری آبجیکٹ ہے جس کی گرافکس پائپ لائن تک سیدھا رسائی ہے۔

کفگریشن سے رینڈرنگ تک

وائجٹ سے پکسلز تک کا سفر تین مراحل سے گزرتا ہے: Widget Tree بتاتا ہے کہ سکرین پر کیا ہونا چاہئے; Element Tree زندگی کے چکر کو منتظم کرتا ہے; RenderObject Tree حقیقی کام کرتا ہے۔ ہر RenderObjectWidget (جیسے Padding, Transform, CustomPaint) ایک RenderObject بناتا ہے جو رینڈر درخت میں شامل ہوتا ہے۔ RenderBox سب سے عام قسم کا RenderObject ہے، جو 99% معیاری وائجٹس میں استعمال ہوتا ہے۔

RenderObject کے فنیری چرچے

RenderObject ایک تجریدی کلاس ہے جو layout اور paint کے لیے انٹرفیس کی وضاحت کرتا ہے۔ اس میں والد RenderObject اور تحتی آبجیکٹس کے حوالے اور تجریدی طریقے (پرفارم لی آؤٹ، paint اور hitTest) شامل ہیں۔ ہر ٹھوس RenderObject اپنے رویہ کے مطابق ان طریقوں کو نفذ کرتا ہے: RenderFlex تحتی اجزا کے درمیان جگہ تقسیم کرتا ہے، RenderImage تصویر دکھاتا ہے، RenderParagraph متن تیار کرتا ہے۔

abstract class RenderObject {
  RenderObject? parent;
  Constraints constraints;
  ParentData? parentData;
  bool _needsLayout = true;
  bool _needsPaint = true;

  void performLayout();
  void paint(PaintingContext context, Offset offset);
}

اس سادہ چھٹے میں، RenderObject میں _needsLayout اور _needsPaint کے جھنڈے ہیں، جو آبجیکٹ کو اپ ڈیٹ کی ضرورت کے طور پر نشاندہ کرتے ہیں۔ جب Widget Tree بدلتا ہے، Element Tree متعلقہ RenderObjects کو layout یا paint کے لیے "گندہ" کے طور پر نشاندہ کرتا ہے، اور اگلی فریم پر Flutter صرف ضروری کارروائی کرتا ہے۔

RenderObject کے دو مراحل: layout اور paint

ہر RenderObject دو اہم مراحل کرتا ہے: layout (سائز اور مقام کا تعین) اور paint (ڈرائنگ)۔ یہ مراحل سخت ترتیب سے نفذ ہوتے ہیں: پہلے پورے درخت کے لیے layout، پھر paint۔ اگر layout نہیں بدلا ہے تو paint مرحلہ چھوڑا جا سکتا ہے، جس سے GPU وسائل بچتے ہیں۔

Layout مرحلہ: ریکابیں اور سائز

layout کے دوران Flutter RenderObject Tree کے ذریعے اوپر سے نیچے ریکابیں (constraints) منتقل کرتا ہے۔ ہر والد اپنے بچے کے لیے کم سے کم اور زیادہ سے زیادہ چوڑائی اور اونچائی متعین کرتا ہے۔ بچہ ان ریکابیوں کے اندر اپنا سائز متعین کرتا ہے اور والد کو واپس کرتا ہے۔ اس عمل کو "ڈاؤن ورڈ پاس" (ریکابیوں کو نیچے بھیجنا) اور "اپ ورڈ پاس" (سائز اوپر بھیجنا) کہا جاتا ہے۔

• BoxConstraints سب سے عام قسم کی ریکاب ہے: minWidth, maxWidth, minHeight, maxHeight۔
• SliverConstraints ScrollView میں ورچوالائزیشن کے لیے استعمال ہوتا ہے: یہ معیاری ریکابیوں میں سکرول کی معلومات شامل کرتا ہے۔
• RenderSliverMultiBoxAdaptor ورچوالائزڈ فہرستوں کے layout کو منتظم کرتا ہے، صرف نظر آنے والی اشیاء کے لیے RenderObjects بناتا ہے۔

Paint مرحلہ: سکرین پر نمائش

layout مکمل ہونے کے بعد Flutter paint کرتا ہے — ہر RenderObject کو خینچتا ہے۔ والد PaintingContext بناتا ہے، اسے تحتی آبجیکٹس کو دیتا ہے اور آفسیٹ (offset) متعین کرتا ہے۔ ہر RenderObject گرافکس پرائمٹو استعمال کرکے Canvas پر خود کو خینچتا ہے: مستطیلات، دائرے، متن، تصویریں اور تبدیلیاں۔ Canvas سیدھا Skia یا Impeller کے ساتھ باتچیت کرتا ہے۔

گندے نوڈ کا نشان لگانا

Flutter کام کو کم کرنے کے لیے "گندے" نوڈ کا مشینری استعمال کرتا ہے۔ جب صرف ایک RenderObject کا سائز بدلتا ہے، Flutter پورے درخت کے layout کو دوبارہ حساب نہیں کرتا — یہ بدلے ہوئے نوڈ اور اس کے ممکنہ اسلاف کو مقرر سائز کے قریب ترین RenderBox تک نشاندہ کرتا ہے۔ اسی طرح، جب ظاہر بدلتا ہے، layout کو دوبارہ کیئے بغیر صرف paint نشاندہ کیا جاتا ہے۔

Flutter میں RenderObject کی اقسام

Flutter مختلف کاموں کے لیے RenderObject کی کئی شرہیں فراہم کرتا ہے: معیاری مستطیل عناصر کے لیے RenderBox، سکرول کرنے قابل علاقوں کے لیے RenderSliver، اور CustomPainter کے ذریعے غیر معیاری رینڈرنگ کے لیے کسٹم RenderObjects۔ ہر قسم رینڈر درخت میں اپنے کردار کے لیے بہتر بنائی گئی ہے۔

RenderBox اور اس کے ذیل اقسام

RenderBox مستطیل انٹرفیس عناصر کے لیے بنیادی کلاس ہے۔ اس کے ذیل اقسام میں شامل ہیں: RenderPadding (پیڈنگ کا اضافہ)، RenderTransform (تبدیلیوں کا اطلاق)، RenderFlex (Row اور Column کا نفاذ)، RenderStack (عناصر کو سٹیک کرنا)، RenderImage (تصاویر کی نمائش)، RenderParagraph (متن کی تیاری)۔ ہر ذیل قسم اپنے منطق کے لیے performLayout اور paint کو ترجیح دیتا ہے۔

RenderSliver اور ورچوالائزیشن

RenderSliver سکرول کرنے قابل علاقوں کے ساتھ کام کرنے کے لیے ایک قسم کا RenderObject ہے۔ RenderBox کے برعکس، Sliver SliverConstraints استعمال کرتا ہے، جس میں ویوپورٹ کی معلومات شامل ہوتی ہے۔ RenderSliverList اور RenderSliverGrid صرف نظر آنے والے علاقے میں موجود اشیاء کے لیے RenderObjects بناتے ہیں، جس سے لاکھوں درجات پر مشتمل فہرستوں کو سنبھالا جا سکتا ہے۔

CustomPainter کے ذریعے کسٹم RenderObject

غیر معیاری گرافکس کے لیے، CustomPaint اور CustomPainter استعمال کریں۔ CustomPaint RenderCustomPaint بناتا ہے، جو CustomPainter کے paint طریقے کو کال کرتا ہے۔ یہ Canvas پر مکمل کنٹرول کے ساتھ من مانی اشکال، گراف اور اینیمیشن خینچنے کی اجازت دیتا ہے۔ Flutter ٹیم کے مطابق، پچیدہ ویکٹر گرافکس کے لیے CustomPainter ایک دوسرے کے اندر معیاری وائجٹس کے مقابلے میں زیادہ موثر ہے۔

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 3,
      paint,
    );
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

اس مثال میں، CirclePainter Canvas پر ایک دائرہ خینچتا ہے۔ shouldRepaint طریقہ صرف اس وقت true لوٹاتا ہے جب رنگ بدلتا ہے، جس سے غیر ضروری دوبارہ ڈرائنگ سے بچا جا سکتا ہے۔ CustomPainter جتنا ممکن ہو ہلکا ہونا چاہئے — تمام بھاری حساب paint طریقوں کے باہر کریں۔

RenderObject Tree Element Tree سے کیسے منسلک ہے

RenderObject Tree RenderObjectWidget میکنائزم کے ذریعے Element Tree سے بنایا جاتا ہے۔ ہر RenderObjectWidget (Padding, Transform, CustomPaint) ایک RenderObjectElement بناتا ہے، جو بدلے میں متعلقہ RenderObject کو بناتا اور منتظم کرتا ہے۔ عنصر ایک ثالث کا کام کرتا ہے: یہ وائجٹ سے RenderObject میں ترتیب منتقل کرتا ہے اور تبدیلیوں کے بارے میں RenderObject کو آگاہ کرتا ہے۔

ایک عنصر سے RenderObject بنانا

جب RenderObjectElement ماؤنٹ ہوتا ہے، یہ اپنے وائجٹ پر createRenderObject طریقہ کو کال کرتا ہے۔ وائجٹ ایک RenderObject انسٹنس بناتا ہے اور عنصر کو واپس کرتا ہے۔ عنصر والد RenderObject پر insertChildLayout طریقہ کو کال کرکے RenderObject کو RenderObject Tree میں داخل کرتا ہے۔ یہ عمل صرف پہلے ماؤنٹ پر ہوتا ہے — بعد کے اپ ڈیٹ میں، عنصر موجودہ RenderObject کے پیرامیٹرز کو صرف اپ ڈیٹ کرتا ہے۔

updateRenderObject کے ذریعے مطابقت

جب وائجٹ کی ترتیب بدلتی ہے (مثلاً، padding کی قیمت بدلتی ہے)، عنصر updateRenderObject طریقہ کو کال کرتا ہے، جو موجودہ RenderObject کو نئی ترتیب منتقل کرتا ہے۔ RenderObject خود کو layout یا paint کے لیے "گندہ" کے طور پر نشاندہ کرتا ہے، اور اگلی فریم پر فریم ورک ضروری اپ ڈیٹ کرتا ہے۔

RenderObject کو ہٹانا

جب ایک عنصر کو ان ماؤنٹ کیا جاتا ہے، unmount طریقہ کو بلایا جاتا ہے، جو RenderObject کو RenderObject Tree سے ہٹاتا ہے اور وسائل آزاد کرتا ہے۔ والد سے علاقہ توڑنے کے لیے RenderObject.remove کو بلایا جاتا ہے، جس کے بعد آبجیکٹ کو کوڑا کریکٹر سے صاف کیا جا سکتا ہے۔ Flutter گارنٹی دیتا ہے کہ کوئی RenderObject متعلقہ عنصر کے بغیر درخت میں نہیں لٹکتا۔

RepaintBoundary اور رینڈر علاحدگی

RepaintBoundary ایک وائجٹ ہے جو اپنے مواد کو رینڈر کرنے کے لیے ایک علیحدہ پرت بناتا ہے۔ جب RepaintBoundary کے اندر کا مواد بدلتا ہے، صرف وہ پرت دوبارہ پینٹ کی جاتی ہے، جبکہ باقی سکرین بدلی نہیں رہتی۔ RepaintBoundary خاص طور پر اینیمیشن، ویڈیو پلیر، انٹریکٹو چارٹ، اور دیگر بار بار اپ ڈیٹ ہونے والے عناصر کے لیے مفید ہے۔

RepaintBoundary کیسے کام کرتا ہے

RepaintBoundary کے مرکز میں RenderRepaintBoundary ہے — ایک خاص RenderObject جو علیحدہ PictureLayer بناتا ہے۔ پہلے رینڈر پر، RenderRepaintBoundary اس پرت میں گرافکس کمانڈز ریکارڈ کرتا ہے۔ بعد کے اپ ڈیٹ میں، اگر RepaintBoundary کے اندر کا مواد صرف بدلتا ہے، Flutter پوری سکرین کے بجائے صرف اس پرت کو دوبارہ پینٹ کرتا ہے۔ دیگر پرتیں بدلی نہیں رہتیں اور دوبارہ استعمال کی جاتی ہیں۔

RepaintBoundary کب استعمال کریں

ہر وائجٹ کو RepaintBoundary کی ضرورت نہیں ہے۔ اسے اس وقت استعمال کریں جب انٹرفیس کا ایک حصہ اعلی تکرار (60 FPS یا اس سے زیادہ) پر اپ ڈیٹ ہوتا ہے اور باقی سکرین ستارک ہوتی ہے۔ معیاری مثال: ایک متحرک لوڈنگ انڈیکیٹر، ویڈیو پلیر، گیم Canvas، بار بار پینٹ کرنے والا CustomPainter۔ ستارک متن یا بٹن کے لیے، RepaintBoundary ضرورت سے زیادہ ہے اور صرف میموری کی کھپت بڑھاتا ہے۔

کارکردگی کے لیے RenderObject Tree کی بہترینی

کارکردگی RenderObject Tree کے نوڈز کی تعداد، درخت کی گھرائی اور دوبارہ پینٹ کی تکرار پر منحصر کرتی ہے۔ Flutter DevTools ("Rendering" ٹیب) آپ کو حقیقی وقت میں RenderObject Tree کا تجزیہ کرنے کی اجازت دیتا ہے: دوبارہ پینٹ کی گنتی، layout اور paint کا وقت، پرتوں کی تعداد اور ان کے سائز۔ باقاعدہ تجزیہ رکاوٹوں کی شناخت میں مدد کرتا ہے۔

ضرورت سے زیادہ Overdraw سے بچیں

Overdraw ایک ایسی حالت ہے جہاں ایک پکسل فریم میں کئی بار خینچا جاتا ہے۔ مثلاً، جب ایک نیم شفاف وائجٹ دوسرے پر چڑھا ہوتا ہے، GPU دونوں پرتوں کو خینچتا ہے۔ غیر شفاف عناصر کے لیے opaque جھنڈے (decoration کے بجائے color کے ساتھ Container) استعمال کریں تاکہ Flutter پنہان پرتوں کو چھوڑسۙ۔ Flutter ٹیم کے مطابق، overdraw کو کم کرنے سے paint کا وقت 30% تک کم ہو سکتا ہے۔

پرتوں کی تعداد کم سے کم کریں

ہر RepaintBoundary اور کچھ وائجٹس (Opacity, ClipRRect, Transform) ایک علیحدہ پرت (PictureLayer) بناتے ہیں۔ بہت ساری پرتیں کمپوزیشن کا وقت بڑھاتی ہیں۔ گروپبندی استعمال کریں: انفرادی عناصر پر متعدد Opacity وائجٹس کے بجائے، کنٹینر پر ایک Opacity لگائیں۔ ہر عنصر پر ClipRRect کے بجائے، مشترکہ کنٹینر پر ClipRRect استعمال کریں۔

const کنسٹرکٹرز کا استعمال کریں

جب ایک وائجٹ const کے طور پر اعلان کیا جاتا ہے، Flutter جانتا ہے کہ اس کی ترتیب نہیں بدلے گی اور متعلقہ RenderObject کو دوبارہ بنائے بغیر دوبارہ استعمال کر سکتا ہے۔ const کنسٹرکٹرز کوڑا کریکٹر کا بوژ کم کرتے ہیں اور پہلی فریم کو تیز کرتے ہیں۔ مقرر پیرامیٹرز والے وائجٹس کے لیے const استعمال کریں: آئیکنز، عنوان، آرائشی عناصر۔

const Text("عنوان", style: TextStyle(fontSize: 24));
const Icon(Icons.home, color: Colors.blue);
const SizedBox.shrink();