Flutter میں widgets کیا ہیں؟

Question

Accepted Answer

Flutter میں، **ہر چیز ایک widget ہے** — UI عناصر (buttons، text، images)، layout structures (rows، columns، padding)، اور یہاں تک کہ app خود بھی تمام widgets ہیں۔ Widgets وہ immutable بلاکس ہیں جو مل کر مکمل user interface بناتے ہیں۔

## ہر چیز ایک widget ہے

```text
Widgets describe the UI. EVERYTHING is a widget:
  → visible elements: Text, Image, Icon, Button, etc.
  → layout: Row, Column, Container, Padding, Center, Stack, etc.
  → structure: Scaffold (page structure), AppBar, etc.
  → even the app itself (MaterialApp) and abstract things (Padding, Theme)
→ You build UI by COMPOSING widgets into a tree (widgets contain other widgets).
```

## Widgets کو tree میں compose کرنا

```dart
// build a UI by NESTING widgets (composition)
Scaffold(                       // page structure
  appBar: AppBar(title: Text('Home')),   // app bar with text
  body: Center(                 // centers its child
    child: Column(              // vertical layout
      children: [
        Text('Hello'),          // text widget
        ElevatedButton(         // a button
          onPressed: () {},
          child: Text('Click'),
        ),
      ],
    ),
  ),
)
// → a WIDGET TREE: Scaffold > Center > Column > [Text, Button]
```

Widgets nest کر کے ایک **widget tree** بناتے ہیں — composition اہم pattern ہے (سادہ widgets کو پیچیدہ UIs میں ملا دیں)۔

## Widgets immutable ہیں؛ configuration

```text
→ Widgets are IMMUTABLE descriptions of the UI (configuration, not the actual rendered
  objects) — Flutter rebuilds them efficiently when state changes
→ build() methods return widget trees describing what the UI should look like
→ Flutter handles efficiently turning widgets into rendered pixels
```

## یہ کیوں اہم ہے

Widgets کو سمجھنا Flutter کے لیے بنیادی ہے کیونکہ **Flutter میں ہر چیز ایک widget ہے** — مکمل UI ان سے بنایا جاتا ہے — لہذا widget model کو سمجھنا کسی بھی Flutter development کے لیے ضروری، بنیادی علم ہے۔

بنیادی تصور — کہ نظر آنے والے عناصر (text، buttons، images)، layout structures (rows، columns، padding)، page structure، اور یہاں تک کہ app خود **سب widgets** ہیں — Flutter کے کام کرنے کا طریقہ بتاتا ہے، اور اسے سمجھنا کسی بھی Flutter UI کو بنانے کا شروعات نقطہ ہے۔

یہ سمجھنا کہ UIs **widgets کو tree میں compose کر کے** بنائے جاتے ہیں (widgets کو nest کرنا، سادہ کو پیچیدہ interfaces میں ملانا) Flutter development کا بنیادی pattern ہے — inheritance کے بجائے composition، سادہ، دوبارہ استعمال ہونے والے بلاکس سے پیچیدہ UIs بنانا۔

یہ سمجھنا کہ **widgets immutable descriptions** ہیں UI کے (actual rendered objects کے بجائے configuration، Flutter ان کو efficiently دوبارہ بناتا ہے جب state بدلتی ہے) Flutter کے declarative UI model کو سمجھنے کے لیے اہم ہے — آپ بتاتے ہیں کہ UI کیسی لگنی چاہیے، اور Flutter efficiently rendering سنبھالتا ہے۔

یہ widget-and-composition model Flutter میں سب کچھ میں کام کرتا ہے: layouts، styling، state management، اور structure سب کچھ widgets کے ذریعے کام کرتا ہے۔

چونکہ widget Flutter کی atomic unit ہے (ہر چیز ایک widget ہے، UIs widget trees ہیں جو composition سے بنتے ہیں) اور اس model کو سمجھنا Flutter UIs بنانے کی بالکل بنیاد ہے، widgets کو سمجھنا — کہ ہر چیز ایک widget ہے، trees میں composition، اور ان کی immutable declarative nature — ضروری، بنیادی Flutter علم ہے، بنیادی تصور جس پر Flutter development کے ہر پہلو پر عمل ہے اور Flutter سیکھتے وقت سمجھنے کی پہلی چیز۔