Route dan Navigator di Flutter

View Categories

Route dan Navigator di Flutter

Saat ini, aplikasi seluler menjadi tren yang sedang berkembang. Di Play Store, tersedia banyak aplikasi yang menampilkan konten dalam halaman atau layar penuh yang disebut sebagai “Route” di Flutter. Di Android, halaman atau layar ini disebut “Activity” dan di iOS disebut “ViewController”. Namun, dalam Flutter, istilah “Widget” digunakan untuk merujuk pada route.

Untuk membuat route di Flutter, kamu dapat menulisnya dalam bentuk class menggunakan konsep pemrograman berorientasi object di Dart. Setiap route dapat dituliskan sebagai class terpisah dan memiliki konten serta UI yang unik.

Sekarang, mari kita buat dua route yang masing-masing memiliki App Bar dan ElevatedButton yang unik. Berikut adalah kode untuk membuat kedua route tersebut:

class HomeRoute extends StatelessWidget {
  const HomeRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
            child: const Text('Halaman 2'),
            onPressed: () {
              //disini akan diletakkan kode untuk navigasi ke halaman 2
            }),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Halaman 2"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            //disini akan diletakkan fungsi untuk navigasi ke halaman home
          },
          child: const Text('Home!'),
        ),
      ),
    );
  }
}

Navigator

Seperti namanya, Navigator adalah sebuah widget yang membantu kita untuk navigasi antar route . Navigator mengikuti metode tumpukan ketika berurusan dengan route-route tersebut. Berdasarkan tindakan yang dilakukan oleh pengguna, route-route tersebut akan ditumpuk satu per satu dan ketika tombol kembali ditekan, maka akan kembali ke route yang baru saja dikunjungi. Navigator adalah sebuah widget yang mengikuti disiplin tumpukan.

Mendefinisikan Halaman Utama

Saat melakukan navigasi, hal pertama yang perlu kita lakukan adalah mendefinisikan atau menginisialisasi “halaman utama”. Halaman utama dapat menjadi route mana saja sesuai dengan kebutuhan kita. Halaman utama biasanya akan ditempatkan di bagian bawah tumpukan navigator. Sekarang mari kita lihat bagaimana menginisialisasi HomeRoute() sebagai halaman utama kita:


void main() {
  runApp(MaterialApp(
    home: HomeRoute(),
  ));
}

Berpindah ke Halaman

Setelah kita menentukan Halaman Utama, yang perlu dilakukan adalah berpindah dari halaman utama ke route lain di aplikasi. Untuk itu, widget navigator memiliki metode yang disebut Navigator.push(). Metode ini akan menambahkan route di atas halaman utama, sehingga menampilkan route kedua. Kode untuk menambahkan route ke dalam tumpukan adalah sebagai berikut:

OnPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SecondRoute()),
              );
            }

Kembali ke Halaman Utama 

Sekarang kita sudah sampai di tujuan, tapi bagaimana cara kembali ke halaman utama? Untuk itu, navigator memiliki metode yang disebut Navigator.pop(). Ini membantu kita menghapus route saat ini dari tumpukan sehingga kita kembali ke route halaman utama. Ini dapat dilakukan sebagai berikut:

onPressed: () {
            Navigator.pop(context);
          },

Berikut ini adalah source code lengkap setelah megikuti langkah diatas

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: HomeRoute(),
  ));
}

class HomeRoute extends StatelessWidget {
  const HomeRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Nextgen Tutorial'),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          child: const Text('Halaman 2'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  const SecondRoute({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Halaman 2"),
        backgroundColor: Colors.blue,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: const Text('Home!'),
        ),
      ),
    );
  }
}

Output:

Tutorial sebelumnya : Membuka URL Di Flutter
Tutorial setelahnya : Flutter WebSocket
Semua Tutorial Flutter : Tutorial Flutter

Tinggalkan Balasan