Spacing

Giriş

Spacing widget'ı, UI elemanları arasına tutarlı boşluk eklemenin temiz ve okunabilir bir yolunu sunar. Kodunuz boyunca manuel olarak SizedBox örnekleri oluşturmak yerine, Spacing'i anlamsal ön ayarlar veya özel değerlerle kullanabilirsiniz.

// Instead of this:
SizedBox(height: 16),

// Write this:
Spacing.md,

Önceden Tanımlı Boyutlar

Spacing, yaygın boşluk değerleri için yerleşik ön ayarlarla birlikte gelir. Bunlar uygulamanız boyunca tutarlı boşluk sağlamaya yardımcı olur.

Dikey Boşluk Ön Ayarları

Bunları Column widget'larında veya dikey boşluğa ihtiyaç duyduğunuz herhangi bir yerde kullanın:

Column(
  children: [
    Text("Title"),
    Spacing.sm,
    Text("Subtitle"),
    Spacing.lg,
    Text("Body content"),
    Spacing.xl,
    ElevatedButton(
      onPressed: () {},
      child: Text("Action"),
    ),
  ],
)

Yatay Boşluk Ön Ayarları

Bunları Row widget'larında veya yatay boşluğa ihtiyaç duyduğunuz herhangi bir yerde kullanın:

Row(
  children: [
    Icon(Icons.star),
    Spacing.smHorizontal,
    Text("Rating"),
    Spacing.lgHorizontal,
    Text("5.0"),
  ],
)

Özel Boşluk

Ön ayarlar ihtiyaçlarınıza uymadığında, özel boşluk oluşturun:

Dikey Boşluk

Spacing.vertical(12) // 12 logical pixels of vertical space

Yatay Boşluk

Spacing.horizontal(20) // 20 logical pixels of horizontal space

Her İki Boyut

Spacing(width: 10, height: 20) // Custom width and height

Örnek

Column(
  children: [
    Text("Header"),
    Spacing.vertical(40), // Custom 40px gap
    Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Row(
          children: [
            Icon(Icons.info),
            Spacing.horizontal(12), // Custom 12px gap
            Expanded(child: Text("Information text")),
          ],
        ),
      ),
    ),
  ],
)

Sliver'larla Kullanım

CustomScrollView ve sliver'larla çalışırken, asSliver() metodunu kullanın:

CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text("My App"),
    ),
    Spacing.lg.asSliver(), // Converts to SliverToBoxAdapter
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => ListTile(title: Text("Item $index")),
        childCount: 10,
      ),
    ),
    Spacing.xl.asSliver(),
    SliverToBoxAdapter(
      child: Text("Footer"),
    ),
  ],
)

asSliver() metodu, Spacing widget'ını bir SliverToBoxAdapter içine sararak sliver tabanlı düzenlerle uyumlu hale getirir.

Koşullu Boşluk

Koşullu boşluk için Spacing.zero kullanın:

Column(
  children: [
    Text("Always visible"),
    showExtraSpace ? Spacing.lg : Spacing.zero,
    Text("Content below"),
  ],
)