Aplikasi Mobile dengan Flutter Menyiapkan perangkat Install Git Buka laman httos://eit-scm.com/downloads, kemudian klik tombo! download © git ce rmaingontin ce Deemmenten Downloads = Breese AE ntee com BD mee rcs egos Giomwrecaayeatm — Tocaienteancnaswtr ere Ses aes Kemudian lakukan installasi git dari file yang telah diunduh: Install JDK JDK (Java Development Kit) adalah sebuah perangkat lunek yang digunakan untuk melakukan proses kompilasi dari kode java ke bytecode yang dapat dimengerti dan dapat dijalankan oleh JRE (Java Runtime Envirotment). JDK wajib terinstall pade komputer yang akan melakukan prases pemibuatan aplikasi berbasis java, namun tidak wajib terinstall di komputer ‘yang akan menjalankan aplikasi yang dibangun dengan java. JDK dapat diunduh pada laman httos://idk java net/ jdk.java.net Java Development Kit builds, from Oracle ‘Ready for use: JOK 15, JMC 7 Early access: JDK 17, JDK 26, JMC 8, Lanal, Loom, Metropolis, Panama, & Vaihalla Reference implementations: 2,867 va SE 25, 14, 13, 12, 11, 10,Pilih JDK 15, kemudian download file zip untuk windows, jika menggunakan windows Idk.java.net Fost, aries Bree Liaw ert JDK 15.0.2 General-Availability Release This page provises production-ready open-source builds of the Jove Develooment kot, version 15, an implementation af the ave SE 15 Paciorm uader the GNU General Publi License, version 2, wih the Classpath Exception ‘Commercial bullas of DK 15.0.2 from Oracle, under @ non-cpen-source license, en be found atthe Oracle Technology Network Documentation + Features 1 Release nates + APlJavacee ullas Unuximarenéa —eargze%) 170507266 bytes Unaxix6a ccs 195340587 mecosix6& (sie) 162087236 Kemudian buka Control Panel, pilih “System”news Beary Septet satin Somme Pee 8 Gas | Meus Bivins owes @ timc taboos Hains ine @ vainones mm PS rmrecrs Em — Sis: genres aera B reser erator ete sone ar ae also ——— seme wae Sp nore Kemudian pilih “Advanced System Setting” Contiol Pane! Home @ Device Manager ® Remote settings @ 5psem protection Kemudian klik tombol “Environtment Variables” System Pope | x Camper ne Hint Aéaree. Spon econ Rendle ‘Younus te kena hatte meno ttee get tomanes =a] ert Dede eget our | sown. Sap ant Reevey Speman. deca Homan == OC | [Goes | BB ih Path pada bagian Systern Variables kemudian Klik tombol “Edit” Bo GD orn Ty rete puny —— GE ttsEnvironment Variables 3g User vanables for Hen Vatiable Value JAA HOME [CAProgram FilesVava\jat- 11 MOZ.PLUGIN. PATH (CAProgiarn Files (<26) Foxit Software\Foxit Reader plugins\ OneDrive (CAUsers\Hendh OneDrive Path (CAUsersiHendnppData\LocehPrograms\Pythor\®ython39\ Script TEP (CAUsers\Hend?VAppData\Local\Temp Twp (CAUcers\Hendi AppData\Local\ emp ‘Spstem variables Yatiable Value . DeiveDate (CAWindowe\Systern3”\Drivers\DriveDate NUMBER.OF PROCESSORS 4 os Windows NT PATHEXT (COW; EXE. BAT, CMD.VBS, VBE. J5E.WSF WS MISC PROCESSORARCHITECTURE AMDEA PROCESSOR IDENTIFIER __intel64 Famil6 Mode! 60 Steooina 3. Genuinelntel mI OK. Caneel Kemudian klik tombol “New”Edit environment variable CCAWINDOWS\Systerr32\WindowsPowerShelhv1.0\ CAP ogiam Files\Dart\dart-sdl\bin CAProgram Files\Git\cma Alaragon\bin\php\php-74 T-nts-Win8?-veTS-x64 (CAPregramData\ComporerSetupibin (CAUsers\Hend\AppData\ Roaming\Pub\ Cache\bin CCAWINDOWS\Syste-r32\OpenSSH\ CAP rogiam Files\PUTT, CAProgiam Files (86)\Yerm\bin} ~\appData\Roarning}\Composes\wendort bin DA\Androia\flutter\bin CA\Pragram Files\ MongoD2\Server\4.2\bin D\Android\emaline-toolstocla\ bin DAAndroid\cmatine-tools\patforn-tools DAAndroichgredie\bin DAAndroidscrepy CAPragram Files\nede\ (CAUsers\Hend\AppData\Roaminginpr CAcygwin6t\bin CAP rogiam Files\Docker\Docke/\vesources\bin a Browse Delete Move Up Move Dawn Edit tet. Cancel Kemudian masukkan alamat folder bin pada jdk yang telah kita ekstrak dalam hal ini misalnya “C:\Program Files\Java\jdk-15.0.1\bin” 10Edit environment variable x [ AP rogram Files\ Gilera « New (CAlaragon\bin\php\php-7.4 7-nts-Wind2-ve15-x64 CAPragramData\ Comporersetupibin ES | CAUsers\Hend\AppData\Reaming\Pu\Cache\bin | cawinnows\systen32\OpenssH\ Browse | cAProgram Files\PuTM\, CAProgiem Files 86) Yern\bin Delete | ~\appDate\Rosming\ Compose’\vendor\bin DAAndroichflutter\bin {Pragram Files\MongoD8\Server\4.2.bin Move Up D\Android\emaline-toole\tocle bin DAAndroid\eméline-toole\platforn-teols Move Dawn | Diandroisgredie\bin DAAndroid\scrcpy C:\Program Files\nodejs\. Edit text. | cAUsers HendiAppDataRoaminginpm CAcygning bin CiProgam FleADeckehDocke\Veourcebin | crProgemDatlDeckeDeslop\vesiom bin [Koonin 501] a ox aaa Biasanya agar JDK dapat berfungsi perlu dilakukan restart laptop/komputer. Untuk memeriksa apakah installasi berhasil, buka command prompt kemudian ketikkan java -version atau javac -version BF incon Ponerhal et ee Runtine Environment (build 1.8.9_281-b09) x VA (build 25.281-b09, nixed m Install Android Studio ‘Android studio dapat diunduh pada laman https://developer.android.com/studio . Setelah lah diunduh tersebut, kemudian lakukan ins diunduh klik dua kali pada file yang lasi dengan mengikuti langkah-langkah yang telah disediakan uerrr \Welcome! This wizard wll et up your development environment for Android Studio, ‘Additionally, the wizard willhelp port existing Android apps into Android Studio lor create anew Android application project bOL) mf MEI care) rnin Kemudian pilih tipe standar dan klik next 12reer 7 ee Choose the type of setup you want for Android Studio: (© Standard ‘Android Studio willbe installed withthe most common settings and options. Recommended for most users. custom ‘You can customize installation settings and components installed Pilih thema tampilan kemudian klik next 13errr re] yA Soe Fs module beac @ Helowors Helloweidina eport javax- suing public class HetLaworis { public Heltowortd() < abe abe = new Label label setront new Font "serit= 5 fon Ceres SS +- mil [0 tine Breskpoints Kemudian klik tombol next 4rrr) Pay eer) Pastikan komputer terhubung dengan internet yang stabil, karena android studio akan mengunduh komponen-komponen yang diperlukan 15errr RR PrN Cet eRecauy ree Setelah selesai klik finish Install Flutter Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun antarmuka (user interface/UI) aplikasi Android dan iOS. ‘Apa bedanya membuat aplikasi android menggunakan Java/Kotlin (native) dengan Flutter. Dari bahasa pemrograman yang digunakan, Flutter menggunakan bahasa pemrograman Dart, sedangkan Android Native menggunakan bahasa pemrograman Java dan Kotlin. Aplikasi yang, kita buat dengan Flutter dapat di-build ke Android dan {0S, Sedangkan Android Native hanya bisa di-build ke Android saja. Untuk menginstall flutter, buka laman https:/flutter. dev/docs/get-started/install Kemudian pilih “Windows” 16& Futter = Install * ee ae yeep tattee a é 4 o eel cana Kemudian pilih flutter_windows_untuk mengunduh file flutter & Flutter Dect showcase Comminty QW =a “SD * | Get the Flutter SDK ee ‘Lome aug ae ne rs nse BaP — ESS] ros ownggeimuntc mona = ‘arngt clon etna oe futear ter gt 2 state o Kemudian ekstrak file zip flutter misalnya di "D:/Android” Clipbeara Organize [D> msec » Dam) > andoid Kemudian buka Control Panel, pilih “System” 7imap Benne AB Any plazteme dome Pie gee Biricte — ieewattiom— @ bsiamcoe Hains ine © cells Gomme in eet siete gy nowmsinan hwo B mse emdcgenteoe We samy harmon Sa Oe ——— ro Kemudian pilih “Advanced System Setting” ‘Contio! Panel Home @ Device Manager @ Remote setings System protection Kemudian klik tombol “Environtment Variables” of tae enpn SB ete ID recon oma poe A rape waranans some edt > wre Borat Ty rete Brn rosetis Beowy secrtecnon Gh ie 18System Properties x CompiterNane Hardware Advanced System Protection | Ramate Yu rust belogged on as en Adinisratorto meke mos ofthese changes. Peformance Vinual fects, procosoor echoduiing, memory ussge, and virtual monary Cae User Fries Desiton seins related your sian (Sara) Starup ard Recovery ‘System startup; orton aro, and debugging infomation OK Cancel Sealy Kemudian pilih pada “System Variables” pilih “Path” dan klik tombol “Edit” 19Environment Variables 3g User vanables for Hen Vatiable Value JAA HOME [CAProgram FilesVava\jat- 11 MOZ.PLUGIN. PATH (CAProgiarn Files (<26) Foxit Software\Foxit Reader plugins\ OneDrive (CAUsers\Hendh OneDrive Path (CAUsersiHendnppData\LocehPrograms\Pythor\®ython39\ Script TEP (CAUsers\Hend?VAppData\Local\Temp Twp (CAUcers\Hendi AppData\Local\ emp ‘Spstem variables Vatisble Value . DeiveDate (CAWindowe\Systern3”\Drivers\DriveDate NUMBER.OF PROCESSORS 4 os Windows NT PATHEXT (COW; EXE. BAT, CMD.VBS, VBE. J5E.WSF WS MISC PROCESSORARCHITECTURE AMDEA PROCESSOR IDENTIFIER __intel64 Famil6 Mode! 60 Steooina 3. Genuinelntel mI OK. cancel Kemudian klik tombol “New”Edit environment variable x (CAProgiamn Files (<80)\Common Files\Inteh Shared Files\cpp\bin\ CAProgramData\OracleVava\javapath Edt Program Files («86)\Common Fles\Oracle\lava\javepath CAWINDOWS\eyssem32 Browse, cAwindows CCAWINDOWS\Systern32\Wbern Delete CCAWINDOWS\Systern32\WindowsP owerShelv!.0\ CAProgram Files\Dar\dart-sck\ in CAProgram Files\Git\emd Move Up CAlaragon\bin\php\php-7.4.7-nte-Wind2-velS-x64 - CAPregramData\CompererSctup\bia Move Down (CAUsers\HenciVAppData\Roaring\Pub\Cache\bin CCAWINDOWS\Systern32\OpensS-h cAProgram Files\PUTT Edit tot CAProgram Files (<86)\Varmibirh = \AppData\ Roaming Composerivendenbin DAAndroiefuttei\bin CA\Pregram Files\MongeDB\Servei\4.2\bin DAAndroid\cmatine-tcols\tool\bin Kemudian masukkan alamat folder bin pada flutter yang telah kita ekstrak dalam hal ini misalnya “D:\Android\flutter\bin” 2Est envircrment variable [CAprogmmFle\Dendatsddbin A ExepainHieGrend CArmpainDnanc ieee Aisea ys ae ace ey EES AWADHI Satta em ARE FAST \Pogom Fes abi gr Sed eg ent CaPagem Reso auch OK Konfigurasi Android Studio dengan Flutter Move Up Move Down Edited. Cancel Jalankan Android Studio kemudian pada menu “Configure” pilih “Plugins” 2Setelah selesai, restart/tutup Android Studio fembuat dan menjalankan projek Jalankan Android Studio kemnudian pilih “Create New Flutter Project” 2Btudio Kemudian tentukan Project Name : belajarflutter 4Flutter SDK path : D:\Android\flutter (masukkan sesuai alamat folder flutter diletakkan) Project location : D:\Belajar (bebas memasukkan dimanapun} Description : Membuat Aplikasi Mobile Flutter (bebas) Kemudian klik tombo! “Next” Flutter Application Cees et Kemudian klik tombol “Finish”. Pastikan perangkat terhubung ke internet, karena diperiukan untuk mengunduh projek yang dibuat 28© New Flutter Application eer Setelah selesai akan muncul projek yang telah dibuat Untuk menjalankan projek, kita memerlukan emulator android. Pertama kita akan membuat emulator android dengan cara klik “AVD Manager” pada pojok kiri atas 26Kemudian klik tombol “Create Virtual Device” Pilih salah satu device yang dinginkan, misalnya “Nexus S” kemudian klik tombol “Next” Cee 27Kemudian kita akan memilih Versi Sistem Operasi Android, dalam hal ini misalnya “Q",jika belum ada maka kita akan diminta untuk mengunduh terlebih dahulu, Setelah itu klik Finish Untuk Menjalankan Emulator, klik logo play 28Or bel a Kemudian akan muncul emulator android seperti berikut: oe 29Jika emulator sudah berjalan, kita dapat mengeksekusi projek dengan cara klk toribol play (berwarna hijau) pada Android Studio Pada emulator akan tampil hasil projek seperti berikut atc tee ‘You have pushed the baton tis many tenes 0 Membuat dan menjalankan projek dengan VSCode dan Handphone Android Install VSCode sebagai alternatif editor Unduh VSCode pada laman https://code.visualstudio.com/download kermudian install. Agar flutter dapat digunakan pada VSCode, perlu diinstall beberapa extension flutter yang dibutuhkan. 30I File Edit Selection View Go Debug Tasks Help es pm Pieter a ay Cae ee een ecg eee en Prete aed ere ere a port ey Setelah itu restart/tutup VSCode Membuat projek flutter dengan VSCode Jalankan VSCade, pada menubar pilih view -> command Palette. shortcut Ctrl + Shift + P Kemudian ketikkan flutter dan pilih Flutter: New Project a1Pilih folder tempat projek tersebut 32Kemudian tentukan nama projek flutter yang ingin dibuat misalnya aplikasi_flutter_pertamaku Kemudian tekan Enter dan tunggu hingga proses unduhan selesai 33Menjalankan aplikasi dengan Handphone Android Untuk menjalankan projek flutter dari VSCode dapat menggunakan Emulator AVD yang telah dibuat sebelumnya menggunaken Android Studio ataupun menggunakan Device Handphone Android langsung Untuk menggunakan android device secara langsung, pert dengan cara buke Setting kemudian pilih System kemudian pilin About Phone, untuk masing- masing device mungkin terdapat perbedaan untuk lokasi About Phone ada pula yang berada pada Additional Setting, ma aktifkan dulu mode developer 341B Inns e500 - oOo x on BOO + rata i 6 BE sc ans ca Accounts Come mode srvartpare! Intoligont voine broadcast Aesion and gesture ‘Acsessibity Dial welieing & parental corrals Goon xOsLab ‘Systern friar iain ELe © @ + «¢ @ Kemudian pilih About Phone 351 Innis e500 - oOo x ree < System | @ 8@ & &| @ &@ SN & ziees sana ERIE? Arde Languages & input Date & time Schedule power on & oft Reset options Systen Undate 2 ° o 1D Beckip ° o o Bectup and restore LF develope options 0 fe) q Kemudian ketuk Build number beberapa kali, narun ini juga berbeda untuk beberapa vers! rmisalnya untuk Xiaomi dengan mengetuk MIUI Version beberapa kali 361 Innis e500 - oOo x oa BO oe + Fala < About phone Stat Device name Mace! 8 version Andiod version Device nfo Legal infermation ‘cerbneation io \Uset Experience improrenient Progam 0 ° q Selanjutnya mengaktifkan USB Debugger dengan cara pillh Developer Option pada System, Developer Option ini akan muncul setelah mode Developer diaktitkan dengan cara diatas a7on Bans : < System @ @ & 2iGks —SxDmEN—7eaq60 Languages & input sto & time Schedule power on @ oft Beciua Reset options Systen Undate e686 00 CGO 8 Bectup and restore Developer options © outshone 0 O° q Kemudian aktifkan USB Debugging 1 Innis e500 - oOo x Ando P 38,1 Innis e500 - oOo x < Developer options | on «a ‘Quick eatings developer ties evoke USH debugging authorizations ‘Bugreport shortcut e Select mock Keaton app Force fll NSS measurement Enable sew atte inepection ® sees cg pp Yoityanos over SB * 0 O° q Jika telah selesai, hubungkan Handphone android dengan laptop/komputer dengan kabel data, untuk memeriksa apakah sudah terhubung dengan Handphone, dapat dilihat pada \SCode bagian pojok kanan bawah akan tertera nama device yang terhubung 39Agar laptop bekerja lebih ringan dapat digunakan Text Editor VSCode dan menjalankan projek langsung menggunakan Handphone Android, Untuk menjalankan projek melalui VSCode dengan klik logo play pada bagian pojok kanan atas 40‘Adapun struktur folder Projek flutter adalah sebagai berikut: 41[Eo mproject ~ e jack Fe Ye treer_app ~/androidsuciorrojecsutter B) Re ancrid [fatter app android] at ml ey mates 8) otorore @ metadata packages es flutter_app.iml & pukspacilock pubspec.yaml 1 README.md BB ancroid berisi source code untuk aplikasi android; Bh 0s berisi source code untuk aplikasi iOS; a Bh lib berisi source code Dart, di sini kita akan menulis kode aplikasi; a [Bi test berisi source code Dart untuk testing aplikasi; 1 =| gitignore adalah file Git; [i metadata merupakan file yang berisi metadata project yang di-generate otomatis; packages merupakan file yang berisi alamat path package yang dibuat oleh pub; 1») flucter_app.im| merupakan file XML yang berisi keterangan project; 1 =) oubspec lock merupakan file yang berisi versi-versi library atau package. File ini dibuat oleh pub. Fungsinya untuk mengunci versi package. B®) pubspec yal merupakan file yang berisi informasi tentang project dan libraray yang dibutuhkan; [=| README.md merupakan file markdown yang berisi penjelasan tentang source code. Membuat Hello World Buka projek aplikasi_flutter_pertamaku menggunakan VSCode agar lebih ringan. Buka file main.dart yang terletak pada folder lib kemudian ubah menjadi import. ‘package:flutter/material dart"; void main() ( 5 Tinbercconse WA0H0)5 a 2. 3 426. 7. class MyApp extends Statelesswidget 8. const MyApp({Key? Key}) : super(key: key); 10. @override 11, Widget buila(Builécontext context) { 12.” return MaterialApp( a3. title: "Aaplikasi Flutter Pertana", ha. home: Scaffold( a5 appar: AppBar( ae. title: const Text(‘selajar Flutter’), 7 » he. mn a9. )5 2a} Ketika dijalankan akan menghasilkan 43A) Infinix xE50¢ - oo x Pia eee <= AppBar rN Kemudian untuk menambahkan tampilan dibagian dalam (body), pada fungsi Scaffold terdapat parameter body. Silahkan modifikasi main.dart menjadi seperti berikut import ‘package: flutter/naterial. dart’ 5 void main() { unpp(const MyADp())5 a. 2 3. a. 5. 6. 7. class MyApp extends Statelesswidget { 8. const MyAppC Key? Key)) + super(key: Key); 10. @override 11. Widget buile(Buildcontext context) ¢ 12.” return MaterialApp( a3. title: "Aplikasi Flutter Pertana", 44aa, home: scaffold( as. ‘appar: AppBar( a6 title: Text("Belajar Flutter"), a7. » a8, body: const Center( ae. child: Text("Wello world”), 20, » 2.5 Sehingga akan menghasilkan AB Infini XE50C - ao x Seern eres 45Pada aplikasi di atas, kita membuat StatelessWidget yang berisi widget MaterialApp\) Kemudian di dalam MateralApp() berisi widget lagi: Scaffold, AppBar, Center, dan Text. Ini adalah widget dasar. Penielasan: + MyApp adalah StatelessWidget, merupakan widget induk; + MaterialApp adalah widget yang membungkus beberapa widget yang menggunakan tema material design + Scaffold adalah widget untuk struktur dasar material design; + AppBar adalah widget untuk membuat Appar; + Center adalah Widget layout untuk membuat widget ke tengah; + Text adalah widget untuk membuat teks. Untuk mempermudah dalam pembacaan kode dan maintenance dapat dilakukan dengan memisahkan MyApp dengan halaman yang ingin ditampilkan. Silahkan buat sebuah file dengan nama hello_world.dart di dalam folder lib Nara eer WL] Mesa eei| 46Kemudian bagian Scaffold pada main.dart yang telah dibuat tadi akan kita masukkan ke dalam hello_world.dart, schingga pada hello_world.dart akan menjadi Amport.‘package:flutter/material.dart'; a 2 3. class Helloworld extends statelesswidget { 4,” Goverride 5. Widget build(auslacontext context) { 6. return Seatfold( 7 ‘appar: AppBar( 8 title: const Text('Selajar Flutter"), 9 » 10, body: const center( aa child: Text("Hello World"), a3. aa 15. } Pada file main.dart kita modifikasi kemibali pada bagian home menjadi import ‘package: aplikasi_flutter_pertanaku/hel1o_world.dart” import ‘package: flutter/aaterial.dart'; void main() ( y Tmsrconss WyArPO)s class Mydpp extends Statelesswidget { ‘const MyApp({Key? key}) super(key: key); 28 11. @overri¢e 12. Widget build(Buildcontext context) ( 13, "Return const Materialapp( ha. ‘title: "Aplikasi Flutter Pertana", 15. home: HelLoworid(), is. wo} 8.) Pada bagian home, kita memanggil class HelloWorld yang telah kita buat sebelumnya pada file hello_world.dart Jika kita perhatikan pada bagian body, terdapat Widget Center kemudian didalam Widget Center tersebut terdapat parameter child untuk meletakkan Widget lain didalam widget tersebut, dalam hal ini adalah Widget Text Center( child: Text(‘Hello World’, Catatan : dalam Widget selain child, terdapat pula children dengan type data array yang. dimana kita dapat menempatkan beberapa Widget didalamnya contohnya pada Widget Column dan Row 47Untuk mempercepat dalam pembuatan class pada VSCode dapat dilakukan dengan mengetik st kemudian memilih stateless widget ataupun stateless widget kemudian ketikkan nama class yang diinginkan Membuat Widget Column Buet sebuah file dengan nama column_widget.dart didalam folder lib, kemudian ketikkan kode berikut Amport. ‘package:flutter/material.dart'; a 2 3. class Colusnkidget extends statelesswidget { 4. const Columnilidget({key? key)) : super(key: key); 6 7 2 @override Widget buila(suildcontext context) { return Scaffold( 9 ‘appar: Appsar( 20. title: const Text(‘widget Colum), a » a2. body: cotunn( a. children: const [ a4, Text("Kolon 1"), as. Text(*Kolon 3"), 46 Text(*Kolon 2"), a Text( ‘Kolo 4") a8) L 19. es 20. > aay Kemudian pada file main.dart ubah kodenya menjadi Anport. ‘package:aplikesi_flutter_pe Import. ‘package: flutter/material.da saku/colunn widget dart”; a 2 al 3 14. void maint) { 5. rundpp(const MyApp())s 6 7 9 > class MyApp extends Statelesswidget ( const MyApp({Key? Key}) super(key: Key) 5 4810. 11. @override 12. Widget build(suilécontext context) { return const MatersalApp( title: "Aplikasi Flutter Pertana", hone: Columnikidget(), as. 16) any 18. Dan hasilnya akan menjadi seperti berikut A Infinin XE50C - ao x Pia Widget Column kok: Kohn le i) Column biasanya digunakan untuk membuat Form 49Mempbuat Widget Row Untuk menampilkan Widget dalam posisi horizontal dapat menggunakan Widget Row. Buat sebuah file didalam folder lib dengan nama row_widget.dart, kemudian ketikkan kode berikut Amport. ‘package:flucter/material dart"; a. 2. 3. class Rovilidget extends statelesswidget { 4, const Rowwidget({Key? key}) : super(key: key); Ss. 6 7 8 Goverride Widget build(suildcontext context) { return Scaffold( 3. ‘appBar: AppBar( 10. Ritle: const Text(‘iidget Row"), a » a2, body: Row( aa. ‘children: const [ aa) Text('Row 1"), 15. Text(*Row 2°), 16, Text('Row 3"), v Text (‘Row 4°) 18. L a9) 20. ay 22. Kemudian seperti sebelumnya masukkan class RowWidget tersebut kedalam home pada main.dart, dan hasilnya akan menjadi 50AB Infini XE50C - ao x ra ieee ° co StatelessWidget dan StatefullWidget StatelessWidget adalah class widget yang propertinya immutable, artinya nilainya tidak bisa diubah, sedanekan StatefullWidget nilainya dapat berubah-ubah, Contoh StatelessWidget : + class HeLlosorld extends statelesswidget { ‘const Helloworld({ Key? key }) + super(key: key); Widget build(suildcontext context) { a 2 3. 4. override s 6. return Container( 7 8 ds 513. } 10.) Contoh StatefullWidget class Hellosorld extends Statefulwidget ( ‘const Helioworld({ Key? key }) : supertkey: key); Helloorldstate createstate() => Hellodorldstate(); > class HelloWorldstate extends StatedelloWorld> ( 9. Goverride 10, Widget build(Butldcontext context) { a. 2 3. 4. goverride Ss. 6 7 a 11.” return Container a as 14, 45.) Membuat Form Selanjutnya kita akan belajar membuat form pada flutter, agar lebih rapi untuk tampilan halaman akan kita kelompokkan dalam sebuah folder tersendiri, dalam hal ini kita membuat folder dengan nama ui didalam folder lib, 52wae ie ea Kemudian didalam folder ui tersebut kita buat sebuah file dengan nama produk_form.dart 5354See ew Meta adr. neice taKerudian Ketikkan kode berikut Amport. ‘package: flutter/material.dart'; class ProdukFonm extends Statefulwidget { const ProdukForm({Key? key}) : super(key: key); Goverride “ProdukFornstate createstate() y ProdukFonastate(); a. 2 3. a 5. 6 7 3. 3. . class _ProdukForastate extends StatecProdukForm> { Goverride Widget buile(Buildcontext context) { return Scaffold( appar: AppBar( title: const Text('Forr Produk"), » body: Singlechildscroliview( ‘child: ‘Column children: (| TextField(decoration: const InputDecoration(labelText: “Kode Produk"), TextField(decoration: const InputDecoration(labelText: "Nana Produk”), TextField(decoration: const Inputbecoration(labelText: “iarga")), Elevatedsutton(onPressed: () (), child: const Text("Sinpan')) t » » de Ubah pada main.dart dengan memanggil class ProdukForm, sehingga hasilnya akan menjadi 56AP Infini XE50C - ao x oeets kode Frdsk sams Produ Simgan ° co Pemisahan Widget Kedalam fungsi-fungs! ‘Agar kode mudah dibaca dan dikembangkan, akan lebih baik jika widget-widget yang digunakan dipisahkan kedalam method/function tertentu, misalnya pada produk form.dart terdapat widget seperti TextField dan Button, pada widget tersebut akan kita pisahkan kedalam method tersendiri didalam class, sehingga menjadi seperti berikut import. ‘package:flutter/material.dart'; lass ProdukForm extends Statefulidget { const ProdukFore({Key? key}) : super(key: Key); Goverride “ProdukFormstate createstate() => _ProdukForastate(); 37