Menjelajah Banyak Layar di Flutter: Memahami Navigasi dan BottomNavigationBar

Setelah sukses membuat aplikasi interaktif di tugas sebelumnya, saya dihadapkan pada satu realitas penting: hampir tidak ada aplikasi di dunia ini yang hanya memiliki satu layar. Aplikasi sungguhan memiliki banyak halaman yang saling terhubung.

Tugas keempat saya kali ini adalah membangun aplikasi dengan arsitektur multi-page. Tidak tanggung-tanggung, saya membuat 4 layar sekaligus: Home, Profile, Settings, dan sebuah tab tambahan.

Di seri ini, saya belajar bagaimana menghubungkan layar-layar tersebut menggunakan BottomNavigationBar dan Navigator.push. Mari kita bedah keajaibannya!

1. Fondasi Utama: BottomNavigationBar

Langkah pertama yang saya lakukan adalah membuat menu navigasi di bagian bawah layar. Di dalam file main.dart, saya membuat sebuah StatefulWidget khusus bernama MainNavigation.

Untuk membuat tab ini berfungsi, saya menggunakan sebuah variabel _selectedIndex yang dimulai dari angka 0. Setiap kali ikon di tab bawah ditekan, fungsi onTap akan memperbarui nilai indeks tersebut dan mengganti tampilan layar sesuai dengan daftar _pages yang berisi HomeScreen, ProfileScreen, SettingScreen, dan "More Tab".

bottomNavigationBar: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  currentIndex: _selectedIndex,
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  items: const [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: "Home"),
    // ... item lainnya
  ],
)

2. Berpindah Layar Secara Manual dengan Navigator.push

Selain menggunakan navigasi bawah, ada kalanya kita ingin berpindah layar saat menekan sebuah tombol. Di sinilah saya berkenalan dengan Navigator.

Pada layar HomeScreen, saya membuat sebuah dashboard berisi kartu-kartu metrik (Today, Weekly, Monthly). Tepat di bawahnya, saya menambahkan sebuah ElevatedButton. Ketika tombol ini ditekan, saya menggunakan Navigator.push untuk mendorong ProfileScreen ke atas tumpukan layar.

ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (_) => ProfileScreen()),
    );
  },
  child: Text("Go to Profile"),
),

3. Mengambil Foto Asli dari Galeri

Layar profil saya tidak lagi sekadar dummy statis! Di ProfileScreen, saya menambahkan fitur untuk mengedit nama, email, dan bahkan mengganti foto profil.

Untuk mewujudkan fitur foto ini, saya memanfaatkan package tambahan bernama image_picker. Ketika area CircleAvatar ditekan, fungsi pickImage akan berjalan dan membuka galeri smartphone pengguna.

Future<void> pickImage() async {
  final picked = await _picker.pickImage(source: ImageSource.gallery);
  if (picked != null) {
    setState(() {
      _image = File(picked.path);
    });
  }
}

Melihat aplikasi buatan sendiri bisa mengakses galeri dan menampilkan foto yang saya pilih secara real-time adalah kepuasan tersendiri! Di layar ini, saya juga menggunakan Navigator.pop pada tombol "Save" untuk kembali ke layar sebelumnya sambil membawa data yang sudah diubah.

4. Tantangan Terbesar: Mengubah Tema (Dark Mode)

Bagian paling menantang sekaligus menyenangkan ada di layar SettingScreen. Di sini, saya membuat dua sakelar (SwitchListTile): satu untuk notifikasi (yang akan memunculkan SnackBar), dan satu lagi untuk mengaktifkan Dark Mode.

Tantangannya adalah: sakelar tema ada di SettingScreen, tapi yang bisa mengubah tema seluruh aplikasi adalah layar terluar yaitu MyApp yang ada di main.dart.

Solusinya? Saya harus “melempar” fungsi dari atas ke bawah. Saya membuat fungsi toggleTheme di main.dart, lalu mengirimkan fungsi tersebut ke dalam MainNavigation, dan meneruskannya lagi masuk ke dalam SettingScreen.

SwitchListTile(
  value: isDarkMode,
  onChanged: (value) {
    setState(() {
      isDarkMode = value;
    });
    widget.toggleTheme(value); // Memanggil fungsi dari layar utama!
  },
),

Begitu sakelar ditekan, seluruh aplikasi seketika berubah menjadi mode gelap.

Kesimpulan

Tugas keempat ini benar-benar menyatukan kepingan-kepingan puzzle yang saya pelajari sebelumnya. Membangun navigasi yang baik, mengelola perpindahan data antar layar dengan Navigator, mengakses perangkat keras (galeri foto), hingga mengelola state yang memengaruhi seluruh aplikasi (tema gelap).

Membangun aplikasi multi-page mengajarkan saya bahwa penataan struktur file dan kode (architecture) sama pentingnya dengan membuat desain antarmuka yang indah.

Bagi teman-teman yang ingin melihat bagaimana semua file ini (main.dart, HomeScreen.dart, dll) saling berinteraksi, silakan kunjungi repository GitHub saya!