Belajar Layouting (container, image, button) pada Flutter
whatssup budy… Pertemuan kemarin kan kita sudahh belajar sekilas tentang fundamental dari Baper (Chiyaa baper) “ Bahasa Pemrograman” Dart, biar kita lebih kena mentall nihh mulai pertemuan ini dan selanjutnya kita lumayan agak naik tingkatt ya, supaya kalo udah ditingkat tertinggi kita bisa ngeliat haters dari atas hiyahiya.
Nah jadi gini gaes tidak hanya di truck yang membutuhkan Container sebagai tempat penampungan barang, tetapii di dalam pemrograman khususnya frame work Flutter kita juga punya Container dong yang mana fungsinya sebagai tempat penyimpanan selingkuhan ehh maap maap hehe maksudnya tempat yang fungsi nya sebagai wadah suatu sistem yang dapat kita program keren kann… iyalah kaya yang nulis artikel ini :). Ini gambaran sekilas tentang container.
Nah jadi sudah mulai ngehalu kan apa itu fungsi Container di pemrograman, then kita ada materi selanjut nya yaitu ada Button,
Button merupakan tombol yang dapat kita pencet… ya iyalahh yakali button dipendem :” nanti jadi tekanan button lagi. eh battin ya ampun lucu banget yang ngetik :”, seriuss yuk lah tidak usah cepat-cepat, so gaes the function of Button is perangkat user interface pada Android yang berupa tombol. Button merupakan salah satu hal wajib pada aplikasi Android. Karena banyak aktivitas pada aplikasi Android yang membutuhkan Button untuk mengeksekusinya, seperti Login, Logout, Pencarian, atau Menu. Button dapat berisi tulisan, gambar, atau kombinasi keduanya. Nah jadi itu ya gaes aku ngambil dari artikel sebelah parah si :” soalnya gabisa serius, kemarin udah diseriusin eh ditinggal :”. Ini ada contoh beberapa customize Button yang dapat kita gunakan di flutter gaes.
Lanjut gaes the last nih ada Image, iyee gue udah tau kalo kalian semua dah tau image tu apa. Nah jadi image itu adalah sebuah gambar bisa ber-ekstensi GIF, JPEG, PNG dan lain-lain sesuai dengan kebutuhan, kalo dari aku prefer PNG si n sebetulnya ada tu compres file image yang beneran bisa pas banget jadi ga terlalu besar atau terlalu kecil file apps yang kita buat nantinya. Tapi untuk compress nya temen-temen bisa eksplore sendiri yaa biar makin seneng membaca haseek.
Dah dapet pencerahan lah yaa tentang pengertian yang aku kasih, aku paham walaupun tidak sesuai dengan kaidah EYD yang baik dan bennar but ini aku buat dari hati untuk kalian :)
N so gaes kayanya kurang afdol aja tau teori nya tapi ga kita praktikan yakann, ibarat suka sama seseorang tapi gapernah kita utarakan, giliran diutarakan eh taunya dah tunangan lumayan sakit si :”.
— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — -
Oke gaes kita lebih kejenjang yang lebih serius ya yang pertama kita mau mempraktikan how to create Container in flutter. Ini aku ada contoh gaes skuy lah nyoba bareng-bareng tapi kita customize ya soalnya kan dah masuk project.
Selanjutnya yang kedua yaitu sesuai materi ada Button. Mungkin langsung praktik aja ya dan dikasih contoh, karena aku udah ga ada kata-kata lagi.
Pertama-tama kita menambahkan widget TextButton dan kita tambahkan widget Teks seperti contoh di atas. Step pertama ini adalah langkah paling dasar dalam membuat TextButton.
Setelah itu untuk lebih mempercantik tampilan button, kita perlu untuk menambahkan warna pada button dengan cara seperti di atas. Kamu juga bisa sesuaikan warna yang kamu mau yah! Cukup dengan mengganti kode pada Color(0xff+kode hex warna yang kamu inginkan).
Untuk mengganti warna teks, kita hanya cukup menambahkan style pada widget teks yang sudah kita buat tadi. Kamu juga bisa sesuaikan dengan keinginan kamu dengan cara seperti di atas yaa gaes.
Untuk mengatur ukuran button, dapat kita tambahkan container seperti contoh di atas. Container juga dapat digunakan untuk mengatur bentuk dari button yang kita buat.
Untuk menambahkan border pada pinggir-pinggir button, kita dapat memberikan shape RoundedRectangleBorder dan menambahkan borderRadius sesuai dengan keinginan kita. Disini kita menggunakan ukuran radius 20.
Finally kita dapat Button seperti ini;
Selanjutnya ada Image
cara untuk memasukan image kedalam program dalam flutter kita harus import assets nya terlebih dahuli kedalam folder Assets, kemudia buat sub folder yang bernama image, kemudian import ya gaes, untuk caranya dipratikum yaa.
Kemudian kita wajib memasukkan nama image tersebut kedalam pubspec.yaml seperti ini contohnya.
Then untuk cara memasukkan ke program seperti ini.
Jadi kita bisa masukkan image pada widger children. ini hanya contoh ya gaess untuk environtment memasukkan image tu seperti apa pada framework.
Thank you bangett ni ya gaes dah baca sampai akhirr, semoga modul ini membantu temen-temen semua ya.
Jaga kesehatann gaes..
