Kako gradite responsive i adaptive UI-je u Flutter-u?

Question

Accepted Answer

Flutter aplikacije se izvode na mnogim veličinama ekrana (telefoni, tableti, web, desktop), tako da je gradnja **responsive** (prilagođavanja veličini) i **adaptive** (prilagođavanja platformi) UI-ja važna. Flutter pruža alate kao što su **MediaQuery**, **LayoutBuilder** i fleksibilni widgeti za to.

## Responsive: prilagođavanje veličini ekrana

```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();
})
```

## Fleksibilni layout widgeti

```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: prilagođavanje platformi

```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
```

## Obrasci

```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
```

## Zašto je to važno

Razumijevanje kako graditi responsive i adaptive UI-je je važno jer se **Flutter aplikacije izvode na raznovrsnim veličinama ekrana i platformama** (telefoni, tableti, web, desktop), a UI-ji moraju dobro raditi na svima njima, tako da je to vrijedna praktična znanja.

Budući da Flutter-ov jedan kod cilja na mnoge oblike faktora, gradnja UI-ja koji se **prilagođavaju različitim veličinama ekrana (responsive)** i **različitim platformama (adaptive)** je prava, važna briga — raspored dizajniran samo za telefon izgleda loše na tabletu ili desktopu.

Razumijevanje **responsive tehnike** — **MediaQuery** (dohvaćanje dimenzija ekrana za prilagođavanje raspored), **LayoutBuilder** (prilagođavanje na temelju dostupnog prostora/ograničenja) i **fleksibilnih layout widgeta** (Expanded/Flexible za proporcionalno dijeljenje prostora, Wrap za tekući sadržaj, izbjegavanje hardkodirane veličine u korist fleksibilnih/relativnih dimenzija) — je nužno za raspored koji se graciozo prilagođava veličini ekrana.

Razumijevanje **adaptive** dimenzije (prilagođavanje platformi — korištenje platformski prikladnih widgeta kao Material vs Cupertino, konvencije i `.adaptive` konstruktori) rješava postizanje da aplikacije izgledaju lokalno na svakoj platformi.

Razumijevanje **razlike** (responsive = prilagođavanje veličini ekrana; adaptive = prilagođavanje platformi/tipu uređaja) pojašnjava te povezane brige.

Znanje čestih **obrazaca** (breakpointi za različite raspored, različiti telefon/tablet raspored kao master-detail, OrientationBuilder za orijentaciju, SafeArea za zareze i testiranje na više veličina) odražava praktičan responsive dizajn.

Budući da Flutter aplikacije ciljaju na raznovrsne uređaje i moraju dobro raditi na svima njima (ključna prednost i izazov cross-platform razvoja), a budući da su responsive/adaptive tehnike (MediaQuery, LayoutBuilder, fleksibilni widgeti, breakpointi, prilagođavanje platformi) kako to postižete, razumijevanje responsive i adaptive UI-ja u Flutter-u je vrijedna, praktično relevantna znanja za gradnju aplikacija koje dobro rade na mnogim veličinama ekrana i platformama koje Flutter cilja, važna razmatranja za pružanje dobrih iskustava na svim uređajima.