Kako layout funkcionira u Flutteru?

Question

Accepted Answer

Flutter gradi layout-e **komponiranjem layout widgeta** — poput **Row**, **Column**, **Container**, **Stack** i ostalih — koji raspoređuju njihovu decu. Razumevanje ovih layout widgeta i kako se kombinuju je fundamentalno za pravljenje UI struktura.

## Osnovni layout widgeti

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

## Komponovanje layout-a

```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'),
    ),
  ],
)
```

## Fleksibilni layout-i (Row/Column glavne i poprečne ose)

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

## Zašto je važno

Razumevanje kako layout-i funkcionišu u Flutteru je fundamentalno jer je **raspoređivanje UI elemenata esencijalno za pravljenje bilo kakvog interfejsa**, pa je to neophodan praktičan znanje za Flutter razvoj.

Flutter gradi layout-e **komponiranjem layout widgeta** — i razumevanje **osnovnih layout widgeta** (Row za horizontalno raspoređivanje, Column za vertikalno, Container za stilizovane kutije sa padding/margin/dekoracijom, Stack za preklapanje, Padding i Center za pozicioniranje, Expanded/Flexible za popunjavanje prostora, ListView za scrollable liste) je neophodno za konstruisanje bilo koje UI strukture.

Ovi widgeti se koriste neprekidno u svakoj Flutter aplikaciji.

Razumevanje kako ih **komponovati** (ugneždavanja rows, columns, containers i ostalih za pravljenje kompleksnih layout-a od jednostavnih delova) je fundamentalna praksa pravljenja Flutter UI-ja — isti princip komponovanja koji leži u osnovi sveog Flutter-a, primenjen na layout.

Razumevanje **fleksibilnog layout modela** — **glavne i poprečne ose** Rows i Columns (mainAxisAlignment i crossAxisAlignment za pozicioniranje dece) i **Expanded/Flexible** za proporcionalno deljenje dostupnog prostora (omogućavajući responzivne layout-e koji se prilagođavaju različitim veličinama ekrana) — je važno za pravljenje layout-a koji izgledu dobro na svim uređajima, što je ključna briga za mobilne aplikacije.

Pošto pravljenje bilo kakvog Flutter interfejsa zahteva raspoređivanje elemenata sa layout widgetima, i pošto je razumevanje osnovnih layout widgeta, kako ih komponovati, i fleksibilnog/responzivnog layout modela esencijalno za konstruisanje UI-ja, razumevanje kako layout-i funkcionišu u Flutteru je esencijalno, fundamentalno praktično znanje — osnovna veština koja se koristi u svakom Flutter ekranu, neophodna za prevođenje dizajna u radne, responzivne interfejse, i fundamentalno za svakodnevni Flutter razvoj.