Widget dasar

Tampilan pertama sebuah aplikasi Flutter hampir selalu tersusun dari segelintir widget yang sama, yaitu Text, Row, Column, Container, Padding, dan Center. Topik ini membahas peran keenam widget tersebut, properti yang paling sering digunakan, dan cara menggabungkannya menjadi kartu sederhana. Contoh yang digunakan bertema jadwal piket dan statistik nilai ujian.

Text: menampilkan teks beserta gayanya#

Text menampilkan potongan teks, dan bentuk tampilannya diatur melalui TextStyle pada properti style. Apabila style tidak diberikan, Text mengikuti gaya bawaan dari tema yang berlaku pada posisinya. Ukuran huruf, ketebalan, warna, dan jarak antarhuruf adalah properti TextStyle yang paling sering diatur.

// tidak-dijalankan
const Text(
  'Jadwal Piket',
  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
)

Pada contoh tersebut, teks ditampilkan dengan ukuran huruf 20 piksel logis dan huruf tebal. Untuk teks yang panjang, properti maxLines membatasi jumlah baris, sedangkan overflow menentukan perlakuan terhadap sisa teks, misalnya dipotong dan diakhiri tanda tiga titik melalui TextOverflow.ellipsis. Kombinasi keduanya lazim pada kartu ringkas yang ruangnya terbatas.

Row dan Column: sumbu utama dan sumbu silang#

Row menata anak-anaknya dalam satu baris horizontal, sedangkan Column menatanya dalam satu kolom vertikal. Arah susunan itu disebut sumbu utama (main axis), sedangkan arah tegak lurusnya disebut sumbu silang (cross axis). Dua properti perataan mengatur posisi anak-anak, yaitu mainAxisAlignment pada sumbu utama dan crossAxisAlignment pada sumbu silang.

Nilai MainAxisAlignment yang paling sering digunakan adalah start, center, end, spaceBetween, dan spaceEvenly, sedangkan CrossAxisAlignment menyediakan start, center, end, dan stretch. Nilai stretch memaksa anak meregang hingga memenuhi sumbu silang. Pemilihan nilai ditentukan oleh ruang kosong yang ingin didistribusikan, bukan oleh selera.

// tidak-dijalankan
Column(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: const [
    Text('Senin: Ali'),
    Text('Selasa: Budi'),
    Text('Rabu: Citra'),
  ],
)

Column pada contoh membagi ruang vertikal yang tersisa di antara tiga baris piket, dan setiap baris disusun rata kiri melalui crossAxisAlignment. Daftar children berupa List<Widget>, sehingga isinya boleh berasal dari variabel atau hasil pengolahan data, bukan hanya nilai yang dituliskan langsung pada kode.

Container: kotak dengan dekorasi dan jarak#

Container membungkus satu anak dengan dekorasi, jarak, dan ukuran yang dapat diatur. Properti padding memberi jarak di dalam kotak, margin memberi jarak ke widget di luarnya, color mengisi warna latar, sedangkan decoration menggambar bentuk yang lebih lengkap seperti sudut membulat dan garis tepi.

Properti color sebenarnya bentuk singkat dari decoration: BoxDecoration(color: ...), sehingga keduanya tidak boleh diberikan sekaligus pada satu Container. Apabila dekorasi diperlukan, warna latar ditempatkan di dalam BoxDecoration. Pelanggaran aturan ini memicu error saat aplikasi berjalan.

// tidak-dijalankan
Container(
  margin: const EdgeInsets.all(12),
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(8),
  ),
  child: const Text('Statistik nilai ujian'),
)

Properti padding berada di dalam garis kotak, sedangkan margin berada di luarnya, sehingga keduanya dapat digunakan bersama seperti pada contoh. Apabila hanya jarak yang dibutuhkan tanpa dekorasi, gunakan Padding karena widget itu dibuat khusus untuk tugas tersebut.

Padding dan Center: widget dengan satu tugas#

Padding menambahkan jarak kosong di sekeliling anaknya, dan Center menempatkan anak di tengah ruang yang tersedia. Keduanya hanya memiliki satu tugas, dan justru karena itu keduanya muncul di hampir setiap layar. Pembungkus semacam ini menegaskan kembali pola komposisi, yaitu kebutuhan kecil pun dinyatakan sebagai widget.

// tidak-dijalankan
Center(
  child: Padding(
    padding: const EdgeInsets.all(24),
    child: Text('Konten di tengah layar'),
  ),
)

Center mengisi seluruh ruang yang diberikan induknya, lalu meletakkan anaknya tepat di tengah. Padding berada di dalam Center, sehingga anak terlebih dahulu diberi jarak sebelum ditengahkan. Urutan pembungkusan menentukan hasil akhir, dan membacanya dari luar ke dalam membantu memprediksi tampilannya. Jarak dinyatakan dengan EdgeInsets yang menyediakan beberapa bentuk singkat, yaitu all untuk semua sisi, symmetric untuk pasangan horizontal dan vertikal, serta only untuk sisi tertentu.

Ringkasan peran widget#

Tabel berikut merangkum peran keenam widget pada topik ini.

Peran yang tumpang-tindih perlu dibedakan saat memilih. Container dengan padding menghasilkan tampilan yang sama dengan Padding, tetapi Padding dipilih apabila tidak ada dekorasi karena widget itu dibuat khusus untuk satu tugas. Sebaliknya, Container dipilih apabila warna, garis tepi, atau sudut membulat ikut diperlukan.

Keenam widget itu saling melengkapi pada hampir semua layar. Kartu statistik, misalnya, berupa Container berdekorasi yang di dalamnya terdapat Padding, Column berisi Text judul dan beberapa Row isi, lalu seluruh kartu ditengahkan oleh Center pada layar. Membaca kombinasi seperti ini mempraktikkan kembali keterampilan membaca pohon widget.

Kesalahan umum#

1. Memberi color dan decoration sekaligus pada Container. Keduanya bertentangan karena color hanyalah bentuk singkat dari warna di dalam BoxDecoration, sehingga Flutter menampilkan error. Perbaikannya, pindahkan warna ke dalam BoxDecoration.
2. Memuat konten yang lebih panjang dari layar pada Row atau Column. Widget ini tidak dapat digulir, sehingga konten yang meluber memunculkan garis peringatan kuning-hitam beserta pesan error overflow. Perbaikannya, perpendek isi, biarkan anak menyesuaikan ruang, atau gunakan widget daftar yang dapat digulir seperti ListView untuk konten yang panjangnya tidak pasti.

Ringkasan#

• Text menampilkan teks dengan gaya yang diatur melalui TextStyle, termasuk batas baris dan perlakuan teks yang terpotong.
• Row dan Column menata anak pada sumbu utama dan sumbu silang melalui mainAxisAlignment serta crossAxisAlignment.
• Container menggabungkan dekorasi, jarak, dan ukuran, sedangkan Padding dan Center masing-masing menangani satu tugas.
• Jarak dinyatakan dengan EdgeInsets, dan bentuk singkatnya adalah all, symmetric, serta only.

Referensi#

• Basic widgets — Flutter — Halaman resmi widget dasar Flutter seperti Text, Row, Column, dan Container.
• Text class — Flutter API — Dokumentasi Text, termasuk TextStyle, maxLines, dan overflow.
• Row class — Flutter API — Dokumentasi Row beserta properti perataannya.
• Column class — Flutter API — Dokumentasi Column beserta properti perataannya.
• Container class — Flutter API — Dokumentasi Container, termasuk hubungan color dan decoration.
• Padding class — Flutter API — Dokumentasi Padding beserta EdgeInsets.
• Center class — Flutter API — Dokumentasi Center untuk menengahkan widget.