Kaip veikia išdėstymai (layouts) Flutter?

Question

Accepted Answer

Flutter kuria išdėstymus **sudarydama išdėstymo valdiklius** — tokie kaip **Row**, **Column**, **Container**, **Stack** ir kiti — kurie tvarko jų vaikus. Šių išdėstymo valdiklių supratimas ir jų sujungimo principai yra pagrindiniai sąlygos, kuriant UI struktūras.

## Pagrindiniai išdėstymo valdikliai

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

## Išdėstymo sudarymas

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

## Lanksčūs išdėstymai (Row/Column pagrindinė ir kryžminė ašys)

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

## Kodėl tai svarbu

Suprasti, kaip veikia išdėstymai Flutter, yra itin svarbu, nes **UI elementų išdėstymas yra būtinas kuriant bet kokią sąsają**, todėl tai yra neatsiejama praktinė žinias Flutter kūrimui.

Flutter kuria išdėstymus **sudarydama išdėstymo valdiklius** — ir **pagrindinių išdėstymo valdiklių** supratimas (Row horizontaliam išdėstymui, Column vertikaliam, Container stilizuotiems laukeliams su padding/margin/decoration, Stack perdengimui, Padding ir Center pozicionavimui, Expanded/Flexible laisvai vietai užpildyti, ListView slankiems sąrašams) yra būtinas bet kurios UI struktūros sukonstravavimaui.

Šie valdikliai naudojami nuolat kiekvienoje Flutter programoje.

Suprasti, kaip juos **sudaryti** (Row, Column, Container ir kitų lizdavimas sudėtingiems išdėstymams iš paprastų dalių) yra pagrindinė Flutter UI kūrimo praktika — tas pats sudarymo principas, kuris yra Flutter pagrinde, taikomas išdėstymams.

Suprasti **lanksčiojo išdėstymo modelį** — Row ir Column **pagrindinę ir kryžminę ašis** (mainAxisAlignment ir crossAxisAlignment vaikų pozicionavimui) ir **Expanded/Flexible** laisvos vietos proporcingam pasidalijimui (įgalinant atsakomagus išdėstymus, kurie prisitaiko prie skirtingų ekrano dydžių) — yra svarbu kuriant išdėstymus, kurie gerai atrodytų skirtinguose įrenginiuose, svarbus mobiliųjų programėlių aspektas.

Kadangi bet kurios Flutter sąsajos kūrimas reikalauja elementų išdėstymo su išdėstymo valdikliais, ir kadangi pagrindinių išdėstymo valdiklių supratimas, jų sudarymas ir lanksčiojo/atsakomojo išdėstymo modelio supratimas yra būtinas UI konstravimui, suprasti, kaip veikia išdėstymai Flutter, yra neatsiejama, pagrindinė praktinė žinios — pagrindinė įgūdis, naudojamas kiekviename Flutter ekrane, būtinas dizainams paversti veikiančiomis, atsakiomosiomis sąsajomis, ir itin svarbus kasdieniam Flutter kūrimui.