Modul Praktikum Flutter
Topik: Layout pada Flutter dan Penggunaan Layout Kompleks di
Visual Studio Code
1. Tujuan
Setelah menyelesaikan modul ini, mahasiswa diharapkan mampu:
1. Memahami konsep dasar layout pada Flutter.
2. Menggunakan widget layout dasar seperti Container , Row , Column , dan Expanded .
3. Mengimplementasikan layout yang lebih kompleks menggunakan ListView , GridView , dan
Stack .
4. Menggunakan Visual Studio Code untuk mengembangkan dan menjalankan aplikasi Flutter dengan
struktur layout yang baik.
2. Materi Teori
2.1 Pengertian Layout dalam Flutter
Layout adalah cara untuk mengatur tampilan antarmuka pengguna (UI) dalam aplikasi Flutter. Flutter
menggunakan sistem berbasis widget, sehingga setiap elemen pada layar—termasuk layout itu sendiri—
merupakan widget. Widget layout digunakan untuk mengatur posisi, ukuran, dan hubungan antar-widget
dalam sebuah tampilan.
2.2 Jenis Widget Layout Dasar
1. Container: Digunakan untuk membungkus widget lain dan memberikan kontrol terhadap ukuran,
warna, margin, dan padding.
2. Row dan Column: Menyusun widget secara horizontal ( Row ) atau vertikal ( Column ).
3. Expanded dan Flexible: Mengatur proporsi ruang yang diambil oleh widget di dalam Row atau
Column .
4. Padding, Align, dan Center: Memberikan pengaturan posisi dan jarak antar elemen untuk tampilan
yang lebih rapi.
2.3 Layout Kompleks
Selain layout dasar, Flutter menyediakan widget layout lanjutan untuk tampilan yang lebih kompleks:
1. ListView – Menampilkan daftar item secara vertikal atau horizontal dengan kemampuan scroll.
2. GridView – Menampilkan item dalam bentuk grid dua dimensi.
1
3. Stack – Menumpuk beberapa widget di atas satu sama lain, berguna untuk overlay, tombol
mengambang, atau banner.
2.4 Visual Studio Code sebagai Lingkungan Pengembangan Flutter
Visual Studio Code merupakan editor yang banyak digunakan untuk mengembangkan aplikasi Flutter
karena menyediakan ekstensi yang lengkap, seperti:
• Flutter & Dart Plugin: Untuk menjalankan dan menganalisis kode Flutter.
• Emulator Android/iOS Integration: Untuk menguji tampilan layout secara langsung.
Langkah utama dalam menggunakan VS Code untuk Flutter:
1. Buka proyek Flutter dengan perintah flutter create nama_project .
2. Jalankan aplikasi menggunakan terminal dengan flutter run .
3. Gunakan fitur “Hot Reload” untuk memperbarui tampilan secara cepat saat layout diubah.
3. Latihan Praktikum 1: Layout Dasar
3.1 Tujuan
Mahasiswa membuat layout sederhana yang menggunakan kombinasi widget dasar ( Container , Row ,
Column , dan Expanded ).
3.2 Langkah Praktikum
1. Buka Visual Studio Code.
2. Buat proyek baru
3. Buka file lib/[Link] dan ganti seluruh isi dengan kode berikut:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: const Text('Latihan Layout Flutter'),
2
backgroundColor: [Link],
),
body: const LayoutExample(),
),
);
}
}
class LayoutExample extends StatelessWidget {
const LayoutExample({[Link]});
@override
Widget build(BuildContext context) {
return Column(
children: [
Container(
width: [Link],
padding: const [Link](16),
color: [Link],
child: const Center(
child: Text(
'Dashboard Servis Kendaraan',
style: TextStyle(fontSize: 22, color: [Link]),
),
),
),
Row(
mainAxisAlignment: [Link],
children: [
Container(width: 100, height: 100, color: [Link], child:
const Center(child: Text('Servis'))),
Container(width: 100, height: 100, color: [Link], child:
const Center(child: Text('Sparepart'))),
Container(width: 100, height: 100, color: [Link], child:
const Center(child: Text('Riwayat'))),
],
),
const SizedBox(height: 20),
Expanded(
child: Container(
color: [Link][200],
child: const Center(
child: Text(
'Selamat Datang di Sistem Servis Online',
style: TextStyle(fontSize: 18, fontWeight: [Link]),
),
),
),
3
),
],
);
}
}
3.3 Tugas Mandiri
1. Tambahkan dua baris menu di bawah baris pertama.
2. Tambahkan footer di bagian bawah dengan warna berbeda.
3. Ganti teks sesuai tema aplikasi yang dibuat mahasiswa.
4. Latihan Praktikum 2: Layout Kompleks
4.1 Tujuan
Mahasiswa membuat layout yang lebih kompleks menggunakan widget ListView , GridView , dan
Stack .
4.2 Langkah Praktikum
1. Buka proyek Flutter baru:
flutter create latihan_layout_kompleks
cd latihan_layout_kompleks
code .
1. Buka file lib/[Link] dan isi dengan kode berikut:
import 'package:flutter/[Link]';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({[Link]});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: const Text('Latihan Layout Kompleks')),
body: const LayoutComplexExample(),
4
),
);
}
}
class LayoutComplexExample extends StatelessWidget {
const LayoutComplexExample({[Link]});
@override
Widget build(BuildContext context) {
return ListView(
children: [
Stack(
children: [
Container(height: 150, color: [Link]),
const Positioned(
bottom: 20,
left: 20,
child: Text('Banner Servis', style: TextStyle(fontSize: 24,
color: [Link])),
),
],
),
Padding(
padding: const [Link](16.0),
child: [Link](
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
children: [Link](4, (index) {
return Container(
color: [Link][(index + 1) * 200],
child: Center(
child: Text('Menu ${index + 1}', style: const
TextStyle(color: [Link], fontSize: 18)),
),
);
}),
),
),
],
);
}
}
5
4.3 Penjelasan Kode
• Stack digunakan untuk menampilkan teks di atas banner.
• ListView memungkinkan layout digulir secara vertikal.
• GridView digunakan untuk menampilkan menu dalam dua kolom.
• shrinkWrap ** dan ** NeverScrollableScrollPhysics digunakan agar GridView bisa
diletakkan di dalam ListView .
4.4 Tugas Mandiri
1. Tambahkan tiga banner berbeda di bagian atas menggunakan Stack .
2. Ubah jumlah kolom pada GridView menjadi tiga.
3. Tambahkan teks deskriptif di bawah grid.
5. Evaluasi
1. Apa perbedaan utama antara ListView dan GridView ?
2. Dalam situasi apa Stack lebih tepat digunakan dibandingkan Column atau Row ?
3. Mengapa properti shrinkWrap diperlukan saat menggunakan GridView di dalam ListView ?
6. Penutup
Melalui modul ini, mahasiswa telah mempelajari konsep layout dasar dan kompleks dalam Flutter
menggunakan Visual Studio Code. Penguasaan layout menjadi dasar penting untuk membangun
antarmuka aplikasi yang responsif, dinamis, dan mudah diadaptasi untuk berbagai perangkat.