Perbedaan push dan pop dalam flutter, maju mundur juga asik

Bismillah, seperti di framework laravel ataupun codeIgniter, flutter menggunakan routes untuk berpindah antar halaman, setiap route menentukan halaman mana yang akan terbuka ketika user mengarah kesana. Dua function dasar yang biasa dipanggil ketika ingin berpindah antar halaman adalah push dan pop, push akan membuka halaman baru, sedangkan pop akan kembali ke halaman sebelumnya.

Jika push dan pop mengingatkan Anda pada tipe data stack/tumpukan, maka itu tidak salah, karena sebenarnya flutter memiliki tumpukan-tumpukan halaman, tumpukan ini bertambah dengan function push dan berkurang dengan function pop, lihat gambar di bawah ini sebagai contohnya,

Pada awal aplikasi dijalankan, hanya ada halaman home dalam di dalam stack, kemudian jika fungsi di bawah ini dijalankan maka akan menambahkan halaman keranjang_belanja ke dalam tumpukan halaman dan membuka halaman keranjang

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

Kemudian, jika dijalankan perintah Navigator.of(context).pop(); maka user akan kembali satu halaman ke halaman sebelumnya dan tumpukan akan kembali seperti awal

Bagaimana jika kita ingjn pindah halaman tanpa menambah tumpukan? dalam artian, tumpukan terakhir diganti dengan halaman baru, kita bisa menggunakan pushReplacementNamed, contohnya seperti dibawah

Tumpukan di atas menunjukan user sedang berada di tampilan form pemesanan, jika kita ingin agar setelah mengisi form pemesanan, user pindah ke halaman sukses memesan dan ketika tombol back di handphone mereka diklik, kembali ke menu keranjang belanja?, maka skrip yang harus dijalankan adalah skrip di bawah ini

Navigator.of(getContext()).pushReplacementNamed(page);

Skrip diatas akan merubah tumpukan menjadi seperti di bawah ini

Tumpukan di atas menunjukan tumpukan teratas yang tadinya adalah form pemesanan, berubah menjadi halaman pemesanan berhasil. Jika kita ingin agar setelah mengisi form pemesanan, user pindah ke halaman sukses memesan dan ketika tombol back di handphone mereka diklik, kembali ke menu Home, maka skrip yang harus dijalankan adalah skrip di bawah ini

Navigator.of(context).pushNamedAndRemoveUntil('/pemesanan_berhasil', ModalRoute.withName('/home'));
                    
Skrip diatas akan merubah tumpukan menjadi seperti di bawah ini

Pada situasi di atas jika user menekan tombol back maka akan kembali ke halaman home, bukan lagi halaman form pemesanan, dengan begini akan berkurang kemungkinan duplikasi pengiriman data. Bagaimana jika kita ingin setelah user mengisi form pemesanan, langsung kembali ke home tanpa harus ke halaman pemesanan berhasil terlebih dahulu? dalam artian, membuat di tumpukan page hanya ada Home, maka skrip yang dipakai adalah

Navigator.of(context).pushNamedAndRemoveUntil('/home', (Route route)=>false);
                   
Jika skrip diatas dijalankan, saat user berada di halaman pemesanan berhasil dan menekan tombol back di hapenya, maka dia akan kembali ke home dan tumpukan page akan kembali seperti awal

Itu saja yang bisa saya share untuk saat ini, semoga bermanfaat


Referensi
https://live.staticflickr.com/4134/4794925571_0491c4cf7b_b.jpg