Mata Kuliah: Praktikum Aplikasi Mobile 4

Apa yang Akan Dipelajari

• Memahami aturan utama tentang bagaimana berpindah antar halaman dan mengatur jalur di dalam kerangka kerja Flutter
• Membuat program yang memiliki lebih dari satu tampilan yang berbeda
• Menggunakan perintah Navigator.push() dan Navigator.pop() sebagai cara untuk mengubah tampilan yang muncul di layar
• Memindahkan informasi dari satu tampilan ke tampilan lainnya memakai cara constructor atau parameter arguments
• Menerapkan alat bantu navigasi tambahan seperti BottomNavigationBar, TabBar, atau menu Drawer

Alat yang Dibutuhkan

• Komputer dengan kemampuan dasar: RAM minimal 4 GB, prosesor dengan 2 inti
• Ponsel Android untuk mencoba langsung (tidak harus ada)
• Perangkat Lunak untuk Membuat Aplikasi Flutter
• Perangkat Lunak untuk Membuat Aplikasi Dart
• Program Editor Visual Studio Code beserta alat tambahan Flutter dan Dart
• Program Android Studio lengkap dengan fitur Emulator
• Buku petunjuk latihan 4t tentang cara navigasi dan mengatur jalur

Langkah-Langkah Pelaksanaan

1. Mengatur Banyak Tampilan: Bikin file bernama lib/navigation.dart yang berguna untuk mengatur dasar-dasar navigasi, lalu masukkan kode program seperti yang ditunjukkan di buku petunjuk
   

2. 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.

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

import 'package:flutter/material.dart';

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

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login Page'),
        backgroundColor: Colors.blueAccent,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextField(
              controller: usernameController,
              decoration: const InputDecoration(
                labelText: 'Username',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: passwordController,
              obscureText: true,
              decoration: const InputDecoration(
                labelText: 'Password',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                String username = usernameController.text;
                String password = passwordController.text;

                // Navigasi ke HomePage dengan membawa data
                Navigator.pushNamed(
                  context,
                  '/home',
                  arguments: {
                    'username': username,
                    'password': password,
                  },
                );
              },
              child: const Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

Outputnya :

Kesimpulan

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