Latihan Dasar Flutter -- Instagram UI

Halo semuaa...

Back lagi dengan aku, pada kesempatan kali ini aku bakal kasih tutorial dasar flutter untuk instagram UI khususnya pada item followersnya.

Hal pertama yang kita lakukan dalam pratik ini adalah kita akan membungkus item followers dengan widget row, fungsi dari row widget sendiri adalah untuk memposisikan sebuah widget-widget lain secara horizontal. Bisa teman-teman lihat bahwa pada gambar di atas, item follow ini memanjang secara horizontal. Kemudian kita akan menambahkan sebuah widget children yang nantinya akan berfungsi untuk menampung widget-widget lain lagi. Dalam widget children kita akan menambahkan lagi sebuah column, mengapa kita menambahkan sebuah widget column? coba teman perhatikan lagi gambar berikut:

Gambar di atas, dimana itemnya itu tersusun secara vertikal. Fungsi dari column adalah untuk menempatkan widget secara menurun atau vertikal. Setelah itu. di dalam column kita akan menambahkan widget children lagi, lalu widget text, kemudian tambahkan TextStyle dengan ukuran font 20 dan tulisannya kita pertebal. Selanjutnya kita akan extract widget columnnya dengan nama InfoIttem, lalu tambahkan parameter di file extratnya dengan cara:

final String tittle;

final String value;

kemudian ganti contracnya dengan kode berikut:

InfoItem(this.tittle, this.value);

dan tambahkan kode ini setelah widget row dan children:

InfoItem("Post", "999k"),

InfoItem("Followers", "999k"),

InfoItem("Following", "999k"),

selanjutnya kita akan membuat jarak pada masing-masing column dengan menggunakan mainAxisAlignment.sapcevenly dan membungkus sebuah widget row yang terdapat kode InfoItem dengan wrap with widget lalu tambahkan Expanded seperti pada gambar di bawah ini:

nah teman-teman mungkin sampai disini dulu yah tutorial kali ini, sekian dari aku

terima kasih

byeeeeeeeee.............

Subscribe to receive free email updates: