Mengenal Atribut BoxDecoration di Flutter

Posted on August 19, 2025 by  with No comments

Kalau kamu sedang belajar Flutter, pasti cepat atau lambat akan ketemu dengan yang namanya BoxDecoration. Kelas ini sering banget dipakai, terutama ketika kita ingin membuat tampilan UI yang lebih menarik di aplikasi. Flutter sendiri memang terkenal dengan fleksibilitas desainnya. Dengan BoxDecoration, kita bisa bikin container punya warna, border, shadow, bahkan gradient ala-ala aplikasi modern.

Nah, di artikel kali ini kita akan membahas apa saja atribut dari BoxDecoration(), cara penggunaannya, serta contoh-contoh biar kamu makin paham. Gaya bahasanya santai aja, jadi nggak kaku seperti dokumentasi resmi. Cocok banget buat kamu yang baru belajar Flutter ataupun yang lagi ngulik desain UI.

Apa Itu BoxDecoration?

Sebelum ngomongin atributnya, yuk kenalan dulu sama BoxDecoration.
BoxDecoration adalah sebuah class di Flutter yang digunakan untuk menghias widget, biasanya dipakai bersama Container. Misalnya, kalau kamu bikin Container kosong, tampilannya biasa aja: cuma kotak tanpa gaya. Tapi dengan BoxDecoration, kamu bisa kasih warna, gradient, gambar latar, border, sudut melengkung, bahkan bayangan.

Contoh sederhananya kayak gini:

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(5, 5),
      ),
    ],
  ),
)

Hasilnya? Kotak biru dengan sudut melengkung dan bayangan lembut. Keren kan?
Nah, semua itu diatur lewat atribut dari BoxDecoration.

Atribut-Atribut BoxDecoration

Sekarang mari kita kupas tuntas satu per satu atribut yang ada di BoxDecoration.

1. color

Atribut ini digunakan untuk memberi warna latar belakang.
Contoh:

decoration: BoxDecoration(
  color: Colors.red,
),

Hasilnya, Container akan memiliki background merah polos.
Kalau kamu hanya butuh warna solid tanpa gaya tambahan, cukup pakai ini.

2. image

Mau bikin Container punya background gambar? Gunakan atribut image. Biasanya digunakan dengan DecorationImage.
Contoh:

decoration: BoxDecoration(
  image: DecorationImage(
    image: AssetImage('assets/bg.png'),
    fit: BoxFit.cover,
  ),
),

  • image → gambar yang digunakan (bisa AssetImage, NetworkImage, dll).

  • fit → bagaimana gambar menyesuaikan ukuran container (cover, contain, dll).

Kalau kamu bikin aplikasi dengan tampilan banner, fitur ini sangat berguna.

3. border

Atribut ini dipakai untuk membuat garis tepi (border).
Contoh:

decoration: BoxDecoration(
  border: Border.all(
    color: Colors.black,
    width: 3,
  ),
),

Hasilnya: sebuah kotak dengan border hitam tebal.
Selain Border.all, kamu juga bisa bikin border berbeda tiap sisi, misalnya hanya atas atau bawah.

4. borderRadius

Kalau bosan dengan kotak yang kaku, pakai borderRadius untuk bikin sudut melengkung.
Contoh:

decoration: BoxDecoration(
  color: Colors.green,
  borderRadius: BorderRadius.circular(15),
),

Hasilnya: kotak hijau dengan sudut tumpul.
Tips: atribut ini nggak bisa dipakai kalau shape-nya lingkaran (BoxShape.circle).

5. boxShadow

Ingin kasih efek bayangan biar tampilan lebih modern? Pakai boxShadow.
Contoh:

decoration: BoxDecoration(
  color: Colors.white,
  boxShadow: [
    BoxShadow(
      color: Colors.grey.withOpacity(0.5),
      spreadRadius: 2,
      blurRadius: 10,
      offset: Offset(3, 3),
    ),
  ],
),

  • color → warna bayangan.

  • spreadRadius → seberapa jauh bayangan menyebar.

  • blurRadius → seberapa lembut bayangan.

  • offset → posisi bayangan (horizontal, vertikal).

Bayangan ini sering dipakai buat bikin efek card UI yang elegan.

6. gradient

Kalau warna polos terlalu membosankan, pakai gradient untuk memberi gradasi warna.
Contoh LinearGradient:

decoration: BoxDecoration(
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
),

Kamu juga bisa pakai RadialGradient atau SweepGradient. Dengan gradient, tampilan UI jadi lebih hidup.

7. shape

Atribut shape menentukan bentuk dari BoxDecoration. Ada dua pilihan:

  • BoxShape.rectangle (default) → kotak.

  • BoxShape.circle → lingkaran.

Contoh:

decoration: BoxDecoration(
  color: Colors.orange,
  shape: BoxShape.circle,
),

Hasilnya: sebuah lingkaran berwarna oranye. Cocok dipakai untuk avatar.

Contoh Lengkap Penggunaan BoxDecoration

Sekarang mari kita kombinasikan semua atribut di atas:

Container(
  width: 250,
  height: 250,
  decoration: BoxDecoration(
    color: Colors.white,
    image: DecorationImage(
      image: AssetImage('assets/bg.jpg'),
      fit: BoxFit.cover,
    ),
    border: Border.all(
      color: Colors.blueAccent,
      width: 4,
    ),
    borderRadius: BorderRadius.circular(20),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 8,
        offset: Offset(4, 4),
      ),
    ],
    gradient: LinearGradient(
      colors: [Colors.pink, Colors.orange],
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
    ),
    shape: BoxShape.rectangle,
  ),
)

Bayangkan hasilnya: kotak dengan background gradasi + gambar, punya border biru, sudut melengkung, dan bayangan manis. Inilah kekuatan BoxDecoration.

Tips Menggunakan BoxDecoration

  1. Gunakan seperlunya – Jangan semua atribut dipakai sekaligus kalau nggak perlu, bisa bikin UI terlihat “berat”.

  2. Hati-hati dengan performa – Banyak efek (shadow, gradient, gambar) bisa memengaruhi performa di device low-end.

  3. Gunakan theme – Kalau warnanya sering dipakai, lebih baik simpan di ThemeData agar konsisten.

  4. Eksperimen – Flutter UI fleksibel, jadi jangan takut coba-coba kombinasi atribut.

BoxDecoration adalah salah satu fitur penting di Flutter untuk mempercantik tampilan UI. Dengan berbagai atribut seperti color, image, border, borderRadius, boxShadow, gradient, dan shape, kita bisa membuat container yang sederhana jadi terlihat modern dan menarik.

Kalau baru belajar Flutter, jangan takut untuk eksperimen. Mulai dari yang simpel (warna dan border), lalu coba naik level dengan gradient dan shadow. Semakin sering berlatih, semakin terbiasa juga menggabungkan atribut-atribut ini untuk membuat desain yang sesuai kebutuhan aplikasi.

Jadi, kalau ada pertanyaan "apa saja atribut dari BoxDecoration?"
Jawabannya: color, image, border, borderRadius, boxShadow, gradient, shape.

0 Comments:

Post a Comment

Subscribe to: Post Comments (Atom)