Flutter Widgets — یہ کیا ہے، ویجیٹ ٹری اور build

Flutter Widgets کیا ہیں؟

Flutter Widgets — Flutter فریم ورک میں تمام UI عناصر، ناقابل تغیر (immutable) Dart کلاسز کے طور پر لاگو کیے گئے۔ ویجیٹ ایک UI عنصر کی ترتیب ہے: اس کا سائز، رنگ، مقام اور ایونٹ ہینڈلر۔ Android (XML + View) یا iOS (Storyboard + UIView) کے برعکس، Flutter مقامی اجزاء استعمال نہیں کرتا — ہر چیز Skia (Android/iOS/Linux) یا Impeller (iOS/macOS) انجن کے ذریعے Canvas پر کھینچی جاتی ہے۔ یہ پلیٹ فارم کے فرق کے بغیر تمام پلیٹ فارمز پر یکساں ظاہری شکل کو یقینی بناتا ہے۔ Flutter ویجیٹ کے دو سیٹوں کے ساتھ آتا ہے: Material Widgets (Android/ویب کے لیے Google Material Design 3) اور Cupertino Widgets (iOS/macOS کے لیے Apple HIG)۔ ڈیولپر ایک ایپلیکیشن میں دونوں سیٹوں کو یکجا کر سکتا ہے۔ ہر ویجیٹ میں build() طریقہ ہوتا ہے جو ایک چائلڈ ویجیٹ یا ان کی ترکیب لوٹاتا ہے — اس طرح ویجیٹ ٹری بنایا جاتا ہے۔

Flutter کے تین درخت

Flutter تین درختوں کے ساتھ کام کرتا ہے: Widget Tree(ترتیب، ڈیولپر کے ذریعے بنایا گیا)، Element Tree (درخت میں ویجیٹ کی پوزیشن سے نقشہ سازی، فریم ورک کے ذریعے منظم) اور Render Tree (آبجیکٹ جو لے آؤٹ کا حساب لگاتے ہیں اور پینٹنگ انجام دیتے ہیں)۔ ایک Widget ایک Element بناتا ہے، جو ایک RenderObject بناتا ہے۔ ترتیب تبدیل ہونے (rebuild) پر Element دوبارہ استعمال ہوتا ہے — یہ Flutter کا اصلاحی طریقہ کار ہے: اگر ویجیٹ کی قسم اور key مماثل ہوں تو Element دوبارہ نہیں بنایا جاتا بلکہ نئی ترتیب کے ساتھ اپ ڈیٹ کیا جاتا ہے۔ تین درختوں کو سمجھنا Flutter ایپلیکیشن کی کارکردگی کو بہتر بنانے کی کلید ہے۔

StatelessWidget: ناقابل تغیر ویجیٹ

StatelessWidget — ایک ویجیٹ جو اندرونی حالت محفوظ نہیں کرتا۔ یہ کنسٹرکٹر کے ذریعے پیرامیٹرز وصول کرتا ہے اور build کے بعد تبدیلی کی صلاحیت کے بغیر انہیں دکھاتا ہے۔ StatelessWidget جامد عناصر کے لیے مثالی ہے: ہیڈر، آئیکن، اوتار، مقررہ ڈیٹا والی فہرستیں۔ build() طریقہ تخلیق کے وقت ایک بار اور جب پیرنٹ ویجیٹ تبدیل ہوتا ہے بلایا جاتا ہے۔ چونکہ StatelessWidget کی کوئی حالت نہیں ہے، اسے علیحدہ State آبجیکٹ کی ضرورت نہیں — build() براہ راست ویجیٹ کلاس میں بیان کیا جاتا ہے۔

import 'package:flutter/material.dart';

class ProfileHeader extends StatelessWidget {
  final String name;
  final String avatarUrl;

  const ProfileHeader({super.key, required this.name, required this.avatarUrl});

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        CircleAvatar(
          radius: 24,
          backgroundImage: NetworkImage(avatarUrl),
        ),
        const SizedBox(width: 12),
        Text(
          name,
          style: const TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
      ],
    );
  }
}

ProfileHeader — ایک StatelessWidget جو کنسٹرکٹر کے ذریعے name اور avatarUrl وصول کرتا ہے۔ CircleAvatar اوتار دکھاتا ہے، Text نام دکھاتا ہے۔ ویجیٹ تخلیق کے بعد ان قدروں کو تبدیل نہیں کر سکتا۔ const کنسٹرکٹر (const ProfileHeader) استعمال کرنے سے Flutter پیرنٹ دوبارہ تعمیر کے دوران ویجیٹ مثال کو دوبارہ استعمال کر سکتا ہے — تمام StatelessWidget کے لیے ایک مائیکرو اصلاح تجویز کردہ۔

StatefulWidget: حالت کے ساتھ ویجیٹ

StatefulWidget — ایک علیحدہ State آبجیکٹ میں محفوظ قابل تغیر حالت کے ساتھ ویجیٹ۔ StatefulWidget خود StatelessWidget کی طرح ناقابل تغیر ہے۔ قابل تغیر حصہ State کو سونپا گیا ہے: State ایک آبجیکٹ ہے جو ایک بار بنایا جاتا ہے اور متعدد ویجیٹ دوبارہ تعمیر سے بچ جاتا ہے۔ جب حالت تبدیل ہوتی ہے (setState())، Flutter State پر build() بلاتا ہے، UI کو اپ ڈیٹ کرتا ہے۔ StatefulWidget انٹرایکٹو عناصر کے لیے استعمال ہوتا ہے: کاؤنٹر، ٹیکسٹ فیلڈ، چیک باکس، اینیمیشن، ٹائمر۔

import 'package:flutter/material.dart';

class LikeButton extends StatefulWidget {
  const LikeButton({super.key});

  @override
  State<LikeButton> createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  bool liked = false;
  int count = 42;

  void _toggleLike() {
    setState(() {
      liked = !liked;
      count += liked ? 1 : -1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _toggleLike,
      child: Text(liked ? '♥ $count' : '♡ $count'),
    );
  }
}

LikeButton — State کلاس _LikeButtonState کے ساتھ ایک StatefulWidget ہے۔ فیلڈ liked اور count State میں محفوظ حالت ہیں اور دوبارہ تعمیر پر دوبارہ سیٹ نہیں ہوتیں۔ setState() Flutter کو اطلاع دیتا ہے کہ UI کو دوبارہ تعمیر کرنے کی ضرورت ہے۔ Flutter ہر پیرنٹ دوبارہ تعمیر پر State کو دوبارہ نہیں بناتا — صرف اس وقت جب ترتیب (key یا ویجیٹ کی قسم) تبدیل ہوتی ہے۔ IT Sectr میں، ہم ڈسپلے کے لیے StatelessWidget اور انٹرایکٹو اجزاء کے لیے StatefulWidget استعمال کرتے ہیں، تغیر کی حدود تک StatefulWidget کو کم سے کم کرنے کے اصول پر عمل کرتے ہوئے۔

ویجیٹ ٹری: Widget سے RenderObject تک

Widget Tree — ایپلیکیشن UI کو بیان کرنے والے ویجیٹ کا درجہ بندی کا ڈھانچہ۔ Flutter Widget Tree کو Element Tree میں تبدیل کرتا ہے: ہر Widget ایک Element بناتا ہے، جو درخت میں اپنی پوزیشن اور RenderObject سے اپنے کنکشن کو ٹریک کرتا ہے۔ Render Tree لے آؤٹ (سائز اور مقامات کا تعین) اور پینٹ (رینڈرنگ) انجام دیتا ہے۔ Element ایک اہم اصلاحی پرت ہے: اگر دوبارہ تعمیر کے دوران ویجیٹ کی قسم اور key تبدیل نہیں ہوئی، تو Element دوبارہ استعمال ہوتا ہے، RenderObject کو دوبارہ بنائے بغیر ترتیب کو اپ ڈیٹ کرتا ہے۔ یہ اعلی فریم ریٹ (60/120 FPS) پر Flutter کی کارکردگی کو یقینی بناتا ہے۔

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter ویجیٹ')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Icon(Icons.flutter_dash, size: 80),
            const SizedBox(height: 16),
            const Text(
              'ہیلو، Flutter!',
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

HomeScreen ویجیٹ ٹری: Scaffold → AppBar + Center → Column → [Icon, SizedBox, Text]۔ Scaffold جڑ کا Material Design لے آؤٹ ویجیٹ ہے۔ Center اپنے چائلڈ Column کو مرکز میں رکھتا ہے۔ Column بچوں کو عمودی طور پر مرکز الائنمنٹ (mainAxisAlignment.center) کے ساتھ ترتیب دیتا ہے۔ Flutter لے آؤٹ اوپر سے نیچے (پابندیاں پیرنٹ سے منتقل ہوتی ہیں) اور سائز نیچے سے اوپر (sizedByParent یا بچوں سے سائز) کا حساب لگاتا ہے۔

BuildContext: تعمیر کا سیاق اور درخت تک رسائی

BuildContext — Element Tree میں ویجیٹ کی پوزیشن کا ایک وصف۔ ہر build() طریقہ ایک BuildContext وصول کرتا ہے، جس کے ذریعے ویجیٹ رسائی حاصل کر سکتا ہے: MediaQuery (اسکرین کا سائز، واقفیت، پکسل کثافت، محفوظ علاقہ)، Theme (MaterialThemeData یا CupertinoThemeData)، Navigator (نیویگیشن اسٹیک)، ScaffoldMessenger (SnackBar)، InheritedWidget (درخت میں نیچے ڈیٹا منتقل کرنا)۔ BuildContext کو build() مکمل ہونے کے بعد محفوظ نہیں کرنا چاہیے یا ہم وقت ساز سیاق سے باہر استعمال نہیں کرنا چاہیے — اس سے “Scaffold.of() called with a context that does not contain a Scaffold” جیسی غلطیاں ہوتی ہیں۔ سیاق کو محفوظ کرنے کے بجائے، ڈیٹا تک رسائی کے لیے Builder ویجیٹ یا InheritedWidget پیٹرن استعمال کریں۔

Key: درخت میں ویجیٹ کی شناخت

Key — ہر ویجیٹ کے کنسٹرکٹر کا ایک اختیاری پیرامیٹر (super.key)۔ Key Flutter کی فہرست میں آئٹمز کی ترتیب یا تعداد تبدیل ہونے پر ویجیٹ کی شناخت میں مدد کرتا ہے۔ Key کے بغیر، Flutter ویجیٹ کو قسم اور مقام سے موازنہ کرتا ہے؛ Key کے بغیر فہرست کے درمیان میں آئٹم شامل کرنے پر، Flutter غلط ویجیٹ کے لیے Element کو دوبارہ استعمال کرتا ہے، جس سے حالت کی خرابیاں (StatefulWidget) اور اینیمیشن کے مسائل پیدا ہوتے ہیں۔ فہرستوں کے لیے ValueKey (منفرد شناخت کنندہ)، ObjectKey (ڈیٹا آبجیکٹ پر مبنی)، UniqueKey (ہر دوبارہ تعمیر پر منفرد کی ضمانت — زبردستی دوبارہ تخلیق کے لیے) استعمال کریں۔

Flutter ویجیٹ کیٹلاگ: Material, Cupertino, Layout

Flutter SDK (مستحکم ورژن 3.3+، Dart 3+) میں زمرہ جات میں تقسیم 200 سے زیادہ بلٹ ان ویجیٹ شامل ہیں: Layout (Row, Column, Stack, Container, Expanded, Flexible, Wrap, GridView, ListView, CustomScrollView)، Material Design (Scaffold, AppBar, Card, Drawer, BottomNavigationBar, FloatingActionButton, TabBar, Chip, DataTable)، Cupertino (CupertinoPageScaffold, CupertinoNavigationBar, CupertinoButton, CupertinoTabBar)، Painting & Effects (Opacity, DecoratedBox, ClipRect, Transform, BackdropFilter, ShaderMask)، Async (FutureBuilder, StreamBuilder) اور Accessibility (Semantics, MergeSemantics, ExcludeSemantics)۔ لے آؤٹ ویجیٹ کسی بھی Flutter UI کی بنیاد ہیں: Row افقی ترتیب کے لیے، Column عمودی کے لیے، Stack اوورلیپنگ عناصر کے لیے، Container BoxDecoration کے ساتھ سجاوٹ کے لیے۔