Spacing

Pengantar

Widget Spacing menyediakan cara yang bersih dan mudah dibaca untuk menambahkan jarak yang konsisten antar elemen UI. Alih-alih membuat instance SizedBox secara manual di seluruh kode Anda, Anda dapat menggunakan Spacing dengan preset semantik atau nilai kustom.

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

// Write this:
Spacing.md,

Ukuran Preset

Spacing dilengkapi dengan preset bawaan untuk nilai jarak umum. Ini membantu menjaga jarak yang konsisten di seluruh aplikasi Anda.

Preset Spacing Vertikal

Gunakan ini di widget Column atau di mana pun Anda membutuhkan ruang vertikal:

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

Preset Spacing Horizontal

Gunakan ini di widget Row atau di mana pun Anda membutuhkan ruang horizontal:

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

Spacing Kustom

Ketika preset tidak sesuai dengan kebutuhan Anda, buat spacing kustom:

Spacing Vertikal

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

Spacing Horizontal

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

Kedua Dimensi

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

Contoh

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")),
          ],
        ),
      ),
    ),
  ],
)

Menggunakan dengan Sliver

Saat bekerja dengan CustomScrollView dan sliver, gunakan metode asSliver():

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"),
    ),
  ],
)

Metode asSliver() membungkus widget Spacing dalam SliverToBoxAdapter, membuatnya kompatibel dengan layout berbasis sliver.

Spacing Kondisional

Gunakan Spacing.zero untuk spacing kondisional:

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