asalamualaikum warahmatullahi wabarakatuh Selamat datang di praktikum pab pertemuan yang pertama kali ini saya akan menjelaskan modul praktikum untuk pertemuan pertama yaitu pengenalan Widget pada flatter flatter flatter merupakan du tolkit milik Google yang digunakan untuk mengembangkan aplikasi mobile dan mampu berjalan di sistem operasi Android atau iOS nah kalian sebelum menggunakan flatterter kalian harus men-download vs vs Code kalau kalian ingin menggunakan face code atau bisa menggunakan Android studio jangan lupa untuk menggunakan flatter SDK bisa Kalian cari di Google Android studio dan Visual Studio code nanti saya cantumkan di deskripsi di di flatterter ini kita eh di flatterter ini menggunakan bahasa dart bahasa pemrograman yang dikembangkan oleh Google Oke Setelah kalian sudah men-set up eh atau menginstal Visual Studio code-nya eh di sini saya menggunakan emulatornya pakai HP pakai HP kalian bisa menggunakan Google Chrome atau pakai emulator yang ada di and studio oke di sini kalian an sudah saya anggap sudah menginstal flatternya kali ini buka new Windows eh maksudnya new vs Code ketika tampilan sudah seperti ini tekan conttrol shiftp cari flatter new Project gini ketik aja oke Tekan enter pilih yang atas application Nah di sini kita buat folder nama foldernya pertemuan satu Entar Bentar kita buat dulu pertemuan satu oke kita pilih kemudian kita kasih Project nama Project nama untuk flatternya saya gunakan nama flatter terserah terserah kalian namanya saya saya kasih nama flatter eh per temuan sat enter kita Yes Oke kita tunggu dulu kita tunggu dulu nah ini sudah selesai your flatterter Project is ready Oke ini adalah tampilan awal dari flatternya di sini ada dart ada folder dart ID Android nanti di ini Android untuk kalian men-setting semisal kalian ini ingin aplikasinya di upload di Google Play bisa kalian setting di sini semua dari icon terus ke k kuncinya terus Bu namanya Nanti kalian bisa pelajari di sini kalian bisa pelajari sendiri Ini juga ada ay Nah untuk iOS ini ee kalian bisa menggunakan Mac baru bisa menjalankan ios-nya kemudian ada lip nah di lip ini adalah Project Kalian di mana Nanti kalian akan melakukan coding atau membuat tampilan front end untuk aplikasi kalian kemudian ada ada Linux macice test widget test ini untuk testing-testing testing sederhana testing develop kemudian ada web nah di flatterter ini kita juga bisa mengembangkan web di flatterter Jadi bukan hanya Android atau iOS tapi bisa web Oke ini ada Windows di sini getit ignore biasa untuk Git ignor ini untuk semisal Git semisal eh persjekalian dipush di github maka yang di sini tidak akan dipush semisal titik pub ini tidak akan dipush kemudian ada analisis optionals ada flutter pertemuan pertama ada pubspek.k log ada pubspek.l nah Nah di sini di sini ini adalah ee untuk dependensi sekalian semisal kalian ingin menggunakan eh packak semisal packak untuk menampilkan gambar nah kalian tinggal cantungkan di sini atau kalian bisa cari di Google di Google bentar sebentar saya saya contohkan semisal saya setting dulu saya set up dulu nah di Google Oke bentar saya kecilkan entar sabar nah ini di sini semisal kita pergi ke wwgoogle.com eh pub flatterter Nah di sini kalian bisa mencari package semisal package Apa ya Eh apa ya SQL skite atau Kalian mau apa terserah Nah tinggal diklik aja di sini diklik nah installing Nah tinggal dicopy aja ini kemudian masuk ke Terminal di sini Nah tinggal dicopy di sini bentar nunggu masih lama nah copy aja sudah terus ditekan enter nah gitu untuk menambangkan package atau dependenes enggak kelihatan ya Bentar ya saya matikan dulu nah kalian sudah Nah setelah itu tinggal copy copy kemudian masuk ke tadi ke pubsek email tadi atau perkalian buka di terminal bisa pakai Terminal new Terminal atau pakai yang ini yang pojok ada tanda x sama segitiga tanda seru ini segitiga Tengah tada seru ini diklik kemudian pergi ke Terminal Nah tinggal di-copy di sini kemudian enter tunggu sampai download harus ada internetnya nah misal kalau mau pakai scight nanti di sini bakal menambah sket apa gitu Nah di sini juga ada aset untuk gambar semisal kalian inin menggunakan gambar di sini juga ada aset untuk font nah biasanya saya menggunakan PX untuk font-nya menggunakan Google font entar Google forms Kalau enggak salah namanya saya lupa nah pakai ini Nah kan tinggal gampang tinggal di-copy aja ini Nah tingal dicopy kemudian di-instal dah itu aja dulu aja ya untuk p-nya kalian bisa cari-cari sendiri mau apa Max speaker juga ada di sini mau kalender ada tinggal cari-cari aja di Pap Dev ini nanti saya cantumkan aja linknya Oke kita lanjut kita lanjut kita ke Mart Oke Karan dulu ya Nah di sini kalian bisa milih bisa pakai Chrome G Windows atau ini ya ini cph 2015 ini adalah device saya device mobile saya nah caranya supaya eh device mobile Saya bisa tampil saya menggunakan Ini scripy bentar saya tampilkan scripy nah ini ini bisa tampil kayak gini karena saya menggunakan scripy Oke kita cek dulu googer Google Mirror SCP nah ini kalian bisa download di sini Berti download nah kalian bisa kalian bisa download di sini Nah nanti saya sertakan linknya atau kalian bisa di sini semisal pakai emulator dari Android studio juga bisa Oke karena saya pakai emulator dari eh HP saya pilih klik oke kemudian saya Run ini default awalnya ya apa saya e saya jelaskan di sini ada class my apppp ada stateless ada state full Nah ini saya jelaskan eh stateless stateless itu semisal kita menggunakan stateless ketika eh screen kita kita sambil jalankanilih pilih Run kemudian Run without the buging Nah tunggu sampai jalan sambil saya jelaskan ada statel sama state full Nah kalau stateless itu semisal kita punya screen atau pixd set stateless itu tidak bisa diubah semisal nanti ada angka 1 2 3 ada button Nah nanti ada perubahan di dalam Pix tersebut itu tidak bisa kalau pakai statlessess kalau pakai state full baru bisa karena di state full ini ada yang namanya set state dan juga Init state Nah bentar sambil nunggu running eh flatternyaarok pokoknya intinya di itu di px-nya P kalau pakai stat full set full bisa berubah pix-nya kalau pakai statless tidak bisa berubah jadi statis Bentar ini kayaknya sudah selesai Bentar masih loading masih belum selesai Oke kita lihat nah sudah ini adalah tampilan awal nah ini nah state full ini pakai state full ada string title ada increment counter Nah jadi di sini yang 0 ini akan berubah menjadi 1 2 3 Nah itu pakai stateful kalau pnya berubah di sini kalau di sini tidak ada perubahan sama sekali ya Pakai stateless Coba kita klik button ini nah kan ada perubahan berarti ini pakai state full Oke ada perubahan di pex-nya pakai state full Kalau tidak ada perubahan di px-nya enggak usah pakai state full tetapi pakai stateless Nah di sini ada set state perubahannya Bentar ini saya hapus terlebih dahulu aja ya biar paham Oke sebentar Nah saya jelaskan kita X dulu Enggak apa-apa ini ini di X Nah di sini karena pakai state state full karena ada perubahan tadinya Nah di sini ada integer counter N0 jadi kita buat counter ini variabel counter kita set awal nol kemudian kita membuat e fungsi increment counter nanti ini akan inkremen jadi nanti eh variabel counter ini ini kounter ini akan plus plus akan menambah terus ke atas dari 0 1 2 3 4 5 6 sampai tak terhingga Nah setelah kita membuat fungsi ini baru kemudian kita Panggil di teks ini dolar cara manggilnya dolar counter variabel control cont control counter nah nah ini untuk apa ini untuk menampilkan ini menampilkan 4 5 6 nah gitu Nah untuk E fungsinya untuk fungsinya yang increment counter ini untuk Inc counter ini kita panggil aja di sini floting floting icon button onpress increment counter nahah nanti saya jelaskan onpr itu buat apa nanti saya jelaskan ini saya jelaskan statless sama ST terlebih dahulu oke Nah selanjutnya kita akan membahas eh apa scatfold appb cara menampilkan gambar kemudian kita menggunakan teks container icon terus row sama kolom oke di sini saya ee menggunakan seperti ini ini dihapus biar sedikit rapi ini dihapus Ini dihapus bentar Nah jadi ini kan ada error Nah jadi biasanya saya kalau ingin membuat ee screen baru atau pek baru tidak di main ini saya buat lagi di sini Di semisal F 1 Ti Nah kita di sini ada perubahan apa enggak e semisal kalau ada perubahan ya kita pakai ST eh state kalau ada perubahan kalau enggak ada perubahan kita pakai stateless kita pakai state e kita pakai ya ST full Nah kelas my widget ini kalian ganti Terserah kalian mau namanya apa kalau saya pakai nama P1 nah kemudian cara menampilkannya px1 ini ke screennya caranya ini kelasnya ini tinggal copy ctrol C kemudian pergi ke main ini dihapus jangan lupa kurung buka kurung tutup sudah kemudian Masih error caranya ee geser geser Ini Icon ini kemudian geser icon ini ke errornya setelah muncul seperti ini baru kalian pilih quick F Qui F pilih import perteman pertama pack 1 Oke keluar sudah enggak eror lagi kan cuma di sini kan ada biru-birunya Nah bentar bentar di sini kan ada error Nah kita perbaiki terlebih dahulu oke Nah di sini return conspl holdernya saya ganti menjadi sket scaffold nah kemudian save Nah sudah kan sudah enggak eror lagi sudah gak eror lagi Eh scaffold scffold kegunaan dari scaffold itu untuk ee membuat tampilan dasar jadi ini adalah tampilan dasar scaffold ini adalah tampilan dasar untuk membuat widget-widget semisal kalau kontainer tek kolom row setelah itu Eh kita hilangkan Ya biru-birunya ini biru-biru yang ini loh underline biru supaya enggak Kalau saya saya sih saya lilangkan supaya biar enak dipandang kita ke analis kita ke analisis kemudian ini yang di Line 10 ini diblok semua kemudian tekan ktrol e e atau apa ini namanya ini Nah setelah ini save ctrol s save kita lihat apakah hilang Nah sudah hilang Oke selanjutnya karena sudah ung di P di mind ini sudah terhubung ke p pertama kali ini saya akan membuat eB eB Nah di sini eh e bar kalian bisa buat atau tidak terserah kita itu membuat tampilan itu terserah kita atau terserah desainnya desain Seperti apa Kalau ada ebar ya kita buat ebar kalau enggak ada enggak usah buat ear simpel aja kita buat teks Nah kita buat title semisal Pix 1 Oke save nah nah sudah muncul kan p 1 Oke selanjutnya kita buat di sini di bawah e bar ini kita buat body nah ya kemudian kita belajar kolom atau row kita belajar kolom terlebih dahulu oke nah biasanya eh saya ketika melakukan slashing atau membuat eh for end-nya saya menggunakan scold terlebih dahulu eh maaf kolom di kolom ini kita pakai children nah konsepnya gini kan ada kolom sama Row di kolom ini eh kita bisa membuat beberapa RW semisal atau beberapa teks atau beberapa widget semisal kita buat widget teks aja teks teks S kemudian di sini kita buat kontainer Nah kita kontainer aja pilih eh kontainer Ukurannya berapa S 20 he-nya kita pakai 20 kemudian colornya kita pakai color Blue eh color bentar blue Oke kita cek Nah sudah keluarkan teks sat sama kontainer nah di kolom ini kita juga bisa Tampilkan Raw nah sekalian ya kita belajar teks sama kontainer kita belajar teks Oke teks nah di teks ini kita ada style tektile nah di t style ini kita bisa mengatur semisal font size ada font Family font si ada banyak cara melihatnya gimana geser kursornya ke teksle ini Nah di sini ada color ada background color font size font white dan lain sebagainya kalian bisa pelajari lebih lanjut font size misal Saya ingin ukurannya 20 oke nah atau ukurang besar 70 nah besar ya kan 70 teks 1 pakai 50 aja L 50 kalian kalian juga bisa kasih color semisal color colornya kita pakai M blue Terserah kalian pakai apa nah kita besarkan ini Nah sudah Nah di di kolom ini itu strukturnya dari atas ke bawah atau disebutnya vertikal dari atas ke bawah Ya kan vertikal nah di vertikal Nah di sini Eh kalian bisa menggunakan main Element kita bisa menggunakan center and space space at m main access Element start semisal kita buat center oke Nah nanti dia akan ke tengah kalau kita buat Space roundound nah Space R oke nah kalau kita buat Space bat one di antara nah akan lebih jaraknya lebih lebar Oke Sama halnya dengan row row kita coba row kita hilangin terlebih dahulu Nah kalau row kalau row itu dari kiri ke kanan atau bisa disebut horizontal dari sampinglah di sini Kalian juga bisa menggunakan main main Ais alignmentisal center oke kan ke tengah semisal pakai Space bat one nah di antara kalian bisa mencoba Nah di sini saya menggunakan pakai kolom kan enggak mungkin kan mungkin saja sih kalau aplikasi Kan bisa pakai ckul atas ke bawah kan biasanya jadi saya menggunakan kolom nah kalau buat scrollsroll nanti ada sendiri oke sudah begini kita sudah belajar teks kemudian kita belajar kontainer nah kontainer kita buat kotak istilahnya Kotak di sini juga ada white 50 ha-nya tingginya 50 ada color ada decoration Nah di sini untuk mendekorasi e kontainernya ada box decoration semisal pakai border radius border radius sirkular biasanya saya pakai 10 ini nanti lihat lihat lihat ya lihat perubahannya Wah ada error bentar Oh ini errornya karena warna ini color ini harus berada di decoration ini kita rapikan save [Musik] Nah kan Lihat kan kalau pakai border radius nah kalian bisa ee segeratif mungkin atau bisa mencoba yang lain ada border radius ada border ada gradien juga bisa kalian coba eh ada image juga B dimasukkan image di kontainer ini Oke selanjutnya eh kita coba untuk import image pertama kita impor dari eh dari internet caranya kita pilih eh kita ketikkan image image Network nah Network ini kita pilih imil Network nah kemudian kisa kita bisa cari link di Google terserah Nah di sini saya sudah menyiapkan menyiapkan linknya nah ini dia linknya kita coba save nah nah udah keluar ini kalau pakai image Network atau link link linknya cari di Google Nah di sini juga ada white semisal kita pakai 50 hack-nya juga kita pakai 50 ini juga buat ukurannya eh high 50 save nah bakalan kecil oke Nah kan saya sudah bilang Kan di kolom ini bisa kalian Panggil widget kontainer image Network dan lain sebagainya eh semisal Saya mau panggil eh Raw Raw Row di sini juga bisa raow children semisal kayak saya semisal buat kontainer tinggal copy aja kontainer kemudian kontainer sem Misalnya ini warnanya saya ganti hitam juga bisa oke lihat perubahan Nah ini kan perubahannya di sini kan Iya kan Nah kalau pakai row Ini mesti ke tengah teks sat biru sama gambarnya ini pasti ke tengah nah kemudian kita pakai eh main access Element kita pakai center kita coba aja apa ke wis nah ke tengah kan berarti kan salah supaya supaya ke tengah kita coba pakai Raw kita pakai M ACC Element center Coba aja Nah sudah ketengah kan kita saya nah pakai row juga bisa nah kemudian kita eh coba eh eh image image netw kita Panggil image dari e aset kita bisa buat folder di sini di luar di sini ya Kelik sini kemudian pilih ini kita Panggil aset nah kalau saya Biasanya kan ada icon ada image dan lain sebagainya saya kelompokkan semisal saya bikin icon ya Pak saya buat folder di sini icon tuh semisal kalau ada image ya saya buat folder image di sini nah cara manggilnya gimana gini kita masukkan terlebih dahulu fotonya oke semisal pakai foto ini tinggal geser aja geser aja kemudian masukkan ke image Nah ini kan kemudian pergi ke pubspek email pergi ke aset nah di aset ini kita ganti kita ganti ini adalah tempat di mana gambarnya tersedia Nah kan di sini kan di asets ada di eon sama di Image Nah kita ganti aja gini aset slimage slash Nah Enggak usah pakai gambar 1. cpg Nah nanti tinggal kita panggil aja Nah di sini agak-agak susah sih menurut saya entar kita ee ke ke bawah row supaya ke bawah kita pakai image aset yaake aset kemudian Eh kalian ketikkan aset/ash image/ashgambar 1 titik JPG Apakah bisa kita lihat di buging kita lihat klik ini ikon yang pojok kiri Ini no problem ini nah pergi ke debak konsol Nah kita lihat Apakah ada error nah hmm tidak ada error Alhamdulillah nah muncul kan gambarnya Nah setelah itu gambar sudah kita belajar ee Nah di sini ada button nah cara membuat button-nya kayak gini nah onpress S pindah semisal kita pakai pindah halaman aja ya pindah halaman nah di eh di button ini ada onpress nah onpress ini digunakan ee untuk ee semisal kalian ingin ee melakukan aksi Oke kita coba aja ya kita print kita Tebak aja supaya ngerti print semisal eh p 1 Terserah kalian kita coba Soalnya kita print Nah nanti akan muncul di sini nah kemudian kita perg sini kita klik pindah halaman nah akan muncul p s nah ini Gun nah ini di onpress ini bisa kalian gunakan aksi untuk ee semisal ada validasi ada ee ada apa ya kayak if else juga bisa atau pindah halaman juga bisa pakai ini nah oke kalian bisa pakai ini ee lebih kreatif lagi ada banyak yaak sih bisa kalian pelajari ada teks ada kontainer ada Bagaimana cara membuat kontainer supaya bundar juga ada Avatar namanya nah kalian bisa cari sendiri kalau bundar kan bisa difkan B misal berapa gitu 50 gimana coba cek aja dicoba-coba aja nah bundar kan sudah selesai jadi nah Setelah itu kita eh kita row kolom sudah aset image sudah ST stless sudah skatf ebar sudah icon ya icon kita belum kita icon Oke iconor mana Ya nanya di bawah imix aja ya kita pakai icon nah nah cara menggunakan icon kita panggil aja ada icon but icon ada icon button ada icon button tonal dan lain sebagainya Oke Biasanya kalau icon buttonnya saya bisa saya klik atau ada aksi bisa saya menggunakan icon button nah kan ada onpressnya kalau onpressnya ada eror gini ya caranya tinggal kurungungup kemudian awal Oke jangan lupa kita kasih koma di Ee kita kasih koma ini ya di sini Nah di ujungnya kita kasih koma nah cara manggilnya icon Terserah kalian mau pakai icon apa Nah di sini kalau icon ini ee bisa kalian cari di flatter icon biasanya di situ bentar saya coba lihatan flutter icon cek Nah di sini ada banyak icon Nah ada ikon tingal kalian pilih mau ikon mana semisal saya mau pakai icon ini ya icon circle tinggal copy tinggal copy kemudian diganti aja sini ada error error apa ini bentar icon k parameter tipe widgetent Oh pakai ini terlebih dahulu ya icon icon nah icon nah pakai pakai icon nah pakai ini ya kemudian baru deh kita Panggil icon-nya pakai Icons ya I besar ingat kesalahan eh kesalahan teks atau kesalahan huruf itu bisa berakibat fatal atau berakibat error kita copy aja yang tadi yang enggak kelihatan ya bentar bentar bentar saya lupa saya matikan dulu kan sudah kalian copy kan di sini di ion e bentar di ion ccelnya di cnya kemudian kita matikan eh maksudnya bentar saya matikan dulu screennya nah muncul kemudian dicopy di sini Nah di sini kan ada error Nah tadi kan ada eror tadi kan ketutupan ini ada error kan Nah the Agre jangan e maksudnya jangan malas-malas untuk membaca error nah jika kalian tidak bisa bahasa Inggris seperti saya ya pakai Google Translate caranya ini ada error argump I data to the parameterp widget kan gak bisa ini harus dibungkus sama ion seperti inionah kemudian kita panggilja tik nah copy Oke kita lihat screen-nya nah muncul kan Oke kita bisa eh bisa membesarkan biasanya pakai scale ada enggak is icon size ini ada icon size semisal kita pakai 20 Coba aja Makin kecil kita pakai Berapa 100 nah besar kan ini kalau pakai button kalau adai semisal kalau kalian e menggunakan kontainer menggunakan kontainer Nah di sini kalau kalian menggunakan button atau membuat ingin membuat button kalian bisa menggunakan eev button dan juga bisaalian kalian bisa membuatom menggunakan kontainer nah seperti ini saya copy aja tinggal keost aja B pakai 10 wt-nya pakai 100 coba cek nah nah di kontainer ini supaya ada aksinya ada onpress-nya kalian bisa ee menggunakan e Inil atau menggunakan eh G Doctor ya gestur maksud maksud saya gestur detector gestur detector Oke maaf kalau bahasa Inggris saya kurang nah di sini di kontainer ini kalian bisa pilih ee Lampu ini klik atau caranya kalau pakai eh keyboard conttrol titik nah sama kan sama munculnya nah kemudian pilih ee widget widget nah nah oke di sini kalian Eh masukkan sual in Wheel inwi juga bisa ada on Nah ada on hover on tab ada banyak ini biasanya pakai saya Eh saya pakai onab nah kita print coba testing eh bentar kita print testing in Oke kita coba klik nah testing Inil Oke kita coba pakai eh itu ya gestur detector kita coba pakai gesture dettor di sini ada on table tab ada banyak ya kalau pakai ini ada on tab nah Terselah Kalian mau pakai mana Saya biasanya ya sama pakai ontab kenapa enggak pakai onpress ya karena enggak ada di sini lihat mana mana ada onpr di sini enggak ada kan Nah Enggak ada kan Nah oleh karena itu saya menggunakan ontab Nah kita coba aja Print ini testing [Musik] oke Ini testing kemudian kita coba klik ini ya kan ini di color Black ini yang baw sendiri Kita klik klik nah Munculkan Ini testing nah di kontainer ini kalian bisa ee ada cheld-nya di sini ada cheld bisa tambahkan cheld semal Tex semisal teks eh button atau button kita lihat warnanya apa ya jelas warnanya hitam nah kemudian kita coba ganti warnanya style tektile eh [Musik] semisal color color is oke apakah bisa Nah bisa kan Tapi ada di atas kiri pojok Nah di sini kalian bisa ganti Raw juga bisa bisa ganti tergantung dari desain desain kalian lah semisal kita pakai Center nah caranya supaya ke tengah kan ke tengah kan center button nah sama tadi caranya manggilnya gini klik ini kalian bisa pilih e icon Lampu ini atau pakai conttrol titik pilih senter Nah kan bisa Tu Oke selanjutnya kita ingin perpindahan data perpindahan data perpindahan Pix kita ke Pix 2.d kita pakai state full terserah kita pakai stle juga bisa kan cuma nyoba aja PX 2 Nah kalau kalian ingin rapi ya kasih nama P du screen gitu p s screen biar sedikit-sedikit clean code lah tahu kan kalian clean code itu apa ya supaya kodenya bersih supaya enak dilihat dan juga gampang dipahami Oke kita buat ebar ebar kita pilih ebar absar ingat ya ingat sekali lagi buat teman-teman eh huruf huruf itu berpengaruh besar kecilnya Oke kita titleambili title kemudian kita pilih teks buat teks nah semisal ini kita kasih nama P du oke nah kan ini masih di P pertama kan Nah supaya ke Pix kedua caranya ini dicopy kelas Pix 2 ini dicopy ctrl c kemudian pergi ke main dart nah p 1 ini diganti dengan PX 2 ini Clas Pix 2 kemudian kita impor caranya ini eh geser crusurnya ke PX 2 pilih quick fight import nah save kita tunggu nah sudah pindah Kan di pek 2 nah saya kan ini ingin awalannya di pex pertama ganti dipex pertama dulu aja nah sebelum itu diex Du kita buat aja ee S button kita buat Buttom aja di Bi ada ee di body ini ada semisal ada button leevat button-nya Oke child-nya kita pakai teks aja kita pakai [Musik] nama pindah halaman Oke Oke kita akan belajar navigasi atau navigation nah di navigasi ini ada navigasi Pop ada navigasi push ada navigasi push Rep Man Oke bentar saya buka Pain terlebih dahulu supaya lebih paham Entar saya screen dulu apakah bisa ya kita coba dulu apaak bis ya enggak bisa ya bentar w Wah enggak bisa nih waduh kita pakai apa ini ya enggak bisa dibuat sater sini kitapus gak bisa ya oh gini eh saya jelaskan aja kita supaya e kita bikin butatonnya ke tengah conttrol titik kemudian pilih center Nah di sini kan di navigasi ada navigasi pus nah Apa gunanya navigasi push nah navigasi push itu eh semisal Kalian nih ada pek 2 atau Pix 3 kita pakai Pix 2 aja nah di Pix pertama kalian menggunakan navigasi pus ke Pix kedua nah di situ Berarti ada masih ada lembaran Pix pertama nah di fix kedua juga ada ee pakai navigasi nah di situ juga ada lembaran yang kedua nah tapi nanti akan ee akan pindah terus Nah karena pakai push jadi kan akan duplikat terus berulang ulang ulang dan akan menyebabkan beban memori menjadi besarah kita praktikkan aja pakai mana ini kita pakai yang Banten Kita pindah ke p 1 bentar Oke kita back satu oke kita ketikkan navigator Oh bentar navigation titik eh navigator titik pus konteks kemud kan material P root material P root nah kalian tiru aja buil eh buil bentar eh bentar salah salah salah salah maaf saya juga lagi belajar sama-sama kita belajar kemudian kita return nah Nah kita kembalikan ke mana kita pilih ke pex 2 pex 2 nah nah kita lihat navigasinya nah sudah navigasi sudah dipasang kita coba kita pilih pindah halaman ini kita klik klik Nah kan ke PX 2 nah kalau pakai push ini pasti ada Icon eh akan ada ion back-nya di sini di pojok kiri atas nah ini untuk pindah ke PX sat-nya Le dalam lagi nah ketika kalian menggunakan navigator P di pex 2 juga di sini kita pakai p s Nah kita pindah halaman Nah di sini akan terjadi tumpukan lihat ada icon backnya nah terus Kalian gunakan pindah dalamam lagi terus ini akan ada terjadi tumpukan tumpukan-tumpukan p s p 2 p s lagi P du p s lagi P 2 terurus nanti Nah kalau kalian menggunakan navigator pus nah ka supaya tidak ada penupukan tersebut nah Nah kita menggunakan pop pop digunakan untuk back kembali kita kita reload dulu cara me-reload-nya cara me-reload-nya kita pilih icon hijau ini restart nah Nah kita tunggu kita tunggu sampai PX 1 Nah sudah hilang kan Entar kita kembalikan lagi Oke setelah itu Setelah itu kita menggunakan di dua kita menggunakan navigator pus navigator eh maksudnya navigator pop Nah di sini kita komen komen Oke kita coba cek Kita pindah halaman ke Pix 2 ada tetap ada icon icon backnya pindah lagi ke pindah halaman Nah kan enggak ada nah itu e semisal dari Pix 1 kemudian pindah ke Pix 2 nah ketika kembali lagi ke PX 1 Pix 2 ini akan hilang P 2 ini akan hilang makanya ggak ada icon back di sini nah itu makanya gunanya navigator pop untuk kembali lagi ke p yang sebelumnya Nah di sini juga ada NAV e navig placement n navigation Replacement ini biasanya eh semisal ada p 1 oke nah akan navigasi ke PX kedua PX 1 ini ya PX 1 ini PX 1 ini akan navigasi ke PX kedua nah di situ eh ketika diklik navigasi eh ya Eh button navigasinya maka yang Pix pertama P pertama ini akan hilang jadi digantikan P kedua Oke kita coba aja push Replacement kita kita tambahkan aja gini oke kan ke p kedua Nah sudah kan kita Coba pindah halaman Nah di sini kan tidak ada e tidak ada ion ion kembalinya berarti kan pertama sudah hilang push Replacement berarti menghilangkan Pi pertama digantikan P kedua nanti kalau kalian ingin kembali inin back kembali pakai yang navig navigator pop ini pasti akan error kita coba ya blank hitam lah error soalnya pack 1 ini sudah tidak ada nah itu gunanya untuk push Replacement oke [Musik] oke Nah selanjutnya saya akan merubah button hitam ini ketika diklik akan berubah menjadi semisal kita kasih warna hijau oke nah itu gunanya kalau menggunakan state full ada perubahan pakai set state nah caranya begini semisal kita ee buat dulu kita silang dulu aja ini Nah di sini kita buat semisal ee bolean Nah kita pakai bol tipe data Bolan semisal perubahan nah ini Terserah kalian semisal kita set pertama kita pakai false oke nah kemudian di button hitam ini Kita di on tab ini kita pakai set state nah testate nah nah di sini ada perubahan kita pakai perubahannya sama dengan tanda seru perubahan nah kalian kalau pakai tanda seru ini berarti bernilai false kalau perubahan ini berarti bernilai true nah Ee Kita ingin merubah apa ini color-nya ya colornya kita akan berubah nah kita kan ini sudah diklik ya semisal di onab ini diklik buttonnya diklik diap Nah nanti ini perubahan ini akan bernilai e false dan juga sebaliknya jika perubahan ini bernilai e semisal ya kan pertama perubahan menjadi nilai Nah nanti ketika diklik akan menjadi true nah kemudian kan perubahan ini ee variabel perubahan ini kan sudah menjadi true kan diklik lagi menjadi false terus begitu nah kita set pertama kita kasih perubahan nah Jika perubahan bernilai ee tadi bernilai yang dikliknya tadi Maka kalau enggak hitam ya menjadi hijau Green Nah kita cek kita coba ya Nah kita coba klik buttonnya Nah sudah kan menjadi hijauik lagi hitam hijau hitam hijau hitam nah itu knya set state untuk perubahan perubahanal color apapun perubahan data juga bisa Nah di sini juga ada validasinya ini validasi if else tapi pakai yang simpel pakai tanda tanya kemudian ada titik duanya Nah mungkin itu yang bisa bisa ee bisa saya sampaikan di perteman pertama ini mohon maaf bila ada salah kata atau ee penjelasan yang kurang maksimal ee Mohon maaf terima kasih wasalamualaikum warahmatullahi wabarakatuh