Home  >> Widget Dasar yang harus dipelajari pada Flutter

Widget Dasar yang harus dipelajari pada Flutter

20 Mei 2020 - Programming - by Admin


Widget Dasar yang harus dipelajari pada Flutter - Apa itu Flutter ? Flutter adalah framework untuk membantu kita dalam membuat aplikasi mobile (IOS maupun Android). Tidak hanya untuk pembuatan aplikasi mobile, Flutter juga bisa digunakan untuk membuat aplikasi berbasis desktop dan website. Jadi Flutter ini sendiri sangat patut untuk dipertimbangkan.

Pada artikel kali ini, kami akan membahas mengenai widget-widget dasar yang harus kita pelajari pada flutter, karena jika kita tidak tahu dasar-dasarnya, kita pun tidak akan bisa melangkah ke tingkat yang lebih tinggi lagi, dan tentunya kita akan kebingungan nantinya jika tidak tahu dasar-dasarnya. Jadi, widget dasar pada Flutter ini harus dipelajar.

Jadi Flutter itu terdiri dari widget-widget, dan ada banyak sekali widget-widget yang ada pada Flutter, tapi saking banyaknya, maka pada artikel ini kami hanya membahas widget dasar-dasarnya saja, dan ini perlu untuk kalian tahu.

Oke kita langsung saja ke pembahasannya.

Widget dasar yang harus dipelajari

Scaffold

Widget dasar yang pertama kali kita harus pelajari adalah widget Scaffold. Widget ini adalah widget utama untuk membuat sebuah halaman aplikasi. Widget ini memiliki beberapa parameter yang digunakan, seperti appBar untuk membuat AppBar, body untuk bagian tubuhnya, dan lain sebagainya.

AppBar 

Widget dasar yang harus kita pelajari dan pahami adalah AppBar. Widget AppBar sendiri berfungsi untuk membuat tampilan pada Bar HP kita. Bar itu adalah menu header yang ada di atas, jadi AppBar mirip seperti menu pada website, nah kalau untuk mobile, itu namanya AppBar.

Pada Android dan IOS, untuk tampilan AppBar nya itu berbeda. Saskarfriends bisa melihat perbedaannya di google. Silahkan dilihat.

Column

Widget dasar selanjutnya yaitu Column. Widget Column sendiri berfungsi untuk membuat tampilan menjadi bentuk vertikal. Dimana jika kita menggunakan widget column, maka tampilan aplikasi kita akan berbentuk menjadi vertikal.

Row

Widget Row sendiri kebalikan dari Column, dimana jika pada widget Column kita membuat tampilan aplikasi berbentuk vertikal, berbeda dengan Row, dimana untuk Row sendiri kita membuat tampilan aplikasi dalam bentuk horizontal, dimana tampilan aplikasi kita akan rata kiri-kanan.

Untuk widget Row dan Column ini juga bisa kita kolaborasikan. 

Container

Untuk Widget Container ini berfungsi untuk membuat sebuah container pada aplikasi mobile kita. Container ini sama seperti tag div pada html. Widget ini bisa juga menampung beberapa widget yang ada dengan menggunakan properti children. Jadi di dalam properti children, saskarfriends bisa memasukkan beberapa widget sekaligus. Jadi itulah gunannya container.

Icon

Tentu saskarfriends sudah bisa tahu sendiri fungsi dari widget. Ya, widget icon ini tentunya untuk membuat icon pada aplikasi kita. Inilah salah satu kehebatan dari flutter, dimana flutter sendiri telah membuat widget icon untuk kita gunakan, jadi berbeda jika kita menggunakan react native, mungkin kalau kita menggunakan icon pada react native, kita harus menginstall library icon nya sendiri, dan ini berbeda pada flutter. Dimana flutter telah menyediakan widget icon untuk kita dapat membuat icon.

Image

Widget ini juga tentunya saskarfriends sudah tahu ya, tahunya dari namanya, hehe. Yaps, widget image ini berfungsi untuk membuat atau memasukan gambar pada aplikasi mobile kita. Karena kalau tanpa gambar, aplikasi kita akan terkesan kaku dan tidak menarik. Dan untuk membuat gambar sendiri pada flutter, cukup mudah, yaitu dengan menggunakan widget image ini.

RaisedButton

Widget ini berfungsi untuk membuat sebuah tombol pada aplikasi kita. Untuk membuat button pada flutter sebenarnya tidak hanya raisedbutton saja, melainkan ada juga button, flatbutton, materialbutton. Tapi yang paling sering kali dipakai adalah raisedbutton.

Text

Tentunya widget ini berfungsi untuk membuat text atau tulisan pada aplikasi kita. Widget Text ini sama seperti tag p, tag h1, h2, h3, dst. Jadi untuk membuat text atau tulisan pada flutter, kita hanya menggunakan widget Text. Dan tentunya widget Text ini memliki beberapa properti, seperti style, dan lain sebagainya.


Untuk referensi dari artikel ini, saskarfriends bisa melihatnya di link berikut : 

https://flutter.dev/docs/development/ui/widgets/basics

Oke saskarfriends, sampai disini dulu artikel kali ini, semoga artikel ini bisa bermanfaat.