Flutter'da düzenler (Layouts) nasıl çalışır?

Question

Accepted Answer

Flutter, düzenleri **düzen widget'lerini birleştirerek** oluşturur — **Row**, **Column**, **Container**, **Stack** ve diğerleri gibi — bunlar alt öğelerini düzenler. Bu düzen widget'lerini ve bunların nasıl birleştiğini anlamak, UI yapılarını oluşturmanın temelini oluşturur.

## Temel düzen widget'leri

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

## Düzen oluşturma

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

## Esnek düzenler (Row/Column ana ve çapraz eksenleri)

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

## Neden önemli

Flutter'da düzenlerin nasıl çalıştığını anlamak temeldir çünkü **UI öğelerini düzenlemek herhangi bir arayüz oluşturmak için gereklidir**, bu nedenle Flutter geliştirme için vazgeçilmez pratik bilgidir.

Flutter, düzenleri **düzen widget'lerini birleştirerek** oluşturur — ve **temel düzen widget'lerini** anlamak (yatay düzenleme için Row, dikey için Column, padding/margin/decoration içeren stillendirilmiş kutular için Container, katmanlamak için Stack, konumlandırma için Padding ve Center, alanı doldurmak için Expanded/Flexible, kaydırılabilir listeler için ListView) herhangi bir UI yapısını oluşturmak için gereklidir.

Bu widget'ler her Flutter uygulamasında sürekli kullanılır.

**Onları birleştirmeyi** anlamak (karmaşık düzenleri basit parçalardan oluşturmak için satırları, sütunları, kapsayıcıları ve diğerlerini iç içe geçirmek) Flutter UI'larını oluşturmanın temel uygulamasıdır — Flutter'ın tamamını destekleyen aynı bileşim ilkesi, düzene uygulanmıştır.

**Esnek düzen modelini** anlamak — Row'lar ve Column'ların **ana ve çapraz eksenleri** (alt öğeleri konumlandırmak için mainAxisAlignment ve crossAxisAlignment) ve **Expanded/Flexible** orantılı şekilde mevcut alanı paylaşmak için (farklı ekran boyutlarına uyum sağlayan duyarlı düzenler etkinleştirmek) — farklı cihazlarda iyi görünen düzenler oluşturmak için önemlidir, mobil uygulamalar için önemli bir kaygı.

Herhangi bir Flutter arayüzü oluşturmak düzen widget'leri ile öğeleri düzenlemesi gerektirdiğinden ve temel düzen widget'lerini, bunları nasıl birleştireceğini ve esnek/duyarlı düzen modelini anlamak UI'ları oluşturmak için gerekli olduğundan, Flutter'da düzenlerin nasıl çalıştığını anlamak gerekli, temelsel pratik bilgidir — her Flutter ekranında kullanılan temel bir beceri, tasarımları çalışan, duyarlı arayüzlere dönüştürmek için gerekli ve günlük Flutter geliştirmesinin temelini oluşturur.