Salam Teman Koding, pada tutorial Flutter Bahasa Indonesia yang ke-25 kali ini KosepKoding akan berbagi tutorial mengenai bagaimana cara mengirim data (Sending Data) antar Screen atau Halaman dengan menggunakan navigasi Flutter. Flutter sendiri telah membekali fitur untuk mengirim data antar screen di Navigator. Mengirim data akan sangat penting jika kamu membuat sebuah aplikasi yang kompleks dengan banyak data.

#25 Tutorial Flutter Megirim Data Navigasi
Flutter Send Data


Selain itu mengirim data antar navigasi juga akan sangat berguna bila kamu, sudah bersentuhan dengan REST API contoh kasusnya detail artikel yang membawa parameter data id dan berbagai kasus lainnya.

Apa Yang Akan Kita Pelajari

1. Membuat Project Flutter Dan Mengirim Data Dengan Flutter Navigator
2. Penjelasan Kodingan Flutter

Membuat Project Flutter Dan Mengirim Data Dengan Flutter Navigator

Hal pertama yang harus kamu lakukan sebelum mengikuti tutorial Flutter ini kamu harus memiliki project flutter terlebih dahulu.

Silahkan buka terminal/cmd kesayanganmu dan ketikan perintah di bawah ini untuk membuat project Flutter baru

flutter create send_data

Kemudian jika sudah berhasil silahkan ubah kode di file lib/main.dart menjadi seperti kode Flutter di bawah ini.

Jika Sudah silahkan buat file baru di folder lib dengan nama secondpage.dart, kemudian ketikan kode dibawah ini:
Jika kamu sudah mengikuti semua langkah di atas silahkan jalankan project Flutter mu dengan perintah :

flutter run

Dan jika kamu berhasil maka output program Flutter yang kita buat akan menjadi seperti gambar di bawah ini, dimana TitleBar akan dinamis berdasarkan data yang dikirim dari Screen Pertama:

Flutter Megirim Data Navigasi
Flutter Megirim Data Navigasi 
Flutter Megirim Data Navigasi
Flutter Megirim Data Navigasi

Penjelasan Kodingan Flutter

 Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => SecondPage(str: "Dark Knight"))
                );
Kode di atas berguna mengirim data dari Screen Pertama ke Screen Kedua dalam bentuk String

  // Initial variable String
  String str = "";
// Get Key Data
  SecondPage({Key key, this.str}): super(key: key);
Kode di atas berguna untuk Get Parameter Data dari data yang dikirim dari screen pertama

  title: Text(str) 
Kita menampilkan data ke Widget Flutter UI Kita.


Sekian dan terimakasih semoga tutorial Flutter Bahasa Indonesia ini dapat bermanfaat dan membantu kamu semua yang sedang mempelajari Flutter dan ingin atau sudah menjadi Flutter Developer.

Baca Tutorial Flutter Dart KonsepKoding Lainnya: