Laporan Praktikum 4

Mata Kuliah: Aplikasi Mobile

Tujuan

Memahami konsep navigation dan routing pada aplikasi Flutter.
Membuat aplikasi dengan beberapa halaman (multiple screen).
Menggunakan Navigator.push() dan Navigator.pop() untuk berpindah antarhalaman.
Mengirim dan menerima data antarhalaman menggunakan constructor maupun arguments.
Mengimplementasikan navigasi tambahan seperti BottomNavigationBar, TabBar, atau Drawer.

Alat dan Bahan

Laptop/PC minimal RAM 4 GB, prosesor dual-core
Smartphone Android (opsional untuk uji di device)
Flutter SDK
Dart SDK
Visual Studio Code + ekstensi Flutter & Dart
Android Studio + Emulator
Modul Praktikum 4: Navigation & Routing

Langkah Praktikum

Multiple Screen : Buat file baru lib/navigation.dart untuk mengatur navigasi dasar dan isi dengan code yang tertera di modul.

Gambar 1. Tampilan awal aplikasi (halaman produk)

Gambar 2. Halaman detail produk
Kirim dan Terima Data : Buat file baru lib/nav_data.dart untuk implementasi pengiriman data antar halaman, lalu isi dengan code yang tertera di modul.

Gambar 3. Tampilan Home

Gambar 4. Halaman Profile

Gambar 5. Halaman Product

Tugas Praktikum

Membuat aplikasi sederhana dengan dua halaman: Login dan Home. Pada halaman Login disediakan input untuk username dan password. Ketika tombol Login ditekan, aplikasi melakukan navigasi menuju halaman Home dengan membawa data tersebut. Di halaman Home, data username & password ditampilkan kembali. Untuk memperkaya interaksi, ditambahkan widget navigasi BottomNavigationBar.

1. Bagian LoginPage → controller & input

class LoginPage extends StatefulWidget {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  // Controller untuk input username & password
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  // Fungsi untuk login dan mengirim data ke HomePage
  void _login() {
    String username = usernameController.text;
    String password = passwordController.text;

    Navigator.pushNamed(
      context,
      '/home',
      arguments: {'username': username, 'password': password},
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade200,
      body: Center(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(30),
          child: Column(
            children: [
              // Input username
              TextField(
                controller: usernameController,
                decoration: const InputDecoration(
                  labelText: "Username",
                  prefixIcon: Icon(Icons.person),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Cuplikan Kode halaman Login

2. Hidden Password → obscureText: true

TextField(
  controller: passwordController,
  decoration: const InputDecoration(
    labelText: "Password",
    prefixIcon: Icon(Icons.lock),
  ),
  obscureText: true, //
),

Cuplikan Kode Hidden Password

3. Bagian HomePage → ModalRoute + Tampilkan

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

  @override
  Widget build(BuildContext context) {
    // Ambil data dari LoginPage
    final args =
        ModalRoute.of(context)!.settings.arguments as Map?;

    final username = args?['username'] ?? 'Unknown';
    final password = args?['password'] ?? 'Unknown';

    return Scaffold(
      appBar: AppBar(title: const Text("Home")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Welcome, $username!",
                style: const TextStyle(
                    fontSize: 22, fontWeight: FontWeight.bold)),
            const SizedBox(height: 10),
            Text("Your password is: $password"),
          ],
        ),
      ),
    );
  }
}

Cuplikan Kode Halaman Utama

4. Hasil

Home Page setelah Login — Gambar 7. Halaman Home setelah Login

Bottom Navigation Bar — Gambar 8. Styling dan Tambahan

Kesimpulan

Praktikum 4 berhasil menunjukkan konsep navigation dan routing pada Flutter: berpindah antarhalaman, mengirim & menerima data, hingga menampilkannya kembali. Dengan tambahan widget BottomNavigationBar, aplikasi menjadi lebih interaktif dan user-friendly. Navigasi merupakan aspek penting dalam membangun aplikasi mobile yang dinamis.