Tutorial Flutter Cara Routing Dengan Navigator

Tutorial Flutter Cara Routing dengan Navigator 

- Navigasi dipakai untuk interaksi dan berpindah dari halaman satu ke halaman lainnya, untuk navigasi pada Flutter mempunyai beberapa metode. Pada tutorial ini kita akan berguru menciptakan routing dan berpindah halaman dengan memakai Navigator.pushNamed(). Navigator.pushNamed() dipakai untuk berpindah halaman dengan memakai penamaan dari routenya. 

Codingtive menyediakan tutorial flutter bahasa indonesia, untuk metode berpindah halaman yang paling dasar dan gampang kalian sanggup mempelajarinya pada Tutorial Flutter Cara Praktis Berpindah Halaman.

Kita akan berguru menciptakan aplikasi yang sanggup berpindah dari satu halaman ke halaman lain, dengan memakai metode routing navigator.pushNamed(). Ikuti langkah-langkah berikut :

1. Buat project flutter

Pastikan laptop kalian sudah install flutter, bila belum kalian sanggup mencobanya di dokumentasi cara install flutter. Buat project flutter dan beri nama flutter_routing, untuk instalasinya membutuhkan koneksi internet dan tunggu hingga proses sinkronisasi selesai.

2. Membuat layout

Selanjutnya kita akan menciptakan 3 halaman untuk mencoba berpindah halaman, buka file main.dart pada folder lib. Kemudian hapus semua isinya, pertama tambahkan import library material terlebih dahulu :

import 'package:flutter/material.dart'; 

Selanjutnya buat class untuk halaman pertama, dan sediakan tombol untuk berpindah halaman, kodenya ibarat berikut :

class HalamanPertama extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('Halaman Pertama'),       ),       body: Center(         child: ListView(           children: <Widget>[             RaisedButton(               child: Text('Pindah Halaman Kedua'),               onPressed: () {                 Navigator.pushNamed(context, HalamanKedua.routeName);               },             ),             RaisedButton(               child: Text('Pindah Halaman Ketiga'),               onPressed: () {                 Navigator.pushReplacementNamed(context, HalamanKetiga.routeName);               },             ),           ],         ),       ),     );   } } 

Terdapat 2 button pada isyarat diatas, berikut perbedaannya :

Navigator.pushNamed() : berpindah halaman dan sanggup kembali ke halaman sebelumnya

Navigator.pushReplacementNamed() : berpindah halaman, namun tidak sanggup kembali ke halaman sebelumnya

Kemudian buatlah class untuk halaman kedua, tambahkan isyarat dibawah class halaman pertama :

 class HalamanKedua extends StatelessWidget {
 static const String routeName = "/halamanKedua";   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Halaman Kedua"),       ),       body: Center(         child: RaisedButton(           child: Text('Kembali'),           onPressed: () {             Navigator.pop(context);           },         ),       ),     );   } } 

Navigator.pop() : dipakai untuk kembali ke halaman / route yang sebelumnya.

Selanjutnya buat class untuk halaman ketiga, tambahkan isyarat dibawah class halaman kedua :

class HalamanKetiga extends StatelessWidget {   static const String routeName = "/halamanKetiga";   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Halaman Ketiga"),       ),       body: Center(         child: Text('Halaman Ketiga'),       ),     );   } } 

Pada halaman ketiga tidak sanggup kembali ke route atau halaman sebelumnya, alasannya sebelumnya kita memakai Navigator.pushReplacementNamed() untuk berpindah ke halaman ketiga.

3. Membuat routing 

Setelah halaman sudah kita buat, selanjutnya kita akan menciptakan routing, caranya dengan menambahkan isyarat berikut dan letakan sehabis import :

void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: 'Routing Navigation',     initialRoute: '/',     routes: {       '/' : (context) => HalamanPertama(),       HalamanKedua.routeName : (context) => HalamanKedua(),       HalamanKetiga.routeName : (context) => HalamanKetiga(),     },   )); } 

initialRoute : dipakai untuk route default yang pertama kali ditampilkan, pada isyarat diatas route yang pertama kali ditampilkan ialah halaman pertama.

routes : berisi daftar nama route untuk setiap halaman, biar route halaman sanggup diakses perlu di pendaftaran nama routenya pada bab routes.

Sebelum mencoba dijalankan, buka file widget_test.dart pada folder test. dan tambahkan komentar untuk pemanggilan class MyApp karena kita tidak memakai class tersebut. Kode yang dikomentar ibarat berikut :

//import 'package:first_app/main.dart'; //await tester.pumpWidget(MyApp()); 

Kode Lengkap

Untuk isyarat lengkapnya pada file main.dart seperti berikut :

import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: 'Routing Navigation',     initialRoute: '/',     routes: {       '/' : (context) => HalamanPertama(),       HalamanKedua.routeName : (context) => HalamanKedua(),       HalamanKetiga.routeName : (context) => HalamanKetiga(),     },   )); }  class HalamanPertama extends StatelessWidget {   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text('Halaman Pertama'),       ),       body: Center(         child: ListView(           children: <Widget>[             RaisedButton(               child: Text('Pindah Halaman Kedua'),               onPressed: () {                 Navigator.pushNamed(context, HalamanKedua.routeName);               },             ),             RaisedButton(               child: Text('Pindah Halaman Ketiga'),               onPressed: () {                 Navigator.pushReplacementNamed(context, HalamanKetiga.routeName);               },             ),           ],         ),       ),     );   } }  class HalamanKedua extends StatelessWidget {   static const String routeName = "/halamanKedua";   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Halaman Kedua"),       ),       body: Center(         child: RaisedButton(           child: Text('Kembali'),           onPressed: () {             Navigator.pop(context);           },         ),       ),     );   } }  class HalamanKetiga extends StatelessWidget {   static const String routeName = "/halamanKetiga";   @override   Widget build(BuildContext context) {     return Scaffold(       appBar: AppBar(         title: Text("Halaman Ketiga"),       ),       body: Center(         child: Text('Halaman Ketiga'),       ),     );   } } 

Sekarang coba jalankan dengan emulator atau hp kalian, jadinya ibarat berikut :

Demikian Tutorial Flutter Cara Routing dengan Navigator, bila teman-teman ada pertanyaan atau hambatan sanggup mengisi kolom komentar dibawah. Jangan lupa untuk subscribe website codingtive untuk mendapat pemberitahuan update tutorial dan artikel menarik lainnya.

Untuk berguru lebih lanjut dan menerapkan yang sudah kalian pelajari pada tutorial ini, kalian sanggup melanjutkan berguru pada Tutorial Membuat Form Login dan Register Keren dengan Flutter. Semoga bermanfaat.

Share this post