Pada artikel kali ini, ane akan membagikan beberapa hal penting untuk menguasai pembuatan aplikasi menggunakan flutter versi gepcode.com . Pastinya, ini wajib kalian ketahui dan mengerti secara mendalam nantinya. Skuy langsung saja ikuti tulisan di bawah. Oiya setiap judul-judul dibawah, nantinya akan saya buatkan juga tulisannya. Jadi, jangan sampai ketinggalan ya.

1. Object Oriented Programming

Seperti yang sudah ane katakan pada artikel sebelumnya. Flutter memiliki keunikan tersendiri, yaitu almost everything is widget, dan widget itu sendiri merupakan sebuah object yang direpresentasikan di bahasa pemrograman dart. So, jika kalian ingin belajar flutter, sangat ane anjurkan untuk belajar Object Oriented Programming (OOP) bahasa pemrograman dart. Sebab, akan sangat sulit untuk memahami bagaimana flutter merender UI jika kalian tidak tau OOP.

2. Widget

Widget adalah komponen dasar pada flutter, dan memang ini ditekankan oleh flutter. Disetiap widget, selalu ada context yang merepresentasikan dimana widget berada.

3. Basic Design

Jika sudah mempelajari OOP Dart, kalian wajib mengetahui dasar-dasar pembuatan design. Jika kalian memiliki pengalaman dalam web design, atau pengalaman dalam pembuatan UI & UX design seperti pada aplikasi figma dan sejenisnya. Maka sebagian besar pasti akan mudah dimengerti. Disini saya membuat list untuk dasar-dasar pembuatan design yang wajib kalian ketahui.

- Color

   Color atau warna dituliskan dengan menggunakan kode. Penulisan warna dalam pemrograman ada beberapa macam. tolong disimak ya.

1. Hexadecimal - penulisan warna ini lebih sering digunakan di aplikasi untuk design, pun web programming. Contoh penulisan #000000 yang akan menghasilkan warna hitam, dan #FFFFFF yang akan menghasilkan warna putih. Dalam penulisan hexa decimal, huruf maksimal pasti hanya sampai dengan Huruf F, sedangkan angkanya antara 0 sampai 9. Panjang dari hexadecimal ini adalah 6 karakter.
2. RGB - Red Green Blue, penulisan warna ini tersusun dari Merah Hijau dan Biru. Setiap parameter dari ketiga warna tersebut direpresentasikan dengan angka 0 hingga 255
3. RGBA - Red Green Blue Alpha, sama dengan RGB namun alpha disini digunakan untuk merepresentasikan transparency warna, nilai Alpha biasanya 0 sampai dengan 1.

   Nah, hal-hal diatas merupakan beberapa cara untuk menulis warna pada web design. Untuk flutter bagaimana? Flutter memiliki object sendiri yang bernama Color() object ini hanya menerima parameter integer, jadi penulisan warna pada flutter:

1. Hexa - Color(0xff000000) akan menghasilkan warna hitam.
2. Untuk opacity atau alpha kita bisa menggunakan .withOpacity() lalu masukkan angka transparency-nya.

- Typography

   Typography merupakan metode seni penulisan yang dikombinasikan dalam bahasa pemrograman, bahasa markup, cascading, dan lain sebagainya yang bersangkutan dengan teknis. Hal dasar dalam typography yang wajib kalian ketahui.

1. Font family - Jenis huruf design aktual yang merepresentasikan tulisan.
   
2. Font size - Ukuran font
3. Font weight - Ketebalan font
4. Font color - Warna font
5. Font style - Biasanya ini terdiri atas underline , dan strike
6. Text alignment - penjajaran text, biasanya terdiri dari, center, justify, right/end, start/left
7. Text direction - dari kiri ke kanan atau kanan kekiri
8. Line height - tinggi baris disetiap paragraph
9. Letter spacing - atau spasi per huruf.
10. Heading - Representasi dari judul sebuah paragraph, heading/judul ini biasanya memiliki komposisi 1 sampai 6.
11. Paragraph
12. Span - atau bisa dibilang inline text

- Box

   Kenapa wajib mengetahui box? setiap UI memiliki box-box untuk diimplementasikan. Box biasanya digunakan dalam pembuatan button (tombol), pembungkus suatu object, meletakkan text, dan masih banyak lagi. Tentunya box merupakan element yang sangat penting untuk diketahui.

   Contoh box:

 Kotak doang kan. Selanjutnya kalian bisa mengoles dengan border radius. seperti ini contohnya

Sudah kelihatan ya border radius seperti apa. Lalu ada lagi hal dasar yang wajib diketaui dalam basic design. Yaitu, box shadow. Contohnya:

Sudah terlihat ya, box shadow itu bayangan. Ini juga sangat penting nantinya.

4. Library Manager

Jika kalian belum mengetahui apa itu library, library merupakan kumpulan kode untuk membantu pekerjaan kita. Nah, flutter ini memiliki library manager sendiri namanya pub.dev . Cara installasi library-nya pun tidak ribet. Nanti kita akan lanjut pada tulisan artikel selanjutnya ya. disini cuma pengetahuan saja. agar tidak terlalu banyak tulisan, mengurangi kebosanan membaca, dan agar web ini tidak terlalu banyak merender text, hihi.

5. State Management

Flutter tidak berbasis pada Document Object Model (DOM), melainkan berbasis pada state manager. So, buat kalian yang memiliki background web developer dan tidak ada pengalaman pada react, dan beberapa framework javascript yang menggunakan state manager tentunya harus beradaptasi lagi. Namun, dibandingkan DOM, state lebih simple dan mudah di maintain. State digunakan sebagai global variable yang men-triger perubahan UI ketika.

5 dasar yang sangat wajib diketahui ini merupakan perjalanan panjang nantinya. Setiap 5 dasar ini akan ane tuliskan di chapter-chapter berikutnya. Terimakasih telah membaca, semoga sehat slalu.