PERANCANGAN APLIKASI
PERANCANGAN APLIKASI MOBILE Radinal Setyadinsa, S.Pd., M.T.I., Etza Nofarita, ST,M.Kom., Yuvi Darmayunata, ST., M.Kom., MTA., Darmawan Aditama, S.Kom., M.T., Didik Siswanto.,M.Kom.MTA., Rofi Abul Hasani. S.Kom., M.Eng., Fitri Wibowo, S.S.T., M.T., M.Sc., Suheri, S.T., M.Cs., Safri Adam, S.Kom., M.Kom., Ferry Faisal, SST., MT.
PERANCANGAN APLIKASI MOBILE Copyright© PT Penamudamedia, 2024 Penulis: Radinal Setyadinsa, S.Pd., M.T.I., Etza Nofarita, ST,M.Kom., Yuvi Darmayunata, ST., M.Kom., MTA., Darmawan Aditama, S.Kom., M.T., Didik Siswanto.,M.Kom.MTA., Rofi Abul Hasani. S.Kom., M.Eng., Fitri Wibowo, S.S.T., M.T., M.Sc., Suheri, S.T., M.Cs., Safri Adam, S.Kom., M.Kom., Ferry Faisal, SST., MT. Editor: Nanny Mayasari, S.Pd., M.Pd., CQMS. ISBN: 978-623-88884-7-4 Desain Sampul: Tim PT Penamuda Media Tata Letak: Enbookdesign Diterbitkan Oleh PT Penamuda Media Casa Sidoarium RT 03 Ngentak, Sidoarium Dodeam Sleman Yogyakarta HP/Whatsapp : +6285700592256 Email : [email protected] Web : www.penamuda.com Instagram : @penamudamedia Cetakan Pertama, Januari 2024 x+ 142, 15x23 cm Hak cipta dilindungi oleh undang-undang Dilarang memperbanyak sebagian atau seluruh isi buku tanpa izin Penerbit
v KATA PENGANTAR erancangan aplikasi mobile telah menjadi area yang semakin penting dalam dunia teknologi saat ini. Dengan semakin meningkatnya penggunaan smartphone dan tablet, aplikasi mobile telah menjadi bagian tak terpisahkan dalam kehidupan sehari-hari. Perancangan aplikasi mobile melibatkan proses kreatif dan strategis untuk menciptakan pengalaman pengguna yang baik dan fungsional. Dalam era yang penuh dengan persaingan, aplikasi yang dirancang dengan baik dapat menjadi pembeda yang kuat di pasar yang sibuk. Melalui pemikiran desain yang inovatif, perancangan aplikasi mobile dapat mengubah cara kita berkomunikasi, bekerja, berbelanja, dan menjalani kehidupan sehari-hari. Dengan antarmuka pengguna yang intuitif, desain visual yang menarik, dan fitur yang relevan, aplikasi mobile dapat memberikan solusi yang efisien dan menyenangkan bagi penggunanya. P
vi Dalam buku ini, kami akan membahas konsep, metodologi, dan prinsip-prinsip perancangan aplikasi mobile yang efektif. Kami akan menjelaskan langkah-langkah yang diperlukan dalam perancangan aplikasi mobile mulai dari pemahaman kebutuhan pengguna hingga implementasi desain yang akhir. Kami juga akan membahas tren terbaru dalam desain aplikasi mobile dan bagaimana membuat aplikasi yang responsif dan mudah digunakan di berbagai platform. Semoga buku ini menjadi sumber inspirasi dan panduan yang berguna bagi para perancang aplikasi mobile. Dengan pemahaman yang baik tentang perancangan aplikasi mobile, diharapkan kita dapat menciptakan aplikasi yang bermanfaat, menyenangkan, dan memberikan pengalaman pengguna yang luar biasa.
vii DAFTAR ISI KATA PENGANTAR................................................................ v DAFTAR ISI ........................................................................ vii Bab 1. Pemahaman Dasar tentang Mobile Aplikasi ..................... 1 A. Dasar-dasar Mobile Aplikasi .............................................1 B. Peran Mobile Aplikasi dalam Era Digital............................6 C. Klasifikasi Mobile Aplikasi ...............................................7 D. Arsitektur Dasar Mobile Aplikasi ......................................9 E. Peran Penting Desain User Interface (UI) ........................ 10 Bab 2. Perancangan dan Instalasi Flutter ................................ 11 A. Sejarah Flutter............................................................... 11 B. Instalasi Flutter ............................................................. 12 Bab 3. Memahami Widget dalam Fullter ................................. 24 A. Pengenalan ke Widget.................................................... 24 B. Hierarchy Widget .......................................................... 25 C. Widget Dasar................................................................. 25 D. Pembuatan Widget Kustom ............................................ 25
viii E. Animasi dengan Widget .................................................26 F. Hot Reload ....................................................................26 G. Pengujian Widget...........................................................27 Bab 4. Pemahaman Navigation dan Routing ............................ 28 A. Pengertian Navigation dan Routing .................................28 B. Definisi Navigasi............................................................30 C. Prinsip navigasi .............................................................31 D. Pengertian Routing ........................................................31 E. Jenis-jenis routing..........................................................32 F. Navigasi antar Routing ...................................................33 G. Mendefinisikan Parameter Rute......................................33 H. Implementasi Navigation dan Routing.............................34 I. Kesimpulan Router dan Navigator...................................43 Bab 5. Implementasi Name Route dalam Pengembangan Aplikasi Web Modern ........................................................... 45 A. Konsep Dasar Name Route .............................................46 B. Implementasi Name Route .............................................47 C. Metodologi Implementasi:..............................................47 D. Studi Kasus....................................................................48 E. Peningkatan Keterbacaan Kode.......................................48 F. Tantangan dan Solusi.....................................................49 G. Pelatihan dan Dokumentasi............................................50
ix Bab 6. Praktik Listview, Card, Stack dan Gridview .................... 51 Bab 7. Navigation Drawer dan Bottom Navigation Bar .............. 62 A. Navigation Drawer......................................................... 63 B. Bottom Navigation Bar ................................................... 71 Bab 8. Penggunaan PageStorage ............................................ 78 A. Pengenalan PageStorage ................................................ 82 B. Penggunaan PageStorage ............................................... 83 C. Implementasi Pada StatelessWidget ................................ 85 D. Implementasi Pada StatefulWidget.................................. 88 Bab 9. Form pada Flutter ...................................................... 99 A. TextField .................................................................... 100 B. Checkbox.................................................................... 102 C. Radio.......................................................................... 104 D. Membangun form dengan Validasi ............................... 107 E. Menambahkan TextFormField dengan logika validasi .... 110 F. Membuat tombol untuk validasi dan submit form .......... 110 G. Mengirimkan dan mengambil data dari FormField......... 112 Bab 10. Manajemen Layout .................................................. 117 A. Pengenalan Layout di Flutter........................................ 117 B. Struktur Layout dan Widget Tree .................................. 121 C. Tipe-Tipe Layout Widgets............................................. 122 D. Container dan Dasar Pengaturan Layout........................ 122 E. Layout Horizontal (Row) dan Vertikal (Column)............. 129
x DAFTAR PUSTAKA ............................................................. 133 TENTANG PENULIS ............................................................ 138
1 1. Definisi Mobile Aplikasi Aplikasi adalah suatu subkelas perangkat lunak komputer yang memanfaatkan kemampuan komputer langsung untuk melakukan suatu tugas yang diinginkan pengguna. Biasanya dibandingkan dengan perangkat lunak sistem yang mengintegrasikan berbagai kemampuan komputer, tapi tidak secara langsung menerapkan kemampuan tersebut untuk mengerjakan suatu tugas yang menguntungkan pengguna. Mobile dapat diartikan sebagai perpindahan yang mudah dari satu tempat ke Radinal Setyadinsa, S.Pd., M.T.I.
2 tempat yang lain, misalkan telepon Mobile berarti bahwa terminal telepon yang dapat berpindah dengan mudah dari satu tempat ke tempat lain tanpa terjadi pemutusan atau terputusnya komunikasi (Indonesia, 2021). Aplikasi Mobile adalah sebuah aplikasi yang memungkinkan Anda melakukan mobilitas dengan menggunakan perlengkapan seperti PDA, telepon seluler atau Handphone. Dengan menggunakan aplikasi Mobile, Anda dapat dengan mudah melakukan berbagai macam aktifitas mulai dari hiburan, berjualan, belajar, mengerjakan pekerjaan kantor, browsing dan lain sebagainya (Indonesia, 2021). Perbedaan dengan Aplikasi Desktop Aplikasi Mobile memiliki karakteristik unik yang membedakannya dari aplikasi desktop. Perbedaan utama mencakup antarmuka pengguna yang responsif dan dirancang khusus untuk layar kecil, penggunaan sensor perangkat, dan keterbatasan sumber daya (Hoober and Berkman, 2016). 2. Evolusi Mobile Aplikasi Sejarah Perkembangan (Permata, 2018) Pengembangan Aplikasi Mobile secara Exclusive dimulai saat diluncurkanya smartphone BlackBerry. Saat smartphone mulai berkembang, bisnis aplikasi Mobile juga ikut berkembang seperti beberapa aplikasi store App World yang diusung Blackberry, App Store yang diusung Apple, Play Store yang diusung Android dan Store yang diusung Windows.
3 Tahun 2011 Pada tahun 2011, permintaan pembuatan aplikasi Mobile terus meningkat. Mulai dari aplikasi office, PIM, multimedia. Satu lagi aplikasi yang saat ini lagi nge-trend adalah aplikasi yang menggabungkan teknologi web dengan teknologi Mobile. Seperti facebook, twitter, gmaps. Tahun 2013 a. Kuartal Pertama 2013 Trend pengembangan aplikasi Mobile lebih ke arah game seperti angry bird, where’s my water, temple run, flappy bird, dan masih banyak game-game menarik lainnya. IOS telah melebihi jumlah pengeluaran yang terjadi di dalam game mereka dibanding dengan gamegame yang dioptimasi untuk handheld. b. Kuartal Kedua 2013 Pada kuartal kedua ini, giliran google play yang telah membalap game-game handheld tersebut. Google play mampu menyaingi dan merebut perhatian serta pasar game handheld yang diusung IOS. c. Kuartal Ketiga 2013 Pada kuartal terakhir ini, gabungan antara google play dan iOS telah melampaui game-game yang telah dioptimasi untuk handheld hingga 3x lipatnya. Selain game, tahun 2013 merupakan era invasi aplikasi bertukar pesan besar-besaran. Selain nama besar yang sudah kita kenal yakni Whatsapp dan Skype, muncul pemain baru yang berhasil merombak peta komunikasi di Indonesia yakni Line, KakaoTalk, dan WeChat. Mereka tidak hanya muncul sebagai aplikasi bertukar pesan, tapi banyak yang sudah berevolusi menjadi sebuah platform dan
4 mereka berhasil meng-generate revenue besar dari sana. Dua aplikasi yang paling booming di 2013 adalah Vine dan Snapchat. Tak hanya itu, aplikasi editing untuk social media berbasis foto dan video juga menjadi sangat viral di 2013 ini. Salah satu yang paling ramai digunakan adalah Camera360. Tahun 2016 Pada tahun 2016 aplikasi Mobile yang lagi nge-trend yaitu aplikasi yang menerapkan fitur virtual reality (VR) dan augmented reality (AR) seperti aplikasi cardboard, Vrse, Fulldive VR dan VaR’s VR Video Player. Tak hanya itu, Layanan Berbasis Lokasi (LBS – Location Based Services) meningkat hingga 38%. Namun, masih ada peluang besar dalam indoor mapping, navigation services, location-based payments, safety, security dan masih banyak lagi. Tahun 2016 juga marak aplikasi kesehatan. Tak hanya itu, Layanan Berbasis Lokasi (LBS – Location Based Services) meningkat hingga 38%. Namun, masih ada peluang besar dalam indoor mapping, navigation services, location-based payments, safety, security dan masih banyak lagi. Tahun 2016 juga marak aplikasi kesehatan. Tahun 2017 Ditahun 2017, masyarakat lebih suka membagi data personal pada era perkembangan internet yang pesat. Trend aplikasi Mobile yang muncul lebih ke arah marketing sepeti aplikasi berbasis teknologi GPS dan real time, aplikasi big data, dan aplikasi yang menyasar segmen atau pasar tertentu (niche market), contohnya di
5 Indonesia seperti Gojek, Tokopedia, Lazada, dll. Aplikasi tersebut mampu menarik minat masyarakat sebab dinilai bermanfaat dan dapat membantu memenuhi kebutuhan dan meringankan pekerjaan masyarakat. Tahun 2018 Meningkatnya perkembangan internet telah membawa ke tahap dimana kita mengalami per-kembangan aplikasi pada smartphone yang terus meningkat. Teknologi apapun tidak dapat bertahan tanpa perkembangan yang terus – menerus terjadi. Beberapa perkembangan android yang berpengaruh dari segi aplikasi antara lain : Wearable Device (Perangkat yang bisa dipakai dibagian tubuh manusia yang berhubungan dengan operasi komputer dan teknologi yang canggih dengan memperhatikan estetika dan fungsi yang bermanfaat dalam kehidupan sehari–hari. Teknologi ini menggunakan prinsip Wearable technology yang bisa dipakai dan diimplementasikan pada kehidupan sehari–hari), Teknologi Beacon (Alat sensor yang menggunakan teknologi seperti bluetooth sebagai komunikasi nya. Awalnya teknologi ini tersedia untuk perangkat IOS saja akan tetapi saat ini Teknologi Beacon sudah banyak dibuat oleh perusahaan-perusahaan pengembang Android), Augmented Reality dan Virtual Reality (Teknologi ini telah menjadi teknologi landasan yang digunakan untuk saat ini. Teknologi yang memungkinkan seseorang merasakan situasi seperti kehidupan nyata melalui indera pendengaran dan juga indera penglihatan mereka. Teknologi ini juga banyak digunakan untuk pada bidang-bidang seperti industri film, hiburan, simulator penerbangan dan lain sebagainya), Instant Apps (Sebuah
6 aplikasi yang dapat digunakan tanpa harus melakukan instalasi terlebih dahulu pada perangkat android. Dengan aplikasi ini pengguna hanya perlu mendonwload satu aplikasi dengan banyak fitur dan kegunaan didalamnya), In App Payment (Sebuah pengembangan android yang digunakan untuk melakukan pembayaran online dengan dilengkapi oleh keamanan yang bisa langsung digunakan pada perangkat android, kebanyakan ini digunakan pada saat melakukan e-commerce). 3. Keunggulan dan Keterbatasan Mobile Aplikasi a. Manfaat Penggunaan Mobile Aplikasi Mobile aplikasi memberikan manfaat seperti akses cepat, pengalaman pengguna yang lebih baik, dan pemanfaatan fitur perangkat seperti GPS dan kamera untuk fungsi yang lebih kreatif (Brown, 2019). b. Tantangan dan Batasan yang Mungkin Muncul Tantangan pengembangan meliputi keberagaman platform, kebutuhan pembaruan reguler, dan pemenuhan standar keamanan. Sementara itu, batasan mungkin melibatkan keterbatasan perangkat keras dan sumber daya (Rogers, Sharp and Preece, 2011). 1. Transformasi Digital dan Mobile Aplikasi a. Kontribusi Mobile Aplikasi dalam Transformasi Bisnis Mobile aplikasi memiliki peran krusial dalam transformasi digital bisnis. Mereka memungkinkan perusahaan untuk mencapai efisiensi operasional, memperluas jangkauan pasar, dan meningkatkan
7 interaksi dengan pelanggan melalui solusi yang inovatif (Westerman, Bonnet and McAfee, 2014). b. Dampak pada Interaksi Pengguna Dengan adopsi Mobile aplikasi, interaksi antara perusahaan dan pelanggan menjadi lebih langsung dan personal. Faktor-faktor seperti notifikasi push dan desain antarmuka yang responsif memainkan peran penting dalam meningkatkan pengalaman pengguna (Norman, 2013). 2. Tren Penggunaan Mobile Aplikasi a. Statistik Penggunaan Aplikasi Statistik penggunaan aplikasi mencakup informasi tentang jumlah unduhan, waktu penggunaan rata-rata, dan preferensi platform. Analisis data ini membantu pemangku kepentingan untuk memahami tren pasar dan merancang strategi pemasaran yang efektif (App Annie, 2022). b. Perilaku Pengguna Terkait Aplikasi Pemahaman perilaku pengguna terkait aplikasi melibatkan analisis preferensi, kebiasaan pengguna, dan tanggapan terhadap fitur tertentu. Hal ini penting untuk merancang aplikasi yang dapat memenuhi harapan pengguna (Fogg, 2003). 1. Berdasarkan Platform a. Aplikasi Android Aplikasi Android dirancang khusus untuk sistem operasi Android. Platform ini memiliki karakteristik tertentu, seperti penyesuaian yang lebih besar dan
8 keberagaman perangkat (Conder, Darcey and Bailey, 2015). b. Aplikasi iOS Aplikasi iOS ditujukan untuk perangkat Apple, seperti iPhone dan iPad. Pengembangan aplikasi iOS memanfaatkan lingkungan pengembangan Xcode dan bahasa pemrograman Swift (Conway and Hillegass, 2018). 2. Berdasarkan Fungsionalitas a. Aplikasi Produktivitas Aplikasi produktivitas dirancang untuk membantu pengguna dalam menyelesaikan tugas sehari-hari, seperti pengelolaan jadwal, perencanaan proyek, dan kolaborasi tim (Allen, 2015). b. Aplikasi Hiburan Aplikasi hiburan bertujuan memberikan pengalaman yang menyenangkan, mulai dari permainan hingga konten multimedia. Mereka sering memanfaatkan fitur-fitur seperti audio, video, dan grafis (Juul, 2011). 3. Berdasarkan Model Distribusi a. Aplikasi Gratis dengan Iklan Model distribusi ini memungkinkan pengguna untuk mengunduh aplikasi secara gratis, namun didukung oleh iklan. Pendapatan diperoleh melalui tayangan iklan atau pembelian dalam aplikasi (Chakravorti, 2017). b. Aplikasi Berbayar Aplikasi berbayar mensyaratkan pengguna untuk membayar sejumlah tertentu sebelum mengunduh atau menggunakan aplikasi. Pendapatan utama berasal dari penjualan langsung (Ritchie, 2018).
9 1. Komponen Utama a. Antarmuka Pengguna (UI) Antarmuka pengguna (UI) mencakup elemenelemen visual dan interaktif aplikasi yang memungkinkan pengguna berinteraksi dengan perangkat lunak (McFarland, 2017). b. Logika Bisnis Logika bisnis mencakup pemrosesan data dan keputusan yang diambil oleh aplikasi. Ini mencakup algoritma, aturan bisnis, dan pengolahan informasi (Sommerville, 2011). c. Penyimpanan Data Komponen ini mencakup penyimpanan dan pengelolaan data, baik secara lokal pada perangkat atau melalui koneksi ke server (Owens and Spector, 2012). 2. Model Pengembangan a. Native Pengembangan native melibatkan penggunaan bahasa pemrograman yang spesifik untuk platform tertentu (Swift untuk iOS, Java/Kotlin untuk Android) (Deitel, Deitel and Deitel, 2019). b. Hybrid Model pengembangan hybrid memungkinkan penggunaan teknologi web (HTML, CSS, JavaScript) untuk membuat aplikasi yang dapat dijalankan di berbagai platform (Mead, 2017).
10 c. Web-Based Pengembangan web-based menempatkan aplikasi di server dan diakses melalui browser. Ini memungkinkan akses lintas platform tanpa perlu instalasi di perangkat pengguna (McFarland, 2011). 1. Prinsip-prinsip Desain UI untuk Aplikasi Mobile a. Responsif Responsivitas antarmuka pengguna memastikan bahwa aplikasi merespons perubahan ukuran layar dan orientasi perangkat (Tondreau, 2019b). b. Navigasi Intuitif Navigasi yang intuitif memudahkan pengguna dalam menjelajahi aplikasi dan menemukan fitur yang diinginkan dengan cepat (Cooper, Reimann and Cronin, 2007). c. Konsistensi Visual Konsistensi visual memastikan bahwa elemenelemen desain seperti warna, ikon, dan layout tetap seragam di seluruh aplikasi (Tondreau, 2019a).
11 Flutter adalah sebuah pengembangan aplikasi perangkat lunak yang dibuat oleh Google yang dapat digunakan dalam pengembangan aplikasi Android, IOS, Web, Windows, Mac, Linux. Dimana dengan hanya menggunakan sebuah basis kode dan pemakaian bahasa pemrograman yang sama yaitu Dart. Maksud dan tujuan Google untuk merancang Flutter adalah untuk mempercepat dan memudahkan proses dalam pengembangan aplikasi yang berkinerja tinggi untuk di setiap platform yang berbeda-beda. Flutter merupakan sebuah produk Google yang masih baru, yang dipublikasikan pada bulan Mei 2017. Etza Nofarita, ST,M.Kom.
12 1. Instalasi Flutter SDK Flutter adalah sebuah pengembangan peranjat lunak uang digunakan untuk pengembangan aplikasi IOS, Android yang dirilis oleh Google pada bulan Mei 2017 yang dirancang untuk memberikan sebuah kemudahan kepada para programer mobile untuk membangun sebuah aplikasi mobile yang multi platform. Untuk mengunduh versi terbaru melalui halaman resmi flutter yaitu https//flutter.dev/docs/getstarted/install Berikut tahap-tahap dalam penginstalan Flutter sebagai berikut : a. Flutter zip di ekstrak ke folder yang anda inginkan, misalnya folder C. b. Ambil langkah setup environment
13 c. Pilih environment variables d. Pilih Path, pada User Variables dan klik tombol Edit e. Kemudian klik browse dan cari folder bin di folder instalasi flutter, klik OK f. Kemudian buka CMD ( command prompt), ketik fultter doctor untuk melihat status pemasangan flutter sdk
14 Langkah berikutnya memasang android studio 2. Instalasi Android Studio Dapat mengunduh melalui halaman yaitu : https://developer.android.com/studio Tahap-tahap proses instal android studio yaitu : a. Setelah pengunduhan selesai, tampilan pertama dalam proses instal android studio sebagai berikut, klik tombol Next
15 b. Lakukan pilihan tujuan penginstalan, apabila tetap menggunakan tujuan default klik tombol Next c. Klik tombol Install kemudian tunggu sampai proses penginstalan selesai.
16 d. Apabila sudai selesai proses penginstalannya, jalankan android studio e. Kemudian Klik tombol next sehingga akan tampil opsi SDK Components Setup
17 3. Instalasi Visual Studio Code Visual Studio Code adalah sebuah aplikasi kode editor buatan microsoft yang bisa dijalankan pada semua perangkat desktop secara gratis. Pengunduhan dapat dilakukan pada halaman : https://code.visualstudio.com/downloadd Tahapan proses penginstalan Visual Studio Code sebagai berikut : a. Pada tampilan utama pada instalasi, klik tombol Next. b. Kemudian Pilih I accept the agreement, klik tombol Next.
18 c. Kemudian pilih folder pemasangan visual code, apabila menggunakan folder default, klik Next d. Langkah terakhir, klik tombol instal.
19 e. Apabila sudah selesai ,buka aplikasi visual studio code, pilih tab File > Preferences Extensions. Kemudian Ketik Flutter di kolom pencarian dan klik tombol Install pada extensions flutter. f. Apabila sudah selesai pemasangan extensions flutter , kembali ke CMD (command prompt) dan ketik flutter doctor 4. Instalasi Xampp Xampp adalah perangkat lunak atau aplikasi komputer yang banyak digunakan dalam dunia web. Tahapan proses instalasi xampp : a. 1, Lakukan kilk dua pada installer xampp. b. Klik tombol Next pada tampilan utama pemasangan
20 c. Pada halaman opsi pemilihan komponen pemasangan, klik tombol Next d. Pada direktori pemasangan xampp dan klik tombol Next
21 e. Tunggu sampai proses pemasangan selesai f. Jika prosesnya sudah selesai, klik tombol finish untuk menjalankan xampp g. Klik mulai pada Apache dam Mysql
22 5. Instalasi GIT GIT adalah jenis perangkat lunak atau alat kolaborasi coding yang sering digunakan oleh para programer karena sifatnya yang sangat fleksibel dan mudah digunakan. Untuk pengunduhan dapat dilakukan di halaman https//git-scm.com/downloads Tahapan proses instalasi GIT : a. Lakukan klik dua pada installer git. b. Pada tampilan halam utama, klik tombol next c. Pada pemilihan opsi default editor yang digunakan git, klik tombol Next
23 d. Klik tombol next e. Klik tombol install f. Tunggu sampai proses instal selesai, jika sudah selesai, klik tombol Finish
24 lutter, sebagai framework pengembangan aplikasi mobile, memiliki pendekatan yang unik dalam membangun antarmuka pengguna melalui penggunaan widget. Widget adalah elemen-elemen dasar yang membentuk tampilan dan fungsionalitas dalam aplikasi Flutter. Widget adalah komponen utama dalam kerangka Flutter. Mereka mencakup segala sesuatu mulai dari teks, gambar, hingga tata letak dan elemen interaktif.Widget F Yuvi Darmayunata, ST., M.Kom.
25 dalam Flutter dapat dibagi menjadi dua jenis: StatelessWidget dan StatefulWidget. StatelessWidget adalah widget statis yang tidak berubah sepanjang siklus hidupnya, sedangkan StatefulWidget dapat mengalami perubahan dan memperbarui tampilan sesuai dengan perubahan keadaan. B. Pengembangan aplikasi Flutter melibatkan hirarki widget yang kompleks. Widget dapat diletakkan dalam struktur pohon di mana satu widget dapat menjadi anak dari widget lainnya. Ini memungkinkan pembentukan tata letak dan hierarki yang kaya dalam aplikasi.Struktur hierarki ini menentukan tata letak dan hubungan antar elemen UI Beberapa widget dasar yang sering digunakan melibatkan `Container` untuk m pengatur tata letak yang dapat berisi widget lain dan dapat dikonfigurasi dengan properti seperti warna, margin, dan padding, `Row` dan `Column` untuk penyusunan elemen Mengatur widget secara horizontal (Row) atau vertikal (Column), serta widget khusus seperti `ListView` untuk menangani daftar bergulir. Pemahaman mendalam tentang penggunaan widget ini sangat penting dalam mengembangkan aplikasi yang responsif dan menarik. Selain widget bawaan, Flutter memungkinkan pengembang membuat widget kustom. Dengan menggunakan konsep pewarisan dan komposisi, pengembang dapat menciptakan widget yang sesuai dengan kebutuhan aplikasi mereka, meningkatkan fleksibilitas dan modularitas.Dalam lingkup pengembangan Flutter, proses pembuatan widget kustom menjadi suatu aspek yang tak terelakkan. Jauh melampaui
26 ketersediaan widget bawaan, Flutter memberikan keleluasaan bagi pengembang untuk merancang dan menerapkan widget sesuai dengan kebutuhan unik aplikasi yang mereka garap.Dengan merangkul konsep pewarisan dan komposisi, pengembang dapat mengeksplorasi kemungkinan tanpa batas dalam menciptakan widget yang bersifat sangat spesifik dan terkustomisasi. Dengan mendefinisikan struktur pewarisan yang tepat, pengembang dapat memastikan bahwa widget yang dibuat tidak hanya memenuhi kebutuhan fungsional, tetapi juga terintegrasi secara mulus dengan tata letak dan elemen UI lainnya. Flutter, sebagai kerangka kerja UI yang kuat, menyediakan widget-widget yang memungkinkan pengembang untuk menciptakan animasi yang dinamis dan menarik.Flutter menyediakan dukungan yang kuat untuk animasi melalui widget.Penggunaan widget seperti `AnimatedContainer` atau `AnimatedBuilder` Widget ini membuka peluang untuk mengubah properti-widget, seperti warna, ukuran, atau kejelasan, dengan animasi halus. Hot Reload adalah salah satu fitur unggulan dalam pengembangan aplikasi Flutter yang mempercepat proses iterasi pengembangan tanpa memerlukan restart aplikasi. Saat pengembang membuat perubahan pada kode sumber aplikasi, Hot Reload memungkinkan perubahan tersebut langsung terlihat pada aplikasi yang berjalan, tanpa perlu menutup dan membuka kembali aplikasi.Proses ini memungkinkan pengembang untuk dengan cepat melihat efek dari perubahan kode tanpa kehilangan konteks aplikasi.
27 Ini berarti pengembang dapat melakukan eksperimen dengan UI, menyesuaikan logika bisnis, atau merancang animasi, dan melihat hasilnya secara instan. Pengujian widget adalah komponen integral dalam siklus pengembangan perangkat lunak yang bertujuan untuk memastikan bahwa widget yang dibangun di dalam aplikasi Flutter berfungsi sebagaimana mestinya. Dengan menggunakan berbagai tes, pengembang dapat mengevaluasi fungsionalitas, tata letak, dan responsivitas widget untuk memastikan bahwa aplikasi berjalan dengan baik. Dengan menggunakan widget testing, pengembang dapat memastikan bahwa widget berperilaku sesuai harapan dan mengidentifikasi masalah sebelum mencapai produksi.Dengan pemahaman mendalam tentang widget dalam Flutter, pengembang dapat membangun aplikasi mobile yang efisien, dinamis, dan mudah dipelihara. Kesederhanaan dalam konsep widget bersama dengan kekuatan ekosistem Flutter membuatnya menjadi pilihan yang menarik untuk pengembangan aplikasi cross-platform modern.
28 Navigation dan Routing merupakan konsep inti dalam pengembangan Aplikasi Mobile, yang memungkinkan para pengguna untuk berpindah halaman yang berbeda. Dan yang sudah kita ketahui seluruh aplikasi memiliki beberapa halaman untuk menampilkan jenis informasi. Misalnya, sebuah aplikasi dapat memiliki layar yang berisi berbagai produk. Ketika pengguna mengklik produk itu, segera akan muncul informasi rinci tentang produk itu. Di Flutter, layar dan halaman dikenal sebagai rute, dan rute Darmawan Aditama
29 ini hanyalah sebuah widget. Di Android, rute mirip dengan Activity, sedangkan di iOS setara dengan ViewController. Navigation dan routing memiliki fungsi untuk menentukan bagaimana alur atau mekanisme peralihan dari suatu screen ke screen lainnya. Misalnya dari splash screen ke halaman login, dari halaman login ke home page, dst. Gambar 1. Navigation dan routing Di aplikasi seluler apa pun, menavigasi ke halaman yang berbeda menentukan alur kerja aplikasi, dan cara menangani navigasi dikenal sebagai routing. Flutter menyediakan kelas routing dasar MaterialPageRoute dan dua metode Navigator.push() dan Navigator.pop() yang menunjukkan cara menavigasi di antara dua rute. Langkah-langkah berikut diperlukan untuk memulai Navigation and Routing Flutter untuk aplikasi. 1. Langkah 1: Pertama, perlu membuat dua rute. 2. Langkah 2: Kemudian, navigasikan ke satu rute dari rute lain dengan menggunakan metode Navigator.push(). 3. Langkah 3: Terakhir, navigasikan ke rute pertama dengan menggunakan metode Navigator.pop().
30 Navigasi adalah interaksi yang memungkinkan pengguna melihat-lihat, masuk, dan keluar dari berbagai konten dalam aplikasi. Komponen Navigasi Android Jetpack membantu menerapkan navigasi, mulai dari klik tombol sederhana hingga pola yang lebih kompleks, seperti bilah aplikasi dan panel samping navigasi. Komponen Navigasi juga memastikan pengalaman pengguna yang konsisten dan dapat diprediksi dengan mendasarkan pada serangkaian prinsip-prinsip yang telah ditetapkan. Komponen Navigasi terdiri dari tiga bagian utama yang dijelaskan di bawah: 1. Grafik navigasi: Sumber daya XML yang berisi semua informasi terkait navigasi di satu lokasi terpusat. Ini mencakup semua area konten individual dalam aplikasi , yang disebut tujuan, serta jalur yang mungkin dilalui oleh pengguna pada aplikasi. 2. NavHost: Container kosong yang menampilkan tujuan dari grafik navigasi. Komponen Navigasi berisi implementtasi NavHost default, NavHostFragment, yang menampilkan tujuan fragmen. 3. NavController: Objek yang mengelola navigasi aplikasi dalam sebuah NavHost. NavController mengatur pertukaran konten tujuan di NavHost saat pengguna menggunakan aplikasi. Saat bernavigasi dalam aplikasi, memberi tahu NavController bahwa ingin membuka di sepanjang jalur tertentu di grafik navigasi atau langsung ke tujuan tertentu. NavController kemudian menunjukkan tujuan yang sesuai dalam NavHost.
31 Komponen Navigasi memberikan sejumlah manfaat lain, termasuk yang berikut: 1. Menangani transaksi fragmen. 2. Menangani dan Kembali bertindak dengan benar secara default. 3. Menyediakan sumber daya terstandarisasi untuk animasi dan transisi. 4. Menerapkan dan menangani deep link. 5. Termasuk pola Navigasi UI, seperti bilah samping navigasi dan navigasi bawah, dengan pekerjaan tambahan minimal. 6. Safe Args - plugin Gradle yang memberikan keamanan jenis saat menavigasi dan mengirimkan data antar tujuan. 7. Mendukung ViewModel - dapat mengatur ViewModel ke grafik navigasi untuk berbagi data terkait UI antar tujuan grafik. Navigasi antara berbagai layar dan aplikasi merupakan bagian penting dari pengalaman pengguna. Prinsip berikut menetapkan dasar pengukuran untuk pengalaman pengguna yang konsisten dan intuitif di seluruh aplikasi. Komponen navigasi didesain untuk menerapkan prinsip-prinsip ini secara default, yang memastikan pengguna dapat menerapkan heuristik dan pola yang sama dalam navigasi saat berpindah antar-aplikasi. Routing adalah proses pengiriman data maupun informasi dengan meneruskan paket data yang dikirim dari jaringan satu ke jaringan lainnya. Routing juga dapat berarti
32 proses memindahkan suatu paket data dari host pengirim ke host tujuan, di mana kedua host tersebut tidak berada dalam satu network yang sama. Tugas routing akan dilakukan device jaringan yang disebut sebagai Router, yakni perangkat yang digunakan sebagai penghubung paket data antara dua segmen jaringan atau lebih. Routing bertanggung jawab membawa data melewati sekumpulan jaringan dengan cara memilih jalur terbaik untuk dilewati data. Informasi dalam routing memuat tujuan kemana sebuah paket data akan dikirimkan, serta informasi terkait jalur terbaik yang akan ditempuh. Informasi tersebut akan disimpan oleh router pada suatu sistem yakni tabel routing (table routing). Berdasarkan pengiriman paket datanya, ada dua jenis routing yaitu direct routing dan indirect routing. 1. Direct routing Direct routing adalah routing langsung yang mengirimkan paket dari satu jaringan ke jaringan lain secara langsung atau dalam arti lain host berada pada jaringan fisik yang sama sehingga tidak perlu melalui mesin lain atau gateway. Jika suatu host mengirimkan data ke host lain dalam satu jaringan yang sama, maka data tersebut dikirimkan langsung ketujuan dengan mengenkapsulasi IP (internet protocol) datagram pada layer physical. 2. Indirect routing Indirect routing adalah routing tidak langsung yang mengirimkan paket dari suatu jaringan ke jaringan lain yang tidak terhubung langsung atau berbeda jaringan sehingga paket akan melewati satu atau lebih gateway atau network
33 yang lain sebelum sampai ke tujuan. Jika suatu host mengirimkan data ke host lain yang berada pada jaringan yang berbeda, maka dibutuhkan satu IP address yang digunakan sebagai gateway. Peralihan antara rute atau tampilan dapat dimulai dengan dua cara: secara terprogram menggunakan metode UI.navigate(); atau dengan menggunakan tautan. Metode navigasi() lebih gesit bagi pemrogram Java, karena perubahan tampilan dapat dilakukan dari mana saja dalam kode dan dapat berinteraksi dengan tampilan target. Namun, menggunakan tautan adalah cara web asli untuk berpindah dari satu tampilan ke tampilan lainnya, misalnya memungkinkan berbagi tautan langsung ke tampilan tertentu dengan rekan kerja, dan tautan tersebut berfungsi meskipun sesi telah berakhir. Target rute (yaitu tampilan) yang menerima parameter rute yang diteruskan melalui URL harus: 1. mengimplementasikan antarmuka HasUrlParameter<T>, 2. tentukan jenis parameter menggunakan obat generik. HasUrlParameter mendefinisikan metode setParameter() yang dipanggil oleh Router, berdasarkan nilai yang diekstraksi dari URL. Metode ini selalu dipanggil sebelum target navigasi diaktifkan (sebelum event BeforeEnter). Contoh: Mendefinisikan target navigasi yang mengambil parameter string dan menghasilkan string ucapan darinya, yang kemudian ditetapkan oleh target sebagai konten teksnya sendiri pada navigasi:
34 Saat permulaan, target navigasi secara otomatis dikonfigurasikan untuk setiap greet/<anything>, kecuali jika target navigasi terpisah dengan @Route yang tepat dikonfigurasikan untuk mencocokkan greet/<some specific path>. Perlu diperhatikan bahwa target navigasi yang tepat selalu diutamakan daripada parameter rute saat menyelesaikan URL. Konsep navigasi pada Flutter sama dengan pemrograman Android, yakni bahwa ketika berpindah screen/activity akan menjadi tumpukan (stack). Jadi ketika berpindah dari satu screen ke screen lain (push), maka screen pertama akan ditumpuk oleh screen kedua. Kemudian apabila kembali dari screen kedua ke pertama, maka screen kedua akan dihapus (pop).
35 Gambar 2. Navigation kedua ke pertama, maka screen kedua akan dihapus (pop) Dan kita akan mencoba untuk membuatnya. Kita cukup menyiapkan 2 buah halaman yang kita taruh pada folder lib. Halaman yang sudah diberi nama home_page.dart dan detail_page.dart. Berikut adalah contoh kode halaman pertama / home_page.dart
36 Berikut contoh kode halaman pertama / home_page.dart,
37 Lalu kita bisa menavigasikkan kedua screen ini menggunakan Navigator.push dan Navigator.pop 1. Navigator.push Method Navigator.push bisa kita gunakan untuk berpindah screen kedua / detail.page, Berikut contoh kode Navigator.push Di sini, metode push() menambahkan halaman/rute pada tumpukan dan kemudian mengelolanya dengan menggunakan Navigator. Kita menggunakan kelas MaterialPageRoute yang memungkinkan transisi antara
38 rute menggunakan animasi khusus platform. Berikut penggunaan method Navigator.push pada button Elevated Button
39 2. Navigator.pop Method Navigator.pop bisa kita gunakan untuk kembali ke screen sebelumnya / home.page Berikut contoh kode Navigator.pop Pada Navigator.pop kita hanya cukup menambahkan parameter context yang merupakan variabel dari method build. Berikut penggunaan method Navigator.pop pada button Elevated Button c
40 Dan aplikasi bisa di jalankan dan cobalan untuk menekan tombol di halaman home.page bila halaman berubah menjadi detail.page dan di halaman detail page bila ditekan akan berpindah menjadi ke halaman sebelumnya / halaman home.page berarti pembelajaran kita untuk method Navigator.push dan Navigator.pop telah selesai 3. Route Navigation Sebelumnya kita telah membahas method Navigator.push dan kali ini kita akan mulai membahas Route Navigation. Fungsinya sama seperti method Navigator.push dan yang bisa membuat halaman menjadi berpindah ke halaman yang diingankan. Namun Apa yang membedakan Route Navigation dan method Navigator.push dan Navigator.pop Misalya kita mengembangkan aplikasi yang sangat besar dan komplex yang memilikii banyak halaman yang berisikan berbagai produk. dan sangat merepotkan bila kita menggunakan Navigator.push maka dari itu flutter menyediakan Route Navigation untuk memudahkan para Pengembang untuk menentukan alur Halaman yang dituju.