Bagaimanakah susun atur (layout) berfungsi dalam Flutter?

Question

Accepted Answer

Flutter membina susun atur dengan **menggubah widget susun atur** — seperti **Row**, **Column**, **Container**, **Stack**, dan lain-lain — yang menyusun anak-anaknya. Memahami widget susun atur ini dan cara ia bergabung adalah asas untuk mencipta struktur UI.

## Widget susun atur teras

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

## Menggubah susun atur

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

## Susun atur fleksibel (paksi utama dan silang Row/Column)

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

## Mengapa ia penting

Memahami cara susun atur berfungsi dalam Flutter adalah asas kerana **menyusun elemen UI adalah penting untuk membina sebarang antara muka**, jadi ia merupakan pengetahuan praktikal yang mesti diketahui untuk pembangunan Flutter.

Flutter membina susun atur dengan **menggubah widget susun atur** — dan memahami **widget susun atur teras** (Row untuk susunan mendatar, Column untuk menegak, Container untuk kotak bergaya dengan padding/margin/decoration, Stack untuk pertindihan, Padding dan Center untuk kedudukan, Expanded/Flexible untuk mengisi ruang, ListView untuk senarai boleh tatal) adalah perlu untuk membina sebarang struktur UI.

Widget ini digunakan secara berterusan dalam setiap aplikasi Flutter.

Memahami cara untuk **menggubahnya** (menyarangkan baris, lajur, kontena, dan lain-lain untuk membina susun atur kompleks daripada kepingan mudah) ialah amalan asas membina UI Flutter — prinsip komposisi yang sama yang mendasari keseluruhan Flutter, diterapkan pada susun atur.

Memahami **model susun atur fleksibel** — **paksi utama dan silang** Row dan Column (mainAxisAlignment dan crossAxisAlignment untuk meletakkan anak) dan **Expanded/Flexible** untuk berkongsi ruang yang tersedia secara berkadar (membolehkan susun atur responsif yang menyesuaikan diri dengan saiz skrin yang berbeza) — adalah penting untuk mencipta susun atur yang kelihatan baik merentas peranti, satu kebimbangan utama bagi aplikasi mudah alih.

Memandangkan membina sebarang antara muka Flutter memerlukan menyusun elemen dengan widget susun atur, dan memandangkan memahami widget susun atur teras, cara menggubahnya, dan model susun atur fleksibel/responsif adalah penting untuk membina UI, memahami cara susun atur berfungsi dalam Flutter adalah pengetahuan praktikal asas yang penting — kemahiran teras yang digunakan dalam setiap skrin Flutter, perlu untuk menterjemahkan reka bentuk menjadi antara muka yang berfungsi dan responsif, serta asas kepada pembangunan Flutter harian.