41 Dan penggunaan Route Navigation ini cukup mudah kita hanya cukup menggunakan routes dalam file main.dart dan kita akan menambahkan route dalam file main.dart. Berikut contoh kode Routes Navigation
42 Kita cukup menambahkan initialRoute untuk menentukan halaman yang pertama kali yang diluncurkan dan menambahkan routes untuk menginisialisasikan routes dengan class halaman dengan membuat map yang berisikan key dan value. Dan kita perlu mengganti Navigator.push pada onPressed Button di halaman home_page menggunakan Method Navigator.pushNamed() lalu beri parameter route ke halaman yang kita tuju. Berikut keyword Method Navigator.pushNamed()
43 Untuk halamannya bisa kembali ke halaman awal kita tetep menggunakan Method Navigator.pop yang sebelumnya sudah kita bahas. Setelah selesai bisa kita run berikut hasil Route Navigation Gambar 3. hasil Route Navigation Router dan Navigator dirancang untuk bekerja sama. dapat bernavigasi menggunakan Router API melalui paket perutean deklaratif, seperti go_router, atau dengan memanggil metode penting seperti push() dan pop() di Navigator.
44 Saat bernavigasi menggunakan Router atau paket perutean deklaratif, setiap rute di Navigator didukung halaman, artinya rute tersebut dibuat dari Halaman menggunakan argumen halaman pada konstruktor Navigator. Sebaliknya, Rute apa pun yang dibuat dengan memanggil Navigator.push atau showDialog akan menambahkan rute tanpa halaman ke Navigator. Jika menggunakan paket perutean, Rute yang didukung halaman selalu dapat ditautkan dalam, sedangkan rute tanpa halaman tidak. Ketika Rute yang didukung halaman dihapus dari Navigator, semua rute tanpa halaman setelahnya juga dihapus. Misalnya, jika tautan dalam bernavigasi dengan menghapus rute yang didukung halaman dari Navigator, semua _route tanpa halaman setelahnya (hingga rute yang didukung _halaman berikutnya) juga akan dihapus.
45 alam era yang berkembang pesat dalam pengembangan aplikasi web yang dinamis, pengelolaan rute telah menjadi salah satu aspek kritis yang membutuhkan perhatian serius. Artikel ini berfokus pada eksplorasi dan analisis mendalam mengenai penerapan Name Route sebagai solusi yang sangat relevan dan efektif dalam konteks pengembangan aplikasi web modern yang kompleks. Name Route, dalam konteks ini, menonjol sebagai pendekatan yang tidak hanya memfasilitasi kemudahan identifikasi tetapi juga memainkan peran krusial D Didik Siswanto.,M.Kom.MTA.
46 dalam pemeliharaan rute dengan memberikan nama unik pada setiap jalur navigasi dalam struktur aplikasi yang dinamis. Dengan pertumbuhan kompleksitas yang terus meningkat dalam pengembangan aplikasi web modern, muncul kebutuhan mendesak akan pendekatan yang lebih terstruktur dalam pengelolaan rute. Dalam konteks ini, Name Route muncul sebagai alternatif yang sangat relevan, dirancang khusus untuk meningkatkan keterbacaan kode dan memfasilitasi pemeliharaan yang efisien. Pendekatan ini tidak hanya menawarkan solusi untuk mengatasi kompleksitas navigasi dalam aplikasi, tetapi juga memberikan landasan yang kokoh untuk pengembangan yang skalabel dan dapat dipertahankan dalam lingkungan pengembangan yang dinamis dan berkembang pesat. Dengan memanfaatkan Name Route, pengembang dapat secara strategis mengelola dan memberikan nama yang deskriptif pada setiap jalur navigasi, menciptakan lingkungan pengembangan yang lebih terorganisir dan dapat dipelihara dengan lebih baik, sekaligus meningkatkan kapabilitas aplikasi web modern secara keseluruhan. Konsep dasar Name Route melibatkan pemberian nama unik pada setiap rute dalam aplikasi web. Hal ini dilakukan untuk meningkatkan keterbacaan dan pemeliharaan kode. Dengan memberikan nama yang deskriptif pada setiap jalur navigasi, pengembang dapat dengan mudah mengidentifikasi dan memahami tujuan dari setiap rute. Name Route juga sering kali diimplementasikan dengan memanfaatkan mekanisme pengelolaan rute yang disediakan oleh kerangka kerja pengembangan web
47 B. Implementasi ‚named routes‛ adalah teknik dalam pengembangan perangkat lunak, terutama dalam kerangka kerja web seperti Flutter atau Laravel, di mana Anda memberikan nama unik pada rute-rute aplikasi Anda. Ini membantu meningkatkan keterbacaan kode dan memudahkan perubahan rute karena Anda hanya perlu memperbarui nama rute di satu tempat. Keterbacaan Kode: Name Route meningkatkan keterbacaan kode dengan memberikan label pada rute. Kemudahan Pemeliharaan: Perubahan atau penambahan rute dapat dilakukan tanpa mengganggu bagian lain dari kode. Proses pemilihan framework untuk pengembangan aplikasi dapat melibatkan pertimbangan cermat terhadap fitur tertentu, seperti dukungan terhadap Name Route, di mana pilihan dapat mencakup kerangka kerja seperti Laravel untuk pengembangan web PHP, React Router dalam konteks aplikasi berbasis React, atau Django untuk proyek Python. Setelah memilih framework yang tepat, langkah implementasi Name Route melibatkan serangkaian tindakan terperinci, mulai dari penentuan rute yang dibutuhkan dalam aplikasi hingga pemberian nama unik untuk setiap rute yang ada. Selanjutnya, integrasi Name Route dilakukan dengan cermat dalam struktur keseluruhan aplikasi, memastikan bahwa setiap bagian terkait dengan rute dapat diakses dengan mudah melalui penamaan yang jelas, membawa manfaat signifikan untuk keterbacaan kode, pemeliharaan,
48 dan penanganan navigasi dalam aplikasi yang sedang dikembangkan. Deskripsi Aplikasi:Aplikasi XYZ didesain dengan menggunakan pendekatan Name Route untuk mengelola navigasi dalam lingkungan pengembangannya. Dengan menggunakan framework tertentu yang mendukung Name Route, seperti Laravel, React Router, atau Django, aplikasi ini bertujuan untuk memberikan pengalaman pengguna yang lebih terstruktur dan memudahkan pengelolaan rute-rute yang kompleks. Analisis Implementasi: Evaluasi keterbacaan kode menunjukkan bahwa dengan Name Route, setiap rute dapat diidentifikasi dengan jelas melalui penamaan yang konsisten, mengurangi potensi kebingungan dan meningkatkan pemahaman terhadap logika navigasi. Hal ini sangat bermanfaat dalam situasi di mana tim pengembangan terdiri dari beberapa anggota, memfasilitasi kolaborasi yang lebih efektif dan pemahaman bersama terkait struktur aplikasi. Sebelum penggunaan Name Route, struktur kode cenderung kompleks dan sulit dipahami. Identifikasi rute melibatkan pemahaman mendalam terhadap logika navigasi, dan setiap perubahan rute bisa memengaruhi berbagai bagian kode. Dengan implementasi Name Route, terjadi peningkatan signifikan dalam keterbacaan kode. Nama unik untuk setiap rute memberikan klarifikasi langsung tentang tujuan dan navigasi, menyederhanakan pemahaman logika aplikasi.
49 Pengembang dapat dengan cepat mengenali dan memahami rute-rute melalui penamaan yang konsisten. Name Route membawa perbaikan dramatis dalam keterbacaan kode, mengurangi kompleksitas dan mempercepat proses pengembangan. Penggunaan nama untuk rute-rute tidak hanya memfasilitasi pemahaman, tetapi juga meningkatkan konsistensi, memungkinkan kolaborasi yang lebih baik antaranggota tim, terutama dalam proyek berskala besar. Sebuah studi kasus dilakukan untuk mengevaluasi kemudahan pemeliharaan saat terjadi perubahan rute. Sebelum Name Route, perubahan rutet seringkali kompleks dan memerlukan modifikasi yang signifikan pada berbagai bagian kode. Setelah implementasi Name Route, perubahan rute menjadi lebih mudah dikelola. Ketergantungan yang lebih sedikit antara bagian-bagian kode meminimalkan dampak. Tantangan Implementasi: Selama implementasi Name Route, beberapa kendala mungkin dihadapi: 1. tantangan dalam memastikan konsistensi nama rute di seluruh aplikasi, terutama dalam tim yang besar. Solusi: Penerapan kebijakan penamaan yang konsisten dan dokumentasi yang baik dapat membantu mengatasi masalah ini. 2. Pengembang yang kurang akrab dengan konsep Name Route dapat menghadapi kesulitan dalam mengimplementasikannya. Solusi: Pelatihan dan dokumentasi yang memadai dapat membantu mempercepat pemahaman konsep ini.
50 Pelatihan rutin diselenggarakan untuk memastikan semua anggota tim memahami penggunaan Name Route. Dokumentasi secara rinci menyajikan pedoman dan contoh penggunaan Name Route untuk referensi yang mudah diakses. 1. Penerapan pemeriksaan kode otomatis untuk memastikan konsistensi penamaan rute dan memperingatkan ketika ada pelanggaran aturan penamaan. 2. Review kode bersama tim untuk memastikan kepatuhan terhadap konvensi dan mencari peluang pembaruan atau perbaikan. Dengan menghadapi tantangan ini dan menerapkan solusi yang sesuai, implementasi Name Route dalam Aplikasi XYZ dapat berjalan lebih lancar, membawa manfaat signifikan dalam hal keterbacaan kode dan kemudahan pemeliharaan.
51 Rofi Abul Hasani.S.Kom. M.Eng
52 ada bagian ini kita akan membahas mengenai beberapa widget yang dapat digunakan untuk membantu layoting tampilan interface di flutter. Ada beberapa widget untuk mempercantik tampilan user interface di flutter diantaranya Listview, Card, Stack dan Gridview. Masing masing dari widget tersebut memiliki fungsi yang berbeda dan dapat digunakan secara bersamaan dalam sebuah project. Mari kita coba membuat sebuah tampilan user interface dengan menggunakan widget-widget tersebut. Pada prakti kali ini kita akan menggunakan widget Listview, Card, Stack dan GridView. Langkah awal yang perlu kita lakukan adalah pada file main.dart kita buat kode dasar. Buatlah pada file main.dart seperti berikut: P
53 Untuk memberikan tampilan background maka dipisahkan elemen background dengan konten. Dengan menggunakan Stack (). Setelah selesai dibuat kode dasar maka langkah selanjutnya adalah membagi layout menjadi 2 bagian dengan widget girdview. Penulisan gridview. Widget gridView diletakan didalam widget Scaffold() dengan menambahkan atribut home: dan letakan setelah atribut tersebut seperti berikut: GridView adalah salah satu widget yang sangat berguna dalam pengembangan aplikasi Flutter, terutama ketika Anda perlu menampilkan sejumlah besar data dalam susunan grid atau tabel. Praktik gridview dalam Flutter melibatkan penggunaan widget GridView untuk membuat tata letak grid yang responsif dan dapat di-scroll. Pada kode tersebut digunakan untuk membagi 2 bagian pada display, ditunjukan pada kode crossAxisCount: 2. Kemudian di dalam widget GridView bisa di letakan beberapa widget pada atribut children. Langkah selanjutnya adalah menambahkan widget ListView untuk menampilkan beberapa data pada layar. Kode ListView dapat diletakan pada parameter children seperti berikut:
54 Listview adalah salah satu widget dari flutter yang bisa kita gunakan untuk menampilkan data secara berurutan dengan menggunakan scrolling. Pada widget ini cocok digunakan dengan data yang jumlahnya banyak. Karena didalam widget Listview terdiri dari beberapa child. Sehingga didalam widget tersebut kita bisa menambahkan widget widget lain dengan menambahkan parameter children. Langkah selanjutnya adalah menambahkan widget Card() di dalam list view. Seperti pada kode berikut: Widget Card digunakan untuk mengelompokkan informasi terkait dalam satu kotak yang bersifat independen dan dapat dihias. Biasanya digunakan dalam kombinasi dengan ListView untuk menampilkan data terstruktur, seperti daftar kontak, artikel, atau entitas lainnya. Card dapat memuat berbagai elemen seperti teks, gambar, atau widget lainnya, memberikan tampilan yang bersih dan terorganisir. Penulisan widget Card yaitu dengan Card (). Didalam Widget Card kita ingin menampilkan data berupa keterangan sebuah produk. Untuk memberikan layout yang bertumpuk kita bisa menggunakan widget Stack(). Widget Stack() diletakan setelah parameter child, seperti berikut:
55 Stack widget pada flutter adalah widget yang berguna dalam mengatur tata letak terutama pada objek yang berlapis. Stack adalah widget yang memungkinkan penumpukan widget di atas satu sama lain. Ini berguna ketika Anda perlu menempatkan beberapa widget di lokasi yang sama dalam hierarki tampilan. Widget di Stack dapat ditumpuk dan diatur menggunakan properti-posisi, sehingga memberikan fleksibilitas dalam mengatur elemen-elemen tumpukan tersebut. Stack sangat berguna untuk membuat antarmuka pengguna yang kompleks, seperti tata letak yang melibatkan lapisan atau tumpukan elemen visual. Pada widget stack kita bisa menambahkan beberapa data dengan menambahkan widget lain seperti widget container, image, text dan sebagainya. Sekarang kita coba untuk menambahkan image dan container beserta informasinya seperti berikut:
56 Pada kode tersebut akan menampilkan sebuah gambar dari internet dengan url. Gambar tersebut terletak dibagian belakan sendiri kemudian ditumpuk dengan container yang terdiri dari widget text dan icon berupa informasi harga, jenis dan icon. Kode tersebut akan memunculkan satu buah data berupa card yang berisi informasi seperti pada gambar 1. Gambar 1. Widget Card Jika ingin menambahkan data lain lakukan duplikasi mulai widget card sesuai dengan jumlah data yang dibutuhkan. Perbanyak widget card tersebut dan tetap letakan didalam widget list view. Contoh kode yang akan di duplikat dapat dilihat sebagai berikut:
57 Setalah kode tersebut diperbanyak sesuai dengan kebutuhan maka selanjutnya adalah kita bisa kembali lagi ke widget GridView. Karena tadi pada widget GridView kita membagi menjadi 2 bagian. Bagian yang pertama kita sudah mengisinya dangan ListView. Bagian kedua kita bisa mengisinya didengan widget Card.
58 Pada kode tersebut maka kan menghasilkan card seperti pada gambar 2. Gambar 2. Card Setelah selesai semua kode dibuat maka dapat dijalankan. Dengan menggunakan kombinasi widget Stack, ListView, Card dan Gridview maka user interface yang dutampilkan akan seperti gambar 3. Gambar 3. Tampilan User Interface
59 Untuk membuat tampilan seperti pada gambar 3, kita bisa mengikuti kode berikut:
60
61
62 alam lanskap pembuatan aplikasi mobile yang terus berkembang, navigasi menjadi landasan desain pengalaman pengguna yang sangat penting. Navigasi berfungsi sebagai kompas yang memandu pengguna melewati jalur aplikasi yang rumit, memungkinkan mereka mengakses konten, fitur, dan layanan dengan lancar. Bab ini mengeksplorasi seni dan teknik menerapkan navigasi pada aplikasi mobile. Selain itu, di bab ini juga akan dibahas bagaimana menerapkan navigasi pada kerangka kerja Flutter dan kemampuannya yang luar biasa untuk menciptakan pengalaman navigasi yang menarik dan D Fitri Wibowo, S.S.T., M.T., M.Sc
63 berpusat pada pengguna. Fokus pembahasan pada bab ini adalah Navigation Drawer dan Bottom Navigation Bar, dua pola navigasi yang penting dalam kerangka kerja Flutter. 1. Langkah-langkah Implementasi Menerapkan Navigation Drawer di aplikasi mobile merupakan salah satu cara untuk meningkatkan aksesibilitas navigasi pengguna dan menyediakan akses mudah ke bagian dan pengaturan aplikasi(Google Material Design, 2023b). Bagian ini akan memberikan panduan langkah demi langkah tentang cara mengimplementasikan Navigation Drawer pada sebuah aplikasi mobile yang dibangun dengan menggunakan kerangka kerja Flutter. Contoh dalam bentuk potongan kode program juga disertakan untuk membantu Anda dalam membuat Navigation Drawer yang fungsional dan menarik secara visual. Langkah 1: Mengimpor Pustaka (Library) Langkah pertama sebelum menerapkan Navigation Drawer adalah dengan mengimpor pustaka Flutter yang diperlukan. Flutter menyediakan pustaka bawaan yang dapat digunakan untuk membuat Navigation Drawer:
64 Langkah 2: Menerapkan Widget Scaffold Gunakan widget Scaffold sebagai dasar untuk tata letak aplikasi Anda(Flutter API Documentation, 2023d). Widget ini menyediakan struktur untuk Navigation Drawer: }
65 Langkah 3: Membuat sebuah Widget Navigation Drawer Definisikan sebuah widget Navigation Drawer yang memuat item navigasi dan profil pengguna.
66 Langkah 4: Menerapkan Logika Navigasi Pada parameter onTap dari item menu, terapkan logika navigasi untuk membawa pengguna ke layar masing-masing atau melakukan tindakan yang diinginkan. Langkah 5: Sesuaikan Penataan dan Penampilan Anda dapat menyesuaikan lebih lanjut gaya dan tampilan Navigation Drawer, termasuk warna, font, dan ikon, untuk menyelaraskannya dengan desain aplikasi Anda.
67 Dengan mengikuti langkah-langkah ini, Anda dapat membuat Navigation Drawer dasar di aplikasi mobile berbasis Flutter. Namun, Flutter menawarkan opsi kustomisasi yang luas untuk menyesuaikan Navigation Drawer sesuai dengan kebutuhan desain spesifik Anda. Pada bagian selanjutnya, kita akan menjelajahi teknik kustomisasi tingkat lanjut dan praktik terbaik untuk meningkatkan fungsionalitas dan estetika Navigation Drawer di Flutter. 2. Menangani Interaksi Pengguna Mengelola interaksi pengguna dengan Navigation Drawer merupakan aspek penting untuk menciptakan pengalaman navigasi yang lancar dan intuitif di aplikasi mobile Anda. Pada bagian ini, kita akan mengeksplorasi cara menangani interaksi pengguna dengan Navigation Drawer, termasuk membuka dan menutup drawer. Kita juga akan membahas penggunaan widget Scaffold dan widget Drawer pada Flutter secara lebih detail. Menu navigasi harus menyediakan cara yang mudah bagi pengguna untuk mengakses kontennya sekaligus mempertahankan kegunaan aplikasi secara keseluruhan. Untuk mencapai hal tersebut, perancang dan pengembang aplikasi perlu menerapkan mekanisme untuk membuka dan menutup Navigation Drawer. Membuka menu Navigation Drawer Untuk membuka menu navigasi pada Navigation Drawer, Anda dapat memanfaatkan gerakan atau aksi umum, seperti:
68 a. Gerakan Usap (swipe): Pengguna dapat mengusap dari tepi kiri layar ke arah kanan untuk membuka menu navigasi. Flutter menyediakan dukungan bawaan untuk gerakan ini. Hal ini dapat dilihat pada potongan kode program berikut di mana widget Scaffold memiliki properti drawer yang menerima nilai berupa objek widget dari kelas Drawer. b. Dengan Tombol: Metode umum lainnya untuk membuka Navigation Drawer adalah dengan menempatkan tombol menu (sering kali disebut juga dengan tombol ‚hamburger‛ karena diwakili oleh tiga garis horizontal bertumpuk) di widget AppBar. Ketika pengguna mengetuk tombol ini, tombol ini akan membuka Navigation Drawer. Berikut ini adalah potongan kode program untuk menerapkan pendekatan ini:
69 Pada kode di atas, widget IconButton ditambahkan ke properti leading dari widget AppBar. Ketika pengguna mengetuk tombol ‚hamburger‛ (diwakili oleh ikon 'menu'), tombol ini akan memicu pemanggilan fungsi yang didefinisikan pada properti onPressed yaitu Scaffold.of(context).openDrawer(), yang berguna untuk membuka Navigation Drawer. Pendekatan ini memberikan cara yang jelas dan mudah bagi pengguna untuk mengakses Navigation Drawer secara langsung dari AppBar.
70 Kedua metode tersebut menawarkan cara intuitif bagi pengguna untuk membuka Navigation Drawer, sehingga meningkatkan fungsionalitas aplikasi mobile secara keseluruhan. Pengembang dapat memilih metode yang paling sesuai dengan desain aplikasi dan tujuan pengalaman pengguna. Menutup menu Navigation Drawer Menutup Navigation Drawer dapat dilakukan dengan beberapa cara: a. Gerakan Geser: Mengusap/menggeser drawer dari sebelah kanan ke kiri pada saat drawer terbuka. b. Ketuk di Area Luar: Mengetuk/menyentuh di luar area Navigation Drawer. c. Tombol Kembali: Menekan tombol kembali (back) pada perangkat. Gambar berikut ini menyajikan ilustrasi penggunaan Navigation Drawer pada aplikasi mobile Flutter(Flutter API Documentation, 2023c).
71 1. Langkah-langah Implementasi Bottom Navigation Bar adalah pola navigasi yang diadopsi secara luas dalam desain aplikasi mobile yang memainkan peran penting dalam memandu pengguna untuk mengakses bagian-bagian penting aplikasi mobile(Google Material Design, 2023a). Bagian ini menyajikan panduan langkah demi langkah tentang cara membuat Bottom Navigation Bar di Flutter(Flutter API Documentation, 2023b). Langkah 1: Mengimpor Pustaka (Library) Sebelum membuat Bottom Navigation Bar, pastikan untuk mengimpor dependensi Flutter yang diperlukan. Langkah 2: Definisikan Item Navigasi Selanjutnya, tentukan item navigasi yang ingin Anda tampilkan di Bottom Navigation Bar. Setiap item biasanya terdiri dari sebuah ikon dan label yang bersifat opsional. Perhatikan contoh berikut ini:
72 Langkah 3: Buat Stateful Widget Untuk membuat Bottom Navigation Bar yang dinamis, langkah berikutnya adalah dengan membuat sebuah kelas yang merupakan turunan dari kelas StatefulWidget untuk mengelola item yang dipilih dan menangani ketukan pada item. Perhatikan potongan kode program untuk mendefinisikan kelas Stateful Widget berikut ini:
73 Langkah 4: Menerapkan State Dalam kelas state, tetapkan variabel untuk melacak item yang sedang dipilih dan fungsi untuk menangani ketukan pada item. Berikut ini adalah contoh penerapannya: Langkah 5: Menggunakan widget BottomNavigationBar Dalam method build pada kelas state, buat widget Bottom Navigation Bar dan konfigurasi dengan item navigasi yang ditentukan dan indeks item yang dipilih(Flutter API Documentation, 2023a).
74 2. Menangani Event pada Bottom Navigation Bar Properti onTap dari widget BottomNavigationBar digunakan untuk menangani event ketuk pada sebuah item di Bottom Navigation Bar. Berikut ini potongan kode program pengaturan properti onTap pada BottomNavigationBar:
75 Penjelasan potongan kode program: a. item: Properti yang berisi list widget Bottom Navigation Bar Item, masing-masing mewakili item navigasi dengan ikon dan label. b. currentIndex: Properti ini melacak indeks item pada Bottom Navigation Bar yang sedang dipilih. c. onTap: Properti ini berisi fungsi yang menangani ketukan pengguna pada item navigasi, pada contoh diatas berisi fungsi _onItemTapped. Berikut ini adalah contoh penerapan fungsi _onItemTapped:
76 Gambar berikut ini menyajikan ilustrasi penggunaan Bottom Navigation Bar pada aplikasi mobile Flutter(Flutter API Documentation, 2023b).
77
78 ada saat kita mengembangkan aplikasi Flutter yang melibatkan sejumlah halaman, seperti widget PageView, BottomNavigationBar, TabBarView, ketika terjadi transisi antar halaman, maka secara default, widget yang ditampilkan pada halaman sebelumnya akan dihancurkan dan state-nya hilang seperti contoh ilustrasi pada Gambar 1 berikut: P Suheri, S.T., M.Cs.,
79 Gambar 1. Ilustrasi transisi halaman aplikasi Flutter Adapun pohon widget dari aplikasi Flutter pada Gambar 10.1 disajikan pada Gambar 2 berikut: Text Text ListTile ListTile MaterialApp PageView Scaffold (Page 1) Scaffold (Page 2) AppBar ListView AppBar ListView Text ListTile Text Text ListTile Text home: children: appBar: body: appBar: body: title: itemBuilder: title: itemBuilder: title: title: Gambar 2. Pohon widget dari aplikasi Flutter pada Gambar 1
80 Aplikasi Flutter yang telah disajikan pada Gambar 10.1 dimulai dari menampilkan halaman ‘Page 1’ bagian (a) dengan posisi gulir (scroll position) pada ‘Item ke-1’ sebagai state-nya, yang dilanjutkan dengan dilakukan pengguliran widget ListView bagian (b), sehingga posisi gulir menunjukkan pada ‘Item ke-10’. Selanjutnya terjadi transisi dari ‘Page 1’ bagian (b) ke ‘Page 2’ bagian (c), kemudian kembali lagi ke ‘Page 1’ bagian (d). Pada saat terjadi transisi ke ‘Page 2’ bagian (c), ‘Page 1’ bagian (b) dimusnahkan yang menyebabkan state-nya hilang. Oleh karena itu, ketika terjadi transisi dari ‘Page 2’ bagian (c) ke ‘Page 1’ bagian (d), posisi gulir kembali ke ‘Item ke-1’. Berikut ini adalah kode program selengkapnya untuk file main.dart:
81
82 Pada kasus tertentu kita dihadapkan dengan keperluan untuk mempertahankan state dari widget tertentu ketika terjadi transisi antar halaman. Untuk itu, Flutter menyediakan sebuah widget, yaitu PageStorage. Pada bab ini, kita akan membahas terkait PageStorage dan penggunaannya. PageStorage merupakan widget di Flutter yang digunakan untuk menyimpan state dari widget tertentu sebelum widget tersebut tidak terlihat di layar atau dimusnahkan, sehingga ketika widget tersebut muncul kembali di layar atau diciptakan ulang, state dapat dipulihkan
83 (Google, 2014a). Berikut ini adalah bentuk constructor dari PageStorage: PageStorage memiliki 2 (dua) properti utama yaitu bucket dan child. Properti bucket merupakan objek bucket yang berasal dari PageStorageBucket dan berfungsi sebagai bucket penyimpanan state widget anak per halaman, dan akan tetap ada di seluruh navigasi dari satu halaman ke halaman lainnya (Google, 2014b). Properti child merupakan widget anak dari widget PageStorage (Google, 2014a). Pada penggunaannya, seperti yang sudah dijelaskan sebelumnya, PageStorage memerlukan PageStorageBucket sebagai bucket penyimpanan state widget anak. Berikut ini adalah bentuk constructor dari PageStorageBucket: Selain itu, diperlukan key sebagai pengenal (identifier), bersifat unik, dan terhubung dengan setiap state widget anak yang tersimpan di bucket, serta juga terhubung dengan properti key dari setiap widget anak yang state-nya perlu dipertahankan. Key ini disebut dengan PageStorageKey (Google, 2014c). PageStorageKey merupakan key khusus yang digunakan untuk menyimpan informasi (state) halaman, misalnya posisi gulir (Windmill, 2020). State yang berupa
84 posisi gulir dari setiap widget yang dapat digulirkan (seperti ListView, SingleChildScrollView, dan lainnya), akan disimpan dan dipulihkan secara otomatis (Google, 2014a). Sedangkan state lainnya disimpan dan dipulihkan dengan menggunakan method readState dan writeState dari objek bucket (Google, 2014b). Berikut ini adalah bentuk constructor dari PageStorageKey: Nilai dari parameter value di atas harus bersifat unik untuk setiap widget yang state-nya akan dipertahankan. Adapun langkah-langkah secara eksplisit dalam implementasi PageStorage, PageStorageBucket, dan PageStorageKey adalah sebagai berikut: 1. Membungkus widget yang di dalamnya terdapat state widget yang perlu dipertahankan menggunakan widget PageStorage, dengan menjadikan widget tersebut menjadi widget anak dari widget PageStorage; 2. Menghubungkan properti bucket dari widget PageStorage dengan objek PageStorageBucket; 3. Menghubungkan properti key dari widget anak yang state-nya akan dipertahankan dengan objek PageStorageKey. Langkah-langkah di atas umumnya digunakan untuk widget yang tergolong StatelessWidget, sedangkan untuk widget yang tergolong StatefulWidget, selain dari 3 (tiga) langkah di atas, ditambahkan dengan 1 (satu) langkah lagi, yaitu menyimpan state menggunakan method writeState dan memulihkan state menggunakan method readState yang dimiliki oleh objek PageStorageBucket.
85 Namun, biasanya kita tidak perlu menggunakan PageStorage secara eksplisit, karena sudah disertakan dalam routes (Google, 2014a). Oleh karena itu, secara eksplisit, kita hanya perlu menghubungkan properti key dari widget anak yang state-nya ingin dipertahankan dengan objek PageStorageKey, dan menggunakan method readState dan writeState jika diperlukan. Berdasarkan contoh pada Gambar 10.1, apabila state posisi gulir dari widget ListView yang ada di ‘Page 1’ dan ‘Page 2’ ingin dipertahankan ketika terjadi transisi antar halaman, maka langkah secara eksplisit yang dilakukan adalah sebagai berikut: 1. Membungkus widget PageView dengan widget PageStorage; 2. Membuat objek PageStorageBucket dan dihubungkan dengan properti bucket; 3. Membuat objek PageStorageKey yang dapat dihubungkan dengan properti key dari widget MyHomePage atau ListView. Berikut ini adalah potongan kode program dari file main.dart yang telah dimodifikasi:
86
87 Hasil dari penggunaan PageStorage, PageStorageBucket, dan PageStorageKey untuk contoh aplikasi Flutter pada Gambar 1 disajikan pada Gambar 3 berikut:
88 Gambar 3. Hasil penerapan PageStorage, PageStorageBucket, dan PageStorageKey Terlihat bahwa state posisi gulir dari widget ListView yang ada pada ‘Page 1’ dan ‘Page 2’ tetap dipertahankan walaupun telah terjadi transisi dari ‘Page 1’ ke ‘Page 2’ atau sebaliknya. Untuk mempermudah dalam memahami implementasi pada StatefulWidget, Gambar 4 berikut ini adalah contoh
89 kasus aplikasi biodata yang terdiri dari 2 (dua) halaman, yaitu halaman ‘Pendidikan S1’ dan ‘Pendidikan S2’. Gambar 4. Tampilan aplikasi biodata Berikut ini adalah kode program file main.dart untuk aplikasi biodata pada Gambar 10.4 di atas:
90