Flutter میں layouts کیسے کام کرتے ہیں؟

Question

Accepted Answer

Flutter **layout widgets کو compose کر کے** layouts بناتا ہے — جیسے **Row**، **Column**، **Container**، **Stack**، اور دوسرے — جو اپنے children کو ترتیب دیتے ہیں۔ ان layout widgets کو سمجھنا اور یہ جاننا کہ یہ کیسے combine ہوتے ہیں، UI structures بنانے کے لیے بنیادی ہے۔

## Core layout widgets

```text
ROW → arrange children HORIZONTALLY (left to right)
COLUMN → arrange children VERTICALLY (top to bottom)
CONTAINER → a box: padding, margin, size, color, decoration, alignment (very common)
STACK → overlay children on top of each other (z-axis, positioned)
PADDING → add space around a child
CENTER → center a child
EXPANDED / FLEXIBLE → make children fill available space (in a Row/Column)
SizedBox → fixed-size box / spacing
ListView → scrollable list of children
```

## Layout کو compose کرنا

```dart
Column(                          // vertical arrangement
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('Title'),
    SizedBox(height: 8),         // spacing
    Row(                         // horizontal arrangement
      children: [
        Icon(Icons.star),
        Expanded(                // takes remaining horizontal space
          child: Text('Description'),
        ),
      ],
    ),
    Container(                   // a styled box
      padding: EdgeInsets.all(16),
      color: Colors.blue,
      child: Text('Boxed'),
    ),
  ],
)
```

## Flexible layouts (Row/Column main اور cross axes)

```text
→ MAIN axis (Row=horizontal, Column=vertical): mainAxisAlignment positions children
  along it (start, center, end, spaceBetween, etc.)
→ CROSS axis (perpendicular): crossAxisAlignment
→ EXPANDED/FLEXIBLE → children share available space proportionally (responsive layouts)
→ Compose these for flexible, responsive UIs.
```

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

Flutter میں layouts کیسے کام کرتے ہیں یہ سمجھنا بنیادی ہے کیونکہ **UI elements کو ترتیب دینا کسی بھی interface بنانے کے لیے ضروری ہے**، تو یہ Flutter development کے لیے لازمی عملی علم ہے۔

Flutter **layout widgets کو compose کر کے** layouts بناتا ہے — اور **core layout widgets** کو سمجھنا ضروری ہے (Row افقی ترتیب کے لیے، Column عمودی کے لیے، Container styled boxes کے لیے padding/margin/decoration کے ساتھ، Stack overlaying کے لیے، Padding اور Center positioning کے لیے، Expanded/Flexible جگہ بھرنے کے لیے، ListView scrollable lists کے لیے) تاکہ کوئی بھی UI structure بنایا جا سکے۔

یہ widgets ہر Flutter app میں مسلسل استعمال ہوتے ہیں۔

یہ سمجھنا کہ **انہیں کیسے compose کریں** (rows، columns، containers، اور دوسروں کو nest کرنا پیچیدہ layouts بنانے کے لیے سادہ حصوں سے) Flutter UIs بنانے کا بنیادی طریقہ ہے — وہی composition principle جو Flutter کی بنیاد میں ہے، layout پر لاگو۔

**Flexible layout model** کو سمجھنا — Rows اور Columns کے **main اور cross axes** (children کو position کرنے کے لیے mainAxisAlignment اور crossAxisAlignment) اور **Expanded/Flexible** سے دستیاب جگہ کو متناسب طریقے سے شیئار کرنا (responsive layouts کو enable کرنا جو مختلف screen sizes کے ساتھ adapt ہوں) — اہم ہے layouts بنانے کے لیے جو مختلف devices میں اچھے لگیں، جو mobile apps کے لیے کلیدی تشویش ہے۔

چونکہ کسی بھی Flutter interface بنانے کے لیے layout widgets سے elements کو ترتیب دینا ضروری ہے، اور چونکہ core layout widgets کو سمجھنا، انہیں کیسے compose کریں، اور flexible/responsive layout model کو سمجھنا UIs بنانے کے لیے ضروری ہے، Flutter میں layouts کیسے کام کرتے ہیں یہ سمجھنا ضروری، بنیادی عملی علم ہے — ایک بنیادی مہارت جو ہر Flutter screen میں استعمال ہوتی ہے، designs کو working، responsive interfaces میں ترجمہ کرنے کے لیے ضروری ہے، اور Flutter development میں روز مرہ کے کام کے لیے بنیادی ہے۔