Thursday, February 13, 2020

Cara Passing Data Antar Halaman Pada Flutter

Passing Data antar Form pada Flutter
Cara Passing Data Antar Form atau Halaman pada Flutter - Dalam membuat aplikasi mobile, terutama dengan framework Flutter biasanya kita akan melibatkan lebih dari satu (banyak) halaman atau form. Jika input yangkita berikan pada user atau pengguna aplikasi terlalu banyak, maka biasanya kita akan membagi menjadi beberapa form atau halaman input, namun form-form yang diinput oleh user tentu saja harus kita jadikan satu datanya sebelum dikirim ke server.
Dalam konteks input aplikasi yang melibatkan banyak form secara terpisah, tentu saja tantanganya adalah bagaimana cara menyatukan data input pada halaman-halaman yang saling terpisha tersebut. Tenju saja, cara untuk menggabungkanya adalah dengan cara passing atau melempar data antar form dengan struktur data yang telah di tentukan.

Cara Melempar Data

Cara passing atau melempar data yang paling mudah dan relevan untuk kita gunakan antar halaman, adalah dengan cara memasukan data melalui constructor class dari masing-masing class halaman (StatefullWidget), sehingga kita perlu mendefinisikan field pada constructor class pada masing-masing halaman.

Misal nya kita menentukan field dengan nama data pada masing-masing class, sehingga contoh penulisan class (StatefullWidget) nya adalah sebagai berikut:
class Form1Page extends StatefulWidget {
  Form1Page({Key key, this.data}) : super(key: key);
  DataUser data;
  @override  _Form1PageState createState() => _Form1PageState();
}

class _Form1PageState extends State {
  
  @override  Widget build(BuildContext context) {
    return Scaffold(...);
  }
}

Pada pembuatan class (Form1Page) di atas, kita mendefinisikan field data dengan tipe data class UserData dimana class ini memiliki struktur yang telah kita tentukan. Dengan demikian variable data, dapat diakses pada class (_Form1PageState) dengaan cara memanggil widget.data,

Adapun contoh pemanggilan halaman dengan passing data seperti di atas adalah sebagai berikut:
widget.data.nama = "anu";
Navigator.push(
  context,
  MaterialPageRoute(
      builder: (context) => Form1Page(
        data: widget.data,
      )
  ),
);

Sehingga pada form akhir, kita mendapatkan data final dari struktur class DataUser, dan bisa kita tampilkan atau kirim data-data dari inputan form-form sebelum nya ke server.

Untuk lebih memperjelas cara passing data antar halaman atau antar form pada Flutter, berikut adalah source code lengkap nya:

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: