UNIVERSITAS PAMULANG
TEKNIK INFORMATIKA
MODUL PRAKTIKUM
MOBILE PROGRAMMING
Membuat Layout dengan Row, Column dan Stack
Abstract
Modul ini membahas pembuatan layout aplikasi Flutter menggunakan widget Row, Column,
dan Stack untuk menyusun komponen antarmuka secara horizontal, vertikal, dan
bertumpuk dalam membangun tampilan aplikasi sederhana.
Iyu Priatna
dosen03152@[Link]
MODUL PRAKTIKUM MOBILE
PROGRAMMING
Pertemuan 6
Membuat Layout Aplikasi Menggunakan Row, Column, dan Stack
1. Deskripsi Singkat
Dalam pengembangan aplikasi mobile menggunakan Flutter, pengaturan tata letak (layout)
sangat penting untuk menampilkan komponen antarmuka pengguna secara rapi dan
terstruktur. Flutter menyediakan berbagai widget layout yang memudahkan pengembang
dalam menyusun posisi komponen pada layar. Pada pertemuan ini akan dipelajari
penggunaan widget Row, Column, dan Stack untuk mengatur tata letak elemen dalam aplikasi
Flutter.
2. Tujuan Pembelajaran
Setelah mengikuti praktikum ini, mahasiswa diharapkan mampu:
1. Memahami konsep dasar layout dalam Flutter.
2. Menggunakan widget Row untuk menyusun komponen secara horizontal.
3. Menggunakan widget Column untuk menyusun komponen secara vertikal.
4. Menggunakan widget Stack untuk menumpuk beberapa widget dalam satu area.
5. Mengkombinasikan beberapa layout untuk membangun tampilan aplikasi sederhana.
3. Dasar Teori
Layout pada Flutter diatur menggunakan widget. Setiap elemen tampilan seperti teks,
gambar, tombol, maupun container merupakan widget yang dapat disusun menggunakan
widget layout.
3.1 Widget Row
Widget Row digunakan untuk menyusun beberapa widget secara horizontal (kiri ke kanan).
Properti utama yang sering digunakan adalah children dan mainAxisAlignment.
3.2 Widget Column
Widget Column digunakan untuk menyusun widget secara vertikal (atas ke bawah). Properti
yang sering digunakan adalah children, mainAxisAlignment, dan crossAxisAlignment.
3.3 Widget Stack
Widget Stack digunakan untuk menumpuk beberapa widget sehingga dapat saling
bertumpukan seperti layer. Widget Positioned biasanya digunakan untuk menentukan posisi
widget di dalam Stack.
4. Praktikum
Langkah 1: Membuat Project Baru
Masuk ke folder project
Jalankan project
Contoh kode penggunaan Column
Contoh penggunaan Row
Contoh penggunaan Stack
5. Tugas Praktikum
1. Gunakan Column sebagai layout utama.
2. Tambahkan judul aplikasi menggunakan Text.
3. Tambahkan Row berisi beberapa Icon.
4. Tambahkan Stack yang berisi Container sebagai background dan Text di atasnya.
5. Screenshot hasil tampilan aplikasi.
6. Kesimpulan
Widget Row, Column, dan Stack merupakan komponen penting dalam pengaturan layout
aplikasi Flutter. Row digunakan untuk menyusun widget secara horizontal, Column secara
vertikal, dan Stack untuk menumpuk beberapa widget dalam satu area.