آپ Flutter میں responsive اور adaptive UIs کو کیسے بناتے ہیں؟

Question

Accepted Answer

Flutter apps بہت سی screen sizes (phones، tablets، web، desktop) پر چلتی ہیں، اس لیے **responsive** (سائز کے مطابق ڈھالنا) اور **adaptive** (platform کے مطابق ڈھالنا) UIs بنانا اہم ہے۔ Flutter **MediaQuery**، **LayoutBuilder**، اور flexible widgets جیسے tools فراہم کرتا ہے۔

## Responsive: screen size کے مطابق ڈھالنا

```dart
// MediaQuery — get screen dimensions and adapt
final width = MediaQuery.of(context).size.width;
if (width > 600) {
  // tablet/desktop layout (e.g. side-by-side)
} else {
  // phone layout (e.g. stacked)
}

// LayoutBuilder — adapt based on the available space (parent constraints)
LayoutBuilder(builder: (context, constraints) {
  if (constraints.maxWidth > 600) return WideLayout();
  return NarrowLayout();
})
```

## Flexible layout widgets

```text
✓ EXPANDED / FLEXIBLE → children share available space proportionally
✓ FractionallySizedBox → size relative to the parent
✓ Wrap → flow children to the next line when out of space
✓ AspectRatio, FittedBox → maintain ratios / fit content
✓ Avoid hardcoded sizes; use flexible/relative sizing for responsiveness
```

## Adaptive: platform کے مطابق ڈھالنا

```text
→ ADAPTIVE = adjust to the PLATFORM (iOS vs Android vs web/desktop):
  → platform-appropriate widgets (Material vs Cupertino), navigation, conventions
  → e.g. .adaptive constructors (Switch.adaptive); check the platform
→ RESPONSIVE = adjust to SCREEN SIZE; ADAPTIVE = adjust to PLATFORM/device type
```

## Patterns

```text
✓ Breakpoints (e.g. <600 phone, 600-1200 tablet, >1200 desktop) → different layouts
✓ Different layouts for phone vs tablet (e.g. master-detail on tablet)
✓ OrientationBuilder → adapt to portrait/landscape
✓ SafeArea → avoid notches/system UI; test on multiple sizes
```

## یہ کیوں ضروری ہے

responsive اور adaptive UIs بنانے کا طریقہ سمجھنا ضروری ہے کیونکہ **Flutter apps مختلف screen sizes اور platforms** (phones، tablets، web، desktop) پر چلتی ہیں، اور UIs کو ان سب پر اچھی طرح کام کرنا چاہیے، اس لیے یہ قیمتی عملی علم ہے۔

چونکہ Flutter کی single codebase بہت سے form factors کو target کرتی ہے، ایسی UIs بنانا جو **مختلف screen sizes سے ڈھل سکیں (responsive)** اور **مختلف platforms سے ڈھل سکیں (adaptive)** حقیقی اور اہم concern ہے — ایک layout جو صرف phone کے لیے بنایا گیا ہو وہ tablet یا desktop پر خراب لگتا ہے۔

**responsive techniques** سمجھنا ضروری ہے — **MediaQuery** (screen dimensions حاصل کرنا layouts کو ڈھالنے کے لیے)، **LayoutBuilder** (دستیاب space/constraints کی بنیاد پر ڈھالنا)، اور **flexible layout widgets** (Expanded/Flexible proportional space sharing کے لیے، Wrap flowing content کے لیے، hardcoded sizes سے بچنا favor میں flexible/relative sizing) — یہ ضروری ہے layouts کے لیے جو screen size میں gracefully adjust کریں۔

**adaptive** dimension سمجھنا (platform کے مطابق adjust کرنا — platform-appropriate widgets استعمال کرنا Material vs Cupertino کی طرح، conventions، اور `.adaptive` constructors) apps کو ہر platform پر native محسوس کرانے کو address کرتا ہے۔

**distinction** سمجھنا (responsive = screen size سے ڈھلنا؛ adaptive = platform/device type سے ڈھلنا) ان متعلقہ concerns کو واضح کرتا ہے۔

عام **patterns** جاننا (breakpoints مختلف layouts کے لیے، distinct phone/tablet layouts جیسے master-detail، OrientationBuilder orientation کے لیے، SafeArea notches کے لیے، اور متعدد sizes پر testing) عملی responsive design کو ظاہر کرتا ہے۔

چونکہ Flutter apps diverse devices کو target کرتی ہیں اور ان سب پر اچھی طرح کام کرنی چاہیے (cross-platform development کا ایک اہم فائدہ اور چیلنج)، اور چونکہ responsive/adaptive techniques (MediaQuery، LayoutBuilder، flexible widgets، breakpoints، platform adaptation) یہ ہے کہ آپ یہ حاصل کریں، Flutter میں responsive اور adaptive UI سمجھنا قیمتی، عملی طور پر متعلقہ علم ہے apps بنانے کے لیے جو بہت سی screen sizes اور platforms پر اچھی طرح کام کریں جو Flutter target کرتا ہے، تمام devices پر اچھے تجربات فراہم کرنے کے لیے ایک اہم خیال۔