Latihan membuat UI Profil Instagram dengan flutter

 

Pada pembahasan kali ini saya akan membagikan latihan mengenai pemrograman mobile khususnya mendesain tampilan profil instagram dengan menggunakan plugin flutter yang terdiri dari bahasa dart

Dari struktur datanya, di dalam folder “lib” terdapat file “main.dart” yang nantinya akan digunakan untuk menjalankan sebuah tampilan profile instagram yang akan di desain, berikut ini adalah isi dari tampilan “main.dart”

 

main.dart

Setelah itu, di dalam folder “lib” akan dibuatkan direktori baru dengan nama “pages” yang akan digunakan untuk menyimpan file “profile.dart”. file profile.dart tersebut yang berfungsi  sebagai program utama dari semua tampilan widget, karena dari semua tampilan widget akan di import dalam file program ini dalam bentuk package yang sudah di ekstrak. Berikut ini adalah tampilan dari file “profile.dart” :

profile.dart

Dari tampilan source code tersebut, sangat terlihat jelas bahwa ada file package yang di import di bagian atas, seperti yang sudah di sebutkan sebelumnya, file package tersebut adalah file program dari semua widget, jadi di dalam folder “lib” akan dibuat sebuah direktori baru lagi dengan nama “widget” yang digunakan untuk menyimpan semua file desain widget yang akan digunakan. Berikut ini adalah file widget tersebut.

1.      picture_profile.dart

picture_profile.dart

2.      info_item.dart

 

info_item.dart

 

3.      story_item.dart

story_item.dart

 

4.      tab_item

tab_item.dart

 

Dan berikut ini adalah hasilnya :

hasil_program

            Jadi itulah, source code beserta hasil yang akan muncul dari source code tersebut, Selamat mencoba.