Praktikum Pemrograman Mobile: Layout Responsif & Navigasi Aplikasi

Panduan praktikum step by step yang bisa langsung dipakai di modul atau lembar kerja siswa.

Panduan ini sudah mencakup dua praktikum (Layout Responsif + Navigasi Aplikasi) dalam satu project, lengkap dengan penjelasan setiap bagian kodenya.

---

🧑‍💻 Panduan Praktikum Flutter

Praktikum 1 & 2 — Layout Responsif & Navigasi Aplikasi

Target:

• Siswa memahami layout responsif menggunakan Column, Row, Flexible, Expanded, dan LayoutBuilder.

• Siswa mampu membuat navigasi antar-halaman menggunakan Navigator.push() dan BottomNavigationBar.

---

📌 Langkah-Langkah Praktikum

1️⃣ Membuat Project Baru

1. Buka zapp.run.

2. Pilih template Flutter.

3. Klik Create → Akan terbuka file main.dart.

4. Hapus kode bawaan dan ganti dengan kode berikut.

---

2️⃣ Salin Kode Berikut

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Praktikum Layout & Navigasi',
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

// Praktikum 1 – Layout Responsif
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Praktikum 1 – Layout Responsif')),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return Column(
            children: [
              Flexible(
                flex: 2,
                child: Container(
                  color: Colors.blue,
                  child: const Center(child: Text('Bagian Atas')),
                ),
              ),
              Flexible(
                flex: 3,
                child: Row(
                  children: [
                    Expanded(
                      child: Container(
                        color: Colors.green,
                        child: const Center(child: Text('Kiri')),
                      ),
                    ),
                    Expanded(
                      child: Container(
                        color: Colors.orange,
                        child: const Center(child: Text('Kanan')),
                      ),
                    ),
                  ],
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const SecondPage()),
                  );
                },
                child: const Text('Ke Halaman Kedua'),
              ),
            ],
          );
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
          BottomNavigationBarItem(icon: Icon(Icons.pageview), label: "Page 2"),
        ],
        onTap: (index) {
          if (index == 1) {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondPage()),
            );
          }
        },
      ),
    );
  }
}

// Praktikum 2 – Halaman Kedua + Navigasi
class SecondPage extends StatelessWidget {
  const SecondPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Praktikum 2 – Halaman Kedua')),
      body: const Center(
        child: Text(
          'Ini Halaman Kedua',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

---

3️⃣ Jalankan Program

• Klik tombol ▶ Run di zapp.run.

• Amati tampilan layout:

  • Bagian atas (biru)

  • Bagian bawah kiri (hijau)

  • Bagian bawah kanan (oranye)

• Klik tombol "Ke Halaman Kedua" atau ikon BottomNavigationBar → akan pindah ke halaman kedua.

---

🔎 Penjelasan Kode

Bagian Kode	Penjelasan
runApp(const MyApp())	Fungsi utama untuk menjalankan aplikasi.
MaterialApp(...)	Membungkus seluruh aplikasi dengan gaya Material Design.
HomePage	Halaman utama aplikasi (berisi layout responsif).
LayoutBuilder(...)	Mengecek ukuran layar, memungkinkan kita membuat layout yang responsif.
Column(...)	Menyusun widget secara vertikal.
Row(...)	Menyusun widget secara horizontal.
Flexible & Expanded	Membagi ruang secara proporsional agar tampilan menyesuaikan layar.
ElevatedButton(...)	Tombol yang menavigasi ke halaman kedua menggunakan Navigator.push().
BottomNavigationBar(...)	Menu navigasi di bawah layar yang bisa dipakai untuk berpindah halaman.
SecondPage	Halaman kedua yang akan ditampilkan setelah tombol ditekan.

---

🎯 Tugas Siswa

1. Ubah warna Container menjadi warna lain (misalnya ungu, merah muda, abu-abu).

2. Tambahkan satu Expanded lagi di bawah tombol dengan warna berbeda.

3. Ubah teks di halaman kedua menjadi nama kalian.

4. Tambahkan satu ikon baru di BottomNavigationBar (misalnya Icons.info) dan buat halaman ketiga dengan teks “Ini Halaman Ketiga”.

---

💡 Tips Guru

• Ajak siswa membandingkan hasil di layar HP dan di layar PC untuk memahami konsep responsif.

• Diskusikan kapan sebaiknya menggunakan Column + Row dibanding GridView.

• Tantang siswa untuk membuat tema warna sendiri menggunakan ThemeData.

---

Salam : Redaksi