Pada tutorial kali ini KonsepKoding akan berbagi Tutorial Flutter dimana pada Tutorial Flutter ke-23 Bahasa Indonesia kita akan mempelajari mengenai Navigation/Navigasi atau Navigator berpindah halaman antar screen di Flutter. Navigasi sangat penting karena sudah menjadi barang pasti ketika kamu membuat Real World Application pasti akan memiliki banyak screen atau class pada Flutter.
Flutter Navigation
 Flutter Navigation


Nah oleh karena itu kamu harus menguasai Navigation dan Routing pada Flutter jika kamu ingin menjadi seorang Flutter Developer.  Pada tutorial ini akan di jelaskan mengenai fundamental move screen di Flutter dengan jelas beserta penjelasan kodenya.


Apa Yang Akan Kita Pelajari?

1. Membuat Project Flutter
2. Memulai Koding Navigasi Flutter
3. Penjelasan Kode Flutter


Memulai Project

Silahkan buat sebuah project Flutter baru dengan mengetikan perintah terminal/cmd di bawah ini

flutter create navigation

Tunggu proses sampai selesai.

Memulai Koding Navigasi Flutter

Seteah kamu berhasil membuat project Flutter baru, buka file pada lib/main.dart  kemudian ubah kodenya menjadi seperti kode di bawah ini :


Jika kamu sudah selesai menuliskan kode di atas silahkan jalankan project Flutter mu dengan perintah:

flutter run

Jika berhasil maka output aplikasi flutter kita akan seperti pada gambar di bawah ini :

Flutter Navigation
Flutter Navigation 
Flutter Navigation
Flutter Navigation




Penjelasan Kode

 child: RaisedButton(onPressed: () => {
        Navigator.push(context, MaterialPageRoute(builder: (context) =>  SecondScreen())
        )},
Adalah kode Navigator pada Flutter untuk berpindah halaman ketika tombol di klik, sedangkan SecondScree() adalah tujuan halaman yang dituju.

 RaisedButton(onPressed: () => {Navigator.pop(context)},
Sedangkan kode Navigator.pop adalah mengembalikan nilai ke context halaman sebelumnya.

Sekian semoga tutorial Flutter Bahasa Indonesia kali ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Flutter dan ingin menjadi seorang Flutter Developer. Nantikan tutorial dan artikel menarik lainnya dari Konsep Koding. Bila ada pertanyaa silahkan tinggalkan di kolom komentar.




Baca Tutorial Flutter Dart KonsepKoding Lainnya: