Navigation dan Routing merupakan konsep inti dalam pengembangan Aplikasi Mobile, yang memungkinkan para pengguna untuk berpindah halaman yang berbeda. Dan yang sudah kita ketahui seluruh aplikasi memiliki beberapa halaman untuk menampilkan jenis informasi 

Pertama perlu  kita ketahui bahwa konsep navigasi pada Flutter mirip sekali dengan pemrograman Android, yakni bahwa ketika berpindah screen/activity akan menjadi tumpukan (stack). Jadi ketika berpindah dari satu screen ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop).

Foto dari DEV

Dan kita akan mencoba untuk membuatnya. Kita cukup menyiapkan 2 buah halaman yang kita taruh pada folder lib. Halaman yang kita namai home_page.dart dan detail_page.dart.

Berikut contoh kode halaman pertama / home_page.dart

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('First Screen'),
     ),
     body: Center(
       child: ElevatedButton(
         child: const Text('Pindah Screen'),
         onPressed: () {
           // Akan menuju halaman detail route ketika ditekan.
         },
       ),
     ));
 }
}

Berikut contoh kode halaman pertama / home_page.dart, 

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Second Screen'),
     ),
     body: Center(
       child: OutlinedButton(
         child: const Text('Kembali'),
         onPressed: () {
           // Akan kembali menuju halaman home route ketika ditekan.
         },
       ),
     ),
   );
 }
}

Lalu kita bisa menavigasikkan kedua screen ini menggunakan Navigator.push dan Navigator.pop

Navigator.push

Method Navigator.push bisa kita gunakan untuk berpindah screen kedua / detail.page, Berikut contoh kodeNavigator.push 

Navigator.push(context, MaterialPageRoute(builder: (context) {
 return DetailPage();
}));

Di sini, metode push() menambahkan halaman/rute pada tumpukan dan kemudian mengelolanya dengan menggunakan Navigator. Kita menggunakan kelas MaterialPageRoute yang memungkinkan transisi antara rute menggunakan animasi khusus platform. Berikut penggunaan method Navigator.push pada button Elevated Button

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(title: const Text('First Screen')),
       body: Center(
         child: ElevatedButton(
           child: const Text('Pindah Screen'),
           onPressed: () {
             Navigator.push(context, MaterialPageRoute(builder: (context) {
               return DetailPage();
             }));
           },
         ),
       ));
 }
}

Navigator.pop

Method Navigator.pop bisa kita gunakan untuk kembali ke screen sebelumnya / home.page

Berikut contoh kode Navigator.pop

Navigator.pop(context);

Pada Navigator.pop kita hanya cukup menambahkan parameter context yang merupakan variabel dari method build. Berikut penggunaan method Navigator.pop pada button Elevated Button 

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       title: const Text('Second Screen'),
     ),
     body: Center(
       child: OutlinedButton(
         child: const Text('Kembali'),
         onPressed: () {
           Navigator.pop(context);
         },
       ),
     ),
   );
 }
}

Dan aplikasi bisa di jalankan dan cobalan untuk menekan tombol di halaman home.page bila halaman berubah menjadi detail.page dan di halaman detail page bila ditekan akan berpindah menjadi ke halaman sebelumnya / halaman home.page berarti pembelajaran kita untuk method Navigator.push dan Navigator.pop telah selesai

Route Navigation

Sebelumnya kita telah membahas method Navigator.push dan kali ini kita akan mulai membahas Route Navigation. Fungsinya sama seperti method Navigator.push dan yang bisa membuat halaman menjadi berpindah ke halaman yang diingankan. Namun Apa yang membedakan Route Navigation dan method Navigator.push dan Navigator.pop

Misalya kita mengembangkan aplikasi yang sangat besar dan komplex yang memilikii banyak halaman yang berisikan berbagai produk. dan sangat merepotkan bila kita menggunakan Navigator.push maka dari itu flutter menyediakan Route Navigation untuk memudahkan para Pengembang untuk menentukan alur Halaman yang dituju. 

Dan penggunaan Route Navigation ini cukup mudah kita hanya cukup menggunakan routes dalam file main.dart dan kita akan menambahkan route dalam file main.dart. Berikut contoh kode Routes Navigation

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

 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     //route pertama kali yang diluncurkan
     initialRoute:  '/homepage',
     //menginisialisasi route dengan class
     routes: {
       '/homepage' :(context) => HomePage(),
       '/detailpage' :(context) => DetailPage()
     },
     //home
   );
 }
}

Kita cukup menambahkan initialRoute untuk menentukan halaman yang pertama kali yang diluncurkan dan menambahkan routes untuk menginisialisasikan routes dengan class halaman dengan membuat map yang berisikan key dan value.

Dan kita perlu mengganti Navigator.push pada onPressed Button di halaman home_page menggunakan Method Navigator.pushNamed() lalu beri parameter route ke halaman yang kita tuju. Berikut keyword Method Navigator.pushNamed()

Navigator.of(context).pushNamed('/detailpage');

Berikut contoh kode Method Navigator.pushNamed() dalam file home_page

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

 @override
 Widget build(BuildContext context) {
   return Scaffold(
       appBar: AppBar(title: const Text('First Screen')),
       body: Center(
         child: ElevatedButton(
           child: const Text('Pindah Screen'),
           onPressed: () {
             Navigator.of(context).pushNamed('/detailpage');
           },
         ),
       ),
   );
 }
}

Untuk halamannya bisa kembali ke halaman awal kita tetep menggunakan Method Navigator.pop yang sebelumnya sudah kita bahas. Setelah selesai bisa kita run berikut hasil Route Navigation