91
92
93 Agar aplikasi biodata di atas dapat mempertahankan state berupa teks yang telah dimasukkan pada widget TextField yang tersedia, maka langkah yang dilakukan adalah sebagai berikut: 1. Mendeklarasikan beberapa variabel untuk objek TextEditingController yang digunakan untuk manipulasi teks dari widget TextField; 2. Mendeklarasikan beberapa variabel untuk objek PageStorageKey; 3. Menghubungkan objek PageStorageKey dengan properti key dari masing-masing widget TextField yang ada.
94 4. Melakukan override terhadap method initState yang isinya adalah: a. Inisialisasi objek PageStorageKey; b. Memulihkan state dengan cara membaca state pada bucket menggunakan method readState berdasarkan PageStorageKey dan hasilnya dihubungkan dengan TextEditingController yang bersesuaian; c. Menambahkan listener pada masing-masing variabel untuk objek TextEditingController yang isinya adalah menyimpan state dari masing-masing widget TextField berdasarkan PageStorageKey yang bersesuaian dengan menggunakan method writeState. 5. Langkah tambahan adalah melepaskan resource yang digunakan oleh objek TextEditingController ketika halaman dimusnahkan dengan melakukan override terhadap method dispose, yang isinya adalah memanggil method dispose untuk setiap objek TextEditingController yang ada. Berikut ini adalah potongan kode program dari aplikasi biodata yang telah dimodifikasi:
95
96
97
98
99 orm pada perancangan aplikasi adalah antarmuka yang digunakan untuk mengumpulkan informasi atau input dari pengguna. Form ini dapat mencakup berbagai elemen seperti teks input, kotak centang, tombol radio, area teks, dan elemen formulir lainnya. Tujuan utama dari form adalah memfasilitasi interaksi antara pengguna dan aplikasi, sehingga pengguna dapat memberikan data atau memilih opsi sesuai kebutuhan. Form merupakan komponen UI (user interface) yang pasti disediakan di semua platform. Mulai dari platform web, desktop application dan mobile application. Bahkan wearable device seperti smartwatch mendukung penggunaan form (Flutter Documentation, 2020). F Safri Adam, S.Kom., M.Kom
100 Pada platform mobile, khususnya pada framework flutter menyediakan fitur ini dalam rangka memenuhi kebutuhan user dalam transaksi data di dalam aplikasi. Berdasarkan halaman resmi dokumentasi flutter, pengembangan form melibatkan penggunaan widget-form khusus yang disediakan oleh framework. Flutter menyediakan beberapa widget-form yang memudahkan pengumpulan input dari pengguna . Form sangat diperlukan dalam aplikasi mobile untuk berinteraksi dengan pengguna. Flutter menyediakan sekumpulan widget formulir untuk Material Design dan iOS-style. Form widget ini umumnya tidak memiliki internal state. Penampilan dan behavior-nya murni ditentukan oleh parameter constructor. Dengan state yang dipertahankan di widget parent, form widget di-render ulang untuk mencerminkan perubahan state. Bab ini membahas Beberapa widget-form umum yang digunakan termasuk TextField, Checkbox, Radio, DropdownButton, dan lainnya (Cheng, 2019). Beberapa aplikasi mobile kebanyakan meminta pengguna untuk memasukkan informasi kedalam TextField. Contoh yang paling mudah dan paling sering adalah user diminta untuk memasukan Alamat email dan kombinasi password untuk login ke dalam aplikasi. salah satunya menggunakan widget text field. Text field memungkinkan pengguna mengetik teks ke dalam aplikasi. Text field digunakan untuk membuat Form, mengirim pesan, melakukan pencarian data, dan banyak lagi. Flutter sendiri menyediakan dua jenis text field yaitu : TextField dan TextFormField. TextField adalah widget paling umum yang digunakan untuk melakukan input text. Secara default bawaan dari flutter, widget TextField didekorasi dengan dengan garis
101 bawah. Kita dapat memberikan dekorasi dengan menambahkan label, icon, inline hint text, dan error text yang disediakan oleh InputDecoration di dalam properti decoration di widget TextField. Untuk menghapus seluruh dekorasi (termasuk underline dan space yang disediakan untuk label), atur decoration menjadi null. Kita bisa mencoba mengimplementasikan penggunaan form seperti kode berikut:
102 Tampilan default untuk form sederhana pada flutter dapat dilihat pada gambar dibawah ini: Untuk membuat TextField lebih bergaya, kita dapat memberikan decoration yang disediakan oleh flutter, lebih lengkap semua tersedia di: https://api.flutter.dev/flutter/material/InputDecorationclass.html TextFormField membungkus TextField dan mengintegrasikannya dengan Form yang terbungkus oleh widget ini. Ini menyediakan fungsionalitas tambahan, seperti validasi dan integrasi dengan widget FormField lainnya yang akan dibahas diakhir bab ini. Checkbox itu sendiri tidak mempertahankan state apa pun. Sebaliknya, ketika state Checkbox berubah, widget akan memanggil callback onChanged. Kebanyakan widget yang menggunakan Checkbox akan menggunakan callback onChanged dan rebuild Checkbox dengan value baru untuk memperbarui tampilan visual Checkbox. Checkbox secara opsional dapat menampilkan tiga nilai: true, false, dan null - jika tristate true. Ketika nilainya null, tanda centang ditampilkan. Secara default, tristate bernilai false dan nilai Checkbox harus true atau false. Contoh
103 dibawah ini menunjukkan bagaimana kita dapat menggunakan Checkbox secara default dengan nilai true. Kita bisa meletakan widget ini dibawah widget TextField didalam widget Column yang telah kita buat sebelumnya, sehingga hasil output widget checkbox seperti dibawah ini: Supaya widget Checkbox ini berfungsi, kita perlu memberikan state kepada widget ini. Sebelumnya berikan nilai default dan ditampung dengan variabel isChecked didalam kelas state pada stateful widget. Kemudian berikan state didalam property onChange didalam widget checkbox . Kita dapat memberikan beberapa property untuk mempercantik widget checkbox dengan widget CheckboxListTile seperti contoh dibawah ini:
104 Tombol radio digunakan dalam grup dengan opsi di aplikasi flutter. Perbedaan mendasar radio dan checkbox adalah jumlah pilihannya, radio dibuat dalam satu grup dan hanya dapat memilih salah satu dari banyak radio. Radio cukup penting dalam form karena dapat digunakan didalam form untuk input data pilihan dari user. kita dapat menambahkan radio button didalam flutter dengan menggunakan widget Radio().
105 } ) Pada radio button, terdapat beberapa property wajib diantaranya value yang digunakan sebagai nilai pengembalian jika button tersebut dipilih. groupValue digunakan sebagai identitas grup radio yang sama. Nama groupValue harus sama dalam satu grup. Kemudian property onChanged yang dapat digunakan untuk mendapatkan nilai yang diubah Ketika tombol pada radio button di klik. Untuk menambah label widget Radio kita dapat menggunakan widget RadioListTile seperti kode dibawah ini
106 Pada contoh diatas, ada dua widget radio button. Diantara beberapa radio button tidak akan ada yang dipilih saat pertama kali karena kita memiliki variabel gender yang nullable dalam parameter groupValue. Jika kita menginginkan salah satu radio button secara default, lakukan inisialisasi value seperti dibawah ini:
107 Aplikasi sering meminta user untuk memasukan informasi kedalam form input. Beberapa informasi yang dibutuhkan wajib diisi didalam form. Pada kasus ini validasi ini menjaga agar form input tetap terisi sesuai dengan tipe masukan yang diinginkan aplikasi. validasi paling umum yang digunakan adalah validasi data form boleh kosong. Jenis form yang paling rentan terjadi kesalahan input adalah textfield, hal ini disebabkan karena masukan dari pengguna ke dalam textfield bebas diisi oleh pengguna. Berbeda hal dengan form input combobox, checkbox dan Radio yang value-nya terkendali karena user tidak punya pilihan lain selain pilihan yang disediakan oleh masing-masing form input tersebut. Sebagai contoh simpel, kita mungkin mengisikan username menggunakan email dan kombinasi password pada saat login ke aplikasi. Untuk membuat aplikasi tetap aman dan mudah digunakan, dan memastikan informasi yang diberikan pengguna telah valid. Jika pengguna mengisikan form dengan benar, maka informasi akan diproses. Jika pengguna mengisikan informasi yang salah, maka dengan ramah aplikasi akan menampilkan pesan kesalahan (error) dan memberitahu pengguna bagian mana yang salah. Pada contoh ini kita akan menambahkan validasi terhadap form pada single textfield menggunakan Langkah berikut: 1. Membuat sebuah widget Form dengan sebuah GlobalKey 2. Menambahkan TextFormField dengan logika validasi
108 3. Membuat tombol untuk melakukan validasi dan melakukan submit form. Membuat sebuah widget Form dengan sebuah GlobalKey Pertama, buat sebuah widget Form. Widget Form bertindak sebagai wadah untuk mengelompokkan dan memvalidasi beberapa Form. Saat membuat formulir, kita harus membuat sebuah properti GlobalKey. Key ini bersifat unik yang berfungsi untuk mengidentifikasi sebuah Form. GlobalKey juga dapat dimanfaatkan untuk menyimpan sebuah state dari sebuah widget supaya saat elemen dikirim ke lokasi lain tetapi masih didalam widget tree state-nya tidak hilang. Pada umumnya key ini tidak selalu harus didefinisikan secara eksplisit, karena framework flutter sudah menanganinya secara internal untuk membedakan antar widget. Namun pada saat menggunakan Form, GlobalKey ini sangat direkomendasikan. Jika kita mempunyai widget tree yang lebih kompleks, kita dapat menggunakan metode Form.of() untuk mengakses Form dengan widget bersarang. GlobalKey deklarasikan didalam kelas state dan isikan pada property key didalam widget Form seperti pada kode dibawah ini.
109
110 Meskipun Form telah dibuat, namun pengguna belum bisa memasukan text. Oleh karena itu kita memerlukan TextFormFiel yang bertugas untuk me-render Form text pada material design dan dapat menampilkan pesan kesalahan validasi Ketika terjadi. Sekarang kita akan membuat sebuah validator yang memastikan TextFormField tidak kosong. Jika kosong, maka akan menampilkan pesan kesalahan seperti contoh dibawah ini: ), Pada contoh diatas, properti validator akan menerima text yang dimasukkan oleh pengguna. Didalamnya terdapat kondisi jika value yang diisikan adalah null atau kosong, maka akan mengembalikan pesan error 'Isian ini tidak boleh kosong' saat pengguna menekan ElevatedButton. Untuk melihat apakah validasi yang kita buat berhasil atau tidak, maka kita perlu tombol yang membuat validasi ini bekerja. Selain itu, tombol submit digunakan untuk mengirimkan informasi yang akan diproses selanjutnya. Saat pengguna menekan tombol ini, akan diperiksa apakah
111 formular tersebut valid. Jika Ya, maka akan menampilkan pesan sukses. Namun jika Tidak ( tidak ada konten diisikan didalam TextFormField), maka akan menampilkan pesan error. Untuk tombol kita menggunakan widget ElevatedButton seperti contoh kode dibawah ini: Validasi bekerja saat pengguna menekan tombol yang kemudian mengidentifikasi _formKey yang telah dibuat sebelumnya. Kita juga dapat menggunakan _formKey.currentState untuk mengakses FormState yang secara default dibuat oleh flutter saat kita membuat Form. Kelas FormState yang berisi method validate() akan terpanggil disetiap TextFormField. Jika semua form terisi, maka method validate() akan mengembalikan value True. Sebaliknya, jika form berisi kesalahan, maka method
112 validate() akan memanggil Kembali form untuk menampilkan value pesan kesalahan. Hasil output validasi kode diatas seperti pada gambar dibawah ini: Gambar kiri diatas adalah kondisi jika tombol ditekan saat TextFormField dibiarkan kosong. Namun jika diisikan sebuah text maka akan menampilkan SnackBar seperti kanan diatas. Untuk mengirim dan mengambil data dari FormField, sederhana-nya dapat dilakukan pada 3 tahap berikut yaitu: Membuat sebuah TextEditingController,Menyediakan TextEditingController ke TextField, dan Menampilkan data yang telah dikirim. Tahap pertama yaitu Membuat sebuah TextEditingController untuk mengambil nilai text yang telah diinputkan pengguna ke dalam TextField, kita harus membuat TextEditingController dan berikan ke widget TextField atau TextFormField. Kita cukup mendeklarasikan sebuah variable bernama myController seperti contoh berikut didalam kelas state pada stateful widget:
113 Untuk membersihkan controller saat widget di-destroy atau dibuang kita perlu membuat fungsi dispose() seperti contoh dibawah ini: Kemudian sambungkan ke textField menggunakan property controller seperti contoh dibawah ini: Selanjutnya mulai membaca value dengan menggunakan method text() yang tersedia di TextEditingController untuk mengambil nilai yang diinputkan pengguna di TextField. Kemudian kita akan membuat dialog peringatan dengan TextField Ketika pengguna menekan tombol floating button. Kode lengkap dari materi mengambil nilai pada form dituliskan dibawah ini:
114
115
116 Hasil output dari kode diatas sebagai berikut:
117 A. Inti dari manajemen tata letak (layout) di Flutter adalah widget. Di Flutter, hampir semuanya adalah widget, bahkan model tata letak pun merupakan widget. Gambar, ikon dan teks yang dapat Anda lihat (visible) di aplikasi Flutter semuanya merupakan widget. Namun hal-hal yang tidak Anda lihat (invisible) juga merupakan widget, seperti baris, kolom dan kisi yang mengatur, membatas dan menyelaraskan widget yang terlihat. Anda membuat tata letak dengan cara menyusun beberapa widget (composing other widgets) untuk membuat widget yang lebih kompleks. Layout widgets biasanya Ferry Faisal, SST., MT
118 digunakan ketika suatu widget dibangun oleh susunan atau komposisi dari widget lainnya. Sebelum bisa membangun layout yang baik, Anda perlu memahami terlebih dahulu bagaimana widget-widget ditata dalam sebuah aplikasi di Flutter. Penjelasan berikut ini menunjukkan cara membuat tata letak dan menampilkannya dari sebuah aplikasi ‚Hello Universe‛ sederhana. Di Flutter, untuk meletakkan teks, ikon, atau gambar di layar hanya perlu beberapa langkah, sebagai berikut: 1. Pilih sebuah layout widget. Pilih dari beragam layout widgets berdasarkan cara Anda ingin menyelaraskan atau membatasi visible widget, karena karakteristik ini biasanya diteruskan ke widget lain yang menjadi anaknya (child atau children). Pada contoh ini digunakan layout widget Center yang memusatkan kontennya secara horizontal dan vertikal. 2. Buat sebuah visible widget. Misalnya, buat sebuah Text widget untuk menampilkan teks ‚Hello Universe‛: Text('Hello Universe), 3. Tambahkan visible widget ke layout widget. Semua layout widgets memiliki salah satu properti berikut: a. Properti child, jika mereka hanya memiliki satu anak, misalnya: Center atau Container. b. Properti children jika mereka memiliki lebih dari satu anak, misalnya: Row, Column, ListView atau Stack.
119 Sesuai contoh di atas, maka tambahkan Text widget ke Center widget: 4. Tambahkan layout widget ke halaman (page) aplikasi. Aplikasi Flutter sendiri merupakan sebuah widget, dan sebagian besar widget memiliki metode build(). Membuat instance dan mengembalikan widget dengan metode build() dalam aplikasi akan menampilkan widget tersebut. Berikut ini adalah kode sumber untuk contoh di atas:
120 MaterialApp dan Scaffold adalah dua komponen utama yang membentuk kerangka kerja (framework) dasar dalam aplikasi Flutter. Mereka memberikan struktur dan komponen esensial yang dibutuhkan untuk membangun aplikasi yang berbasis Material Design. Lebih lanjut tentang dua komponen ini, akan dijelaskan di subbab berikutnya. Tampilan dari contoh aplikasi sederhana ‚Hello Universe‛ diperlihatkan pada Gambar 1 di bawah ini. Gambar 1. Tampilan Layout Aplikasi ‚Hello Universe‛
121 Tampilan antarmuka aplikasi pada Gambar 12.1, dapat digambarkan struktur layout-nya menggunakan pohon widget (widget tree) seperti berikut ini: Gambar 2. Diagram Widget Tree MaterialApp adalah widget yang memberikan kerangka utama untuk aplikasi Flutter. Dalam contoh kode aplikasi yang disajikan di atas, MaterialApp menetapkan judul aplikasi (title) dan merujuk ke widget utama yang akan menjadi halaman beranda yaitu MyApp. MyApp sendiri adalah widget Scaffold. Scaffold adalah widget yang menyediakan struktur dasar untuk sebuah halaman dalam aplikasi Flutter. Ini mencakup elemen-elemen seperti AppBar, Center dan widget lainnya, yang dapat membentuk kerangka kerja tata letak halaman utama. Properti ‚body‛ yang dimiliki oleh Scaffold digunakan untuk menambahkan layout widget ke layar utama. Center, sebagai sebuah layout widget, lebih mirip seperti sebuah wadah atau container. Anda perlu menambahkan
122 sebuah visible widget untuk menampilkan sesuatu, dalam hal ini adalah sebuah teks atau string yang menampilkan tulisan ‚Hello Universe‛. Pada bagian ini, akan dibahas lebih jauh beberapa layout widget lainnya yang berguna untuk menyusun widget sesuai kebutuhan rancangan aplikasi. Terdapat dua tipe layout widget, berdasarkan banyaknya anak (child) yang dimiliki, yaitu: 1. Single Child. Pada widget dengan tipe ini hanya bisa ditambahkan satu anak (one child) sebagai keturunannya. 2. Beberapa contohnya adalah: Center, Container, Padding, Expanded, Flexible, ConstrainedBox, FittedBox, FractionallySizedBox, LimitedBox, OverflowBox, SizedOverflowBox, SizedBox, IntrinsicHeight, IntrinsicWidth dan Transform. 3. Multi Child. Pada widget tipe ini, dapat ditambahkan lebih dari satu anak (multiple children). Contohnya adalah: Row, Column, Flex, ListView, GridView, Stack, IndexedStack, Flow, LayoutBuilder, ListBody, Table dan Wrap. Pada penjelasan berikutnya, hanya akan dibahas beberapa layout widget yang umum dan sering digunakan. Container adalah salah satu widget dasar dari tipe Single Child yang berperan penting dalam manajemen layout. Ini menyediakan wadah persegi yang dapat diisi dengan widget lain dan memberikan kontrol yang kuat untuk mengatur
123 penataan dan dekorasi pada antarmuka pengguna sesuai kebutuhan desain aplikasi. Mari ubah kode sumber sebelumnya dengan mengganti layout widget Center dengan Container, seperti berikut ini.
124 Berikut beberapa konsep dasar yang perlu diketahui: 1. Pengaturan Warna. Properti color pada Container untuk mengubah warna latar belakang. Adapun properti style pada visible widget Text, untuk mengubah ukuran huruf (font size). (a) (b) (c) Gambar 3. Tata Letak dan Properti Container:
125 (a) default, (b) properti style, (c) properti color 2. Pengaturan Margin dan Padding. Properti margin digunakan untuk memberikan ruang di sekitar Container. Sedangkan properti padding digunakan untuk memberikan ruang di dalam Container untuk widget anaknya yaitu widget Text. (a) (b) Gambar 4. Tata Letak dan Properti Container: (a) properti margin, (b) properti margin dan padding padding margin
126 3. Pengaturan Lebar dan Tinggi. Anda dapat mengatur lebar dan tinggi Container menggunakan properti width dan height. Gambar 5. Container dengan Properti Width dan Height
127 4. Penyelarasan (Alignment). Properti alignment digunakan untuk menyelaraskan widget anak di dalam widget Container. Pemberian nilai Alignment.center tanpa pengaturan properti width dan height, akan menempatkannya pada posisi persis di tengah-tengah terhadap lebar dan tinggi Container-nya. Ini diperlihatkan pada Gambar 12.6 (a). 5. Pengaturan Transformasi. Properti transform memungkinkan untuk melakukan transformasi seperti rotasi pada Container. Pemberian nilai Matrix4.rotationZ(0.2), akan memutar widget Container searah jarum jam (clockwise) sebesar nilai yang diberikan. Hasil transformasi ini diperlihatkan pada Gambar 12.6 (b).
128 Berdasarkan penjelasan di atas, Container dapat dianggap sebagai widget yang memadukan aspek-aspek dari layout dan visible dalam membangun antarmuka pengguna. (a) (b) Gambar 6. Tata Letak dan Properti Container: (a) properti alignment, (b) properti transform Dengan memahami konsep dasar Container, Anda dapat membangun dasar layout yang solid untuk aplikasi mobile dengan Flutter.
129 Salah satu pola tata letak yang paling umum adalah pengaturan layout yang tersusun berjajar ke samping (horizontal), bersusun ke bawah (vertikal) atau kombinasi dari keduanya. Dalam Flutter, Row dan Column yang termasuk dalam tipe Multi Child, adalah dua layout widget kunci yang mengatur widget anak secara horizontal atau vertikal secara efisien. Widget Row digunakan untuk menyusun widget anakanaknya secara horizontal. Sebagai contoh, mari tambahkan tiga widget Container sebagai anak-anaknya. Container memiliki widget Text sebagai anaknya.
130
131 Tampilan dari layout Row diperlihatkan pada Gambar 7(a). Selanjutnya, untuk menyusun widget anak-anaknya secara vertikal digunakan Widget Column. Dari contoh kode sumber di atas, Anda cukup mengganti widget Row dengan Column. Hasil dari tampilan layout menggunakan Column ini, diperlihatkan pada Gambar 7(b) seperti di bawah ini. (a) (b) Gambar 7.(a) Layout Horizontal, (b) Layout Vertikal Demikianlah beberapa contoh dasar-dasar menyusun tata letak menggunakan layout widget, baik yang bertipe
132 Single Child maupun Multi Child. Single Child merupakan widget yang hanya memiliki satu widget anak, contoh pada penjelasan di atas adalah Center dan Container. Sedangkan Multi Child adalah widget yang bisa memiliki banyak widget anak, seperti Row dan Column. Masih banyak lagi layout widget yang umum dan sering dipakai untuk dipelajari lebih lanjut, seperti Expanded, ListView, GridView, Stack dan sebagainya, namun belum dibahas pada Book Chapter ini.
133 DAFTAR PUSTAKA Allen, D. (2015) Getting Things Done: The Art of Stress-Free Productivity. Penguin. App Annie (2022) The State of Mobile 2022 Report. Android Developer Guide : https://developer.android.com Budi Raharjo, Pemrograman Android Dengan Flutter, edisi 2, penerbit Informatika,2021 Brown, T. (2019) Design Thinking. Harvard Business Review. Chakravorti, B. (2017) The New Face of Innovation: The Intersection of Mobile Advertising and Mobile Apps. MIT Sloan Management Review. Conder, S., Darcey, L. and Bailey, M. (2015) Android Wireless Application Development Volume I: Android Essentials. Addison-Wesley. Conway, J. and Hillegass, A. (2018) iOS Programming: The Big Nerd Ranch Guide. Big Nerd Ranch. Cheng, F. (2019) Flutter Recipes, Flutter Recipes. Available at: https://doi.org/10.1007/978-1-4842-4982-6. Cooper, A., Reimann, R. and Cronin, D. (2007) About Face 3: The Essentials of Interaction Design. Wiley.
134 Deitel, P., Deitel, H.M. and Deitel, A. (2019) Android 9 Development: Efficient App Design with App Development and Publishing. Pearson. Fogg, B.J. (2003) Persuasive Technology: Using Computers to Change What We Think and Do. Morgan Kaufmann. Flutter Officail Guide : https://flutter.dev/ Flutter API Documentation (2023a) AppBar class - material library - Dart API. Available at: https://api.flutter.dev/flutter/material/AppBar-class.html (Accessed: 30 December 2023). Flutter Documentation (2020) Create and style a text field. Available at: https://docs.flutter.dev/cookbook/forms/text-input (Accessed: 23 November 2023). Flutter API Documentation (2023b) BottomNavigationBar class - material library - Dart API. Available at: https://api.flutter.dev/flutter/material/BottomNavigation Bar-class.html (Accessed: 30 December 2023). Flutter Documentation 2023, Layouts in Flutter, diakses 4 Desember 2023, (https://docs.flutter.dev/ui/layout). Flutter, 2019, Tutorials Point (I) Pvt. Ltd, diakses 20 November 2023, (https://www.tutorialspoint.com/flutter/index.htm). Flutter API Documentation (2023c) Drawer class - material library - Dart API. Available at: https://api.flutter.dev/flutter/material/Drawer-class.html (Accessed: 25 December 2023). Flutter API Documentation (2023d) Scaffold class - material library - Dart API. Available at:
135 https://api.flutter.dev/flutter/material/Scaffold-class.html (Accessed: 25 December 2023). Google (2014a) PageStorage class - widgets library - Dart API, Flutter Documentation. Available at: https://api.flutter.dev/flutter/widgets/PageStorageclass.html (Accessed: 22 December 2023). Google (2014b) PageStorageBucket class - widgets library - Dart API, Flutter Documentation. Available at: https://api.flutter.dev/flutter/widgets/PageStorageclass.html (Accessed: 6 January 2024). Google (2014c) PageStorageKey class - widgets library - Dart API, Flutter Documentation. Available at: https://api.flutter.dev/flutter/widgets/PageStorageKeyclass.html (Accessed: 6 January 2024). Google Material Design (2023a) Bottom Navigation, Material Design. Available at: https://m2.material.io/components/bottom-navigation (Accessed: 30 December 2023). Google Material Design (2023b) Navigation drawer – Material Design 3, Material Design. Available at: https://m3.material.io/components/navigationdrawer/overview (Accessed: 25 December 2023). Gitlab : https://gitlab.com Hadi, Diki Alfarabi. 2017. E-book Belajar Cepat CodeIgniter Lengkap Studi Kasus Membuat Aplikasi Rental Mobil. Hoober, S. and Berkman, E. (2016) Designing Mobile Interfaces: Patterns for Interaction Design. O’Reilly Media.
136 Indonesia, L.S. (2021) Materi 3.2 Mobile Application, https://lmsspada.kemdikbud.go.id/mod/page/view.php?i d=104255 Jogiyanto HM, Analisis dan Desain Sistem Informasi: Pendekatan Terstruktur Teori dan Praktek Aplikasi Bisnis, Yogyakarta: Andi Offset, 2005. Juul, J. (2011) A Casual Revolution: Reinventing Video Games and Their Players. MIT Press. Mulloni, A., Seichter H., Schmalstieg D., Handheld Augmented Reality Indoor Navigation with ActivityBased Instructions, ACM 2011 Mohan, Anirudh.(2014).VirtualTag: Enabling Indoor Augmented Reality with Marker-Facilitated Localization, 1-25. McFarland, D. (2011) HTML5: The Missing Manual. O’Reilly Media. Mainkar, P & Giodano, S 2019, Google Flutter Mobile Development Quick Start Guide. Packt Publishing Ltd, Birmingham. McFarland, D. (2017) JavaScript & jQuery: The Missing Manual. O’Reilly Media. Mead, R. (2017) Learning React Native: Building Native Mobile Apps with JavaScript. O’Reilly Media. Nazruddin Safaat H,MT,Radinal Dwiki Novendra,ST, Membangun Aplikasi dengan Android Flutter, Penerbit Informatika, 2021 Norman, D.A. (2013) The Design of Everyday Things. Basic Books. Owens, J. and Spector, L. (2012) Developing Web Applications with Oracle ADF Essentials. Packt Publishing.
137 Permata, H. (2018) Sejarah Perkembangan Mobile App, https://harmonipermata.com/sejarah-perkembanganMobile-app/. Ritchie, J.D. (2018) Mastering Mobile App Marketing: Monetize Your App with No Budget. Packt Publishing. Rogers, Y., Sharp, H. and Preece, J. (2011) Interaction Design: Beyond Human-Computer Interaction. John Wiley & Sons. Sommerville, I. (2011) Software Engineering (9th ed.). AddisonWesley. Tyagi, P 2022, Pragmatic Flutter Building Cross-Platform Mobile Apps for Android, iOS, Web & Desktop, CRC Press Taylor & Francis Group, Boca Raton. Tondreau, B. (2019a) Designing UX: Forms: Create Forms That Don’t Drive Your Users Crazy. A Book Apart. Tondreau, B. (2019b) Responsive Web Design with HTML5 and CSS: Develop future-proof responsive websites using the latest HTML5 and CSS techniques. Packt Publishing. Visual Studio Code : https://code.visualstudio.com/download Windmill, E. (2020) Flutter in Action. New York: Manning Publications Co. Westerman, G., Bonnet, D. and McAfee, A. (2014) Leading Digital: Turning Technology into Business Transformation. Harvard Business Review Press. Xampp : https://www.apachefriends.org/download
138 TENTANG PENULIS Radinal Setyadinsa, S.Pd., M.T.I merupakan seorang PNS dosen Sarjana Informatika di Universitas Pembangunan Nasional ‛Veteran‛ Jakarta (UPNVJ). Penulis dilahirkan di Jakarta. Penulis menempuh pendidikan S1 Pendidikan Teknik Elektronika di Universitas Negeri Jakarta (UNJ) (lulus tahun 2012) dan S2 Magister Teknologi Informasi di Universitas Indonesia (UI) (lulus tahun 2018). Etza Nofarita,ST,M.Kom. Lulus S1 Teknik Industri Universitas Bung Hatta Padang pada Tahun 1998., Lulus S2 Magister Ilmu Komputer di Universitas Putra IIndonesia ‚UPI ‚ YPTK Padang pada Tahun 2013. Saat ini adalah Dosen Tetap Program studi Teknik Komputer di Akademi Manajemen Informatika dan Komputer Kosgoro (AMIK Kosgoro) dari Tahun 2014 sampai saat ini. Saya Yuvi Darmayunata yang lahir di Duri pada tanggal 13 April 1981. Saya adalah pertama dari 5 bersaudara. Saat ini saya mengajar disalah satu perguruan tinggi swasta di Riau. Saya mulai mengajar dan menjadi dosen sejak tahun 2017 hingga sekarang. Saya senang dengan ilmu yang berbasis tekonologi dan jaringan.
139 Darmawan Aditama atau biasa dipanggil dengan Awan. Lahir di Lamongan, 16 November 1990. Dengan berlatar belakang Pendidikan mulai dari S1 Teknik Informatika dan S2 Jaringan Cerdas Multimedia Bidang Keahlian Game Technology di Institut Teknologi Sepuluh Nopember (ITS). Merupakan salah satu penulis dari buku ini yang berfokus untuk memberikan pemahaman tentang bagaimana Navigation dan Routing dapat melakukan proses rute navigation pada instruksi yang diberikan kepada computer. Didik Siswanto.,M.Kom.MTA. Seorang tenaga pendidik di prody Teknik informatika fakultas Ilmu Komputer, Universitas Lancang Kuning. Pekanbaru – Riau, yang telah mendedikasikan dirinya di bidang akademik sejak tahun 2007 hingga saat ini, serta banyak melakukan penelitian-penelitian dan pengabdian kepada masyarakat, serta saat ini penulis juga aktif dalam karya tulisan jurnal international di penerbit paper terakreditasi. Rofi Abul Hasani.S.Kom., M.Eng adalah seorang dosen teknik informatika Universitas Muhammadiyah Magelang. Kelahiran yogyakarta, 31 Juli 1991 saat ini mengajar matakuliah dibidang mobile programming. email :[email protected]
140 Fitri Wibowo adalah seorang dosen di Politeknik Negeri Pontianak. Ia memperoleh gelar master double degree di bidang Teknik Elektro dari Universitas Indonesia dengan spesialisasi Multimedia dan Jaringan Informasi serta Université Bretagne-Sud, Perancis. Selain sertifikasi di bidang pemrograman mobile, ia juga memiliki sertifikasi di bidang Internet of Things, pemrograman Python, sistem administrasi Linux, hingga pengembangan aplikasi web. Sebagai prakti si di bidang pendidikan dan penelitian, ia ingin berbagi pengetahuan tentang teknologi terbaru kepada pembaca melalui tulisan ini. Ia berharap buku yang ditulisnya dapat bermanfaat bagi masyarakat luas. Suheri, S.T., M.Cs., lahir di Sintang pada tahun 1983, meraih gelar Sarjana pada Program Studi Te knik Informatika di Universitas Ahmad Dahlan (UAD) Yogyakarta pada tahun 2007, dan pada tahun 2017 mendapatkan gelar Master of Computer Science pada Program Studi Ilmu Komputer di Universitas Gadjah Mada (UGM) Yogyakarta. Sejak tahun 2009, Penulis meniti karir sebagai dosen di Program Studi Teknik Informatika, Jurusan Teknik Elektro, Politeknik Negeri Pontianak, dan berpengalaman mengampu mata kuliah Algoritma Pemrograman, Pemrograman Terstruktur (Pemrograman 1), Pemrograman Visual (Pemrograman 2), Pemrograman Berorientasi Objek (Pemrograman 3), Pemrograman Mobile (Pemrograman Aplikasi Bergerak/ Pemrograman 4). Sampai saat ini, penulis berspesialisasi pada bidang pemrograman, baik berbasis desktop,