Aplikita Enterprise - Memahami Layout di Flutter Column Row Stack dan Flex Secara Praktis

Memahami Layout di Flutter: Column, Row, Stack, dan Flex Secara Praktis

/in /by

Aplikita.com – Dalam pengembangan aplikasi menggunakan Flutter, kemampuan menyusun layout adalah keterampilan inti yang membedakan developer pemula dan developer yang benar-benar memahami arsitektur UI Flutter. Karena Flutter sepenuhnya berbasis widget tree, maka seluruh struktur tampilan dibangun melalui kombinasi widget layout.

Artikel ini akan membahas secara praktis dan sistematis bagaimana menggunakan Column, Row, Stack, Expanded, dan Flexible untuk membangun antarmuka yang rapi, responsif, dan profesional.

Pada dasarnya, layout di Flutter bekerja dengan sistem constraint. Setiap parent widget memberikan batasan ukuran (constraints) kepada child widget. Child kemudian menentukan ukuran berdasarkan batasan tersebut. Memahami konsep ini sangat penting agar tidak mengalami error seperti overflow atau layout yang tidak sesuai ekspektasi.

Widget layout paling dasar yang sering digunakan adalah Column dan Row.

Column digunakan untuk menyusun widget secara vertikal (atas ke bawah). Row digunakan untuk menyusun widget secara horizontal (kiri ke kanan).

Contoh penggunaan Column:

Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Nama"),
Text("Email"),
Text("Alamat"),
],
)

mainAxisAlignment mengatur posisi di sumbu utama (vertikal untuk Column), sedangkan crossAxisAlignment mengatur posisi di sumbu silang (horizontal untuk Column).

Contoh Row:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.menu),
Text("Dashboard"),
Icon(Icons.person),
],
)

Kombinasi Row dan Column adalah fondasi dari hampir semua layout aplikasi Flutter.

Namun sering muncul masalah ketika ukuran widget melebihi ruang yang tersedia. Di sinilah peran Expanded dan Flexible menjadi penting.

Expanded digunakan untuk membuat widget mengisi sisa ruang yang tersedia dalam Row atau Column.

Contoh:

Row(
children: [
Expanded(
child: Container(color: Colors.blue, height: 100),
),
Expanded(
child: Container(color: Colors.red, height: 100),
),
],
)

Kedua container akan membagi ruang secara proporsional 50:50.

Jika ingin pembagian berbeda, gunakan parameter flex:

Expanded(
flex: 2,
child: Container(color: Colors.blue),
),
Expanded(
flex: 1,
child: Container(color: Colors.red),
),

Artinya ruang dibagi dengan rasio 2:1.

Flexible mirip dengan Expanded, tetapi memberi fleksibilitas lebih dalam menentukan bagaimana child menyesuaikan ukuran.

Selanjutnya adalah Stack, yang digunakan untuk menumpuk widget secara bertumpuk (overlapping). Stack sangat berguna untuk membuat layout seperti badge notifikasi, overlay gambar, atau tombol melayang.

Contoh:

Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.blue,
),
Positioned(
top: 10,
right: 10,
child: Icon(Icons.notifications, color: Colors.white),
),
],
)

Widget Positioned digunakan di dalam Stack untuk menentukan posisi spesifik child.

Dalam praktik nyata, kombinasi Column, Row, Expanded, dan Stack memungkinkan developer membangun UI kompleks tanpa perlu menulis layout XML seperti di Android native.

Karena Flutter menggunakan bahasa Dart dengan pendekatan deklaratif, kita cukup mendeskripsikan struktur layout sesuai hierarki yang diinginkan. Framework akan menangani proses rendering secara efisien.

Selain widget dasar tersebut, ada beberapa prinsip penting dalam membangun layout profesional:

Pertama, hindari nested Column dan Row yang terlalu dalam karena dapat membuat kode sulit dibaca. Pisahkan menjadi widget terpisah jika perlu.

Kedua, gunakan MediaQuery untuk membuat layout responsif terhadap ukuran layar.

Contoh:

double lebar = MediaQuery.of(context).size.width;

Ketiga, gunakan SingleChildScrollView ketika konten berpotensi melebihi tinggi layar agar tidak terjadi overflow.

Keempat, pahami error seperti “RenderFlex overflowed” yang biasanya muncul akibat penggunaan Row atau Column tanpa Expanded atau Flexible.

Dengan menguasai layout system di Flutter, kamu akan mampu membangun berbagai tampilan seperti:

  • Halaman login

  • Dashboard

  • List produk

  • Profile page

  • Landing screen modern

Layout adalah fondasi visual dari aplikasi. Jika struktur layout kuat dan terorganisir, maka implementasi state management dan integrasi API di tahap berikutnya akan jauh lebih mudah.

Dengan selesainya artikel ini, kamu telah menyelesaikan fase fundamental Flutter mulai dari pengenalan, Dart, instalasi, struktur project, konsep widget, hingga praktik membuat aplikasi pertama dan memahami layout.

Di seri berikutnya, kita bisa masuk ke level intermediate seperti navigasi antar halaman, form validation, atau state management modern seperti Provider dan Riverpod untuk membangun aplikasi yang lebih kompleks dan production-ready.

Views: 51