Sebagian besar aplikasi berisi beberapa screen untuk menampilkan berbagai jenis informasi. Misalnya, suatu aplikasi mungkin memiliki screen yang menampilkan produk. Saat pengguna mengetuk gambar produk, layar baru menampilkan detail tentang produk.

Di Android, route setara dengan Aktivitas. Di iOS, sebuah orute setara dengan ViewController. Di Flutter, route hanyalah sebuah widget.

Cara ini menggunakan Navigator untuk menavigasi ke route baru.

Beberapa bagian berikutnya menunjukkan cara menavigasi di antara dua route, menggunakan langkah-langkah berikut:

• Buat dua route.
• Navigasikan ke route kedua menggunakan Navigator.push().
• Kembali ke route pertama menggunakan Navigator.pop().

Buat dua route

Pertama, buat dua route untuk dikerjakan. Karena ini adalah contoh dasar, setiap route hanya berisi satu tombol. Mengetuk tombol di route pertama akan menavigasi ke route kedua. Mengetuk tombol di route kedua akan mengembalikan ke route pertama.

Pertama, siapkan struktur visual:

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            // Navigate to second route when tapped.
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Navigate back to first route when tapped.
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

Navigasikan ke route kedua menggunakan Navigator.push()

Untuk beralih ke route baru, gunakan Navigator.push() metode ini. The push() Metode menambahkan Route ke tumpukan route dikelola oleh Navigator. Dari mana Route asalnya Anda dapat membuatnya sendiri, atau menggunakan a MaterialPageRoute, yang berguna karena transisi ke route baru menggunakan animasi khusus platform.

Dalam build() metode FirstRoutewidget, perbarui onPressed() callback:

// Within the `FirstRoute` widget
onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondRoute()),
  );
}

Kembali ke route pertama menggunakan Navigator.pop()

Bagaimana Anda menutup route kedua dan kembali ke route pertama? Dengan menggunakan Navigator.pop() metode tersebut. pop() Metode menghilangkan arus Route dari tumpukan route dikelola oleh Navigator.

Untuk mengimplementasikan pengembalian ke route asli, perbarui onPressed() callback di SecondRoutewidget:

// Within the SecondRoute widget
onPressed: () {
  Navigator.pop(context);
}

Contoh Lengkap

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text('Open route'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondRoute()),
            );
          },
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Route"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}