Pada task 5 , saya akan membuat sebuah app untuk menampilkan data secara list dan grid menggunakan api yang sudah di sediakan https://reqres.in/api/users?page=2.pengambilan data di lakukan dengan model.

Langkah awal untuk membuat nya adalah mengubah data dari api menjadi sebauh class res untuk app.Untuk mengubah nya menjadi res kita bisa masuk ke dalam sebuah web Bernama quiktype, cara memakai nya adalah mengcopy data yang di dapat dari api dan masukan pada bagian json

Selellah itu atur bahasanya menajdi dart, otomatis akan membuat sebuah dart untuk res, sehingga pemanggilan data dapat di lakukan secara model tampa perlu melihat index yang akan di tampilkan.

Copy semua code data yang di tampilkan , buat sebuah directory res , dan dart res_users

Lanjut pada pembuatan ui , buat directory pages. Pada directory pages terdapat 3 dart yaitu home ,grid,list. Pada home terdapat tabbar pada appbar untuk melakukan navigasi ke halaman grid atau list.

Perlu di deklarasikan sebuah controller untuk tab , dan menambahkan sebuah initstate untuk membuat berapa coloum pada tab

Lanjut pada scaffold buat app bar dan tambahkan button dengan widget tabbar

Pada tabbar tambahkan controller yang tadi di buat,tambahkan tabs untuk content setiap tab bebas bisa memakai text,icon dll

untuk pemanggilan class pada tab cukup dengan memanggil nama halaman pada body , dan tambahkan controller

GRID :

Masuk pada halaman grid , halaman grid adalah halaman yang akan menampilkan data dalam bentuk table, gridview juga memiliki coloum dan row .

Untuk bagian awal tambahkan depedensi untuk htttp karna kita akan melakukan reques data kea pi secara http.

Setelah itu import depedensi pada halaman grid

Deklarasikan welcome untuk mendapatkan data model dari res_users.dart

Seletah di import buat fungsi untuk mendapatkan data dari API,fungsi di beri nama fethandparseData

Dalam fungsi ini melakukan reques data ke API secara http , dan jika mendapat status code 200 maka fungsi akan mengeksekusi data yang ada pada class welcome atau class yang tadi kita dapat dari quiktype

Masukan fungsi tadi ke dalam void initstate agar data dapat berubah atau tampil

Selanjutnya pada tampilan grid , buat sebuah container untuk menampung GridView

Dalam container child nya adalah class welcome dan juga class welcome tidak null maka akan di tampilkan sebuah gridview dengan crossaxisCount 2 atau banyak baris ke samping ada 2

Untuk item yang akan di tampilkan sesuai dengan banyak data pada welcome, dan untuk item builder memakai return dari container , container di buat agak membundar pada sikut agar tidak kaku.lanjut untuk memanggil avatar , dilakukan dengan mengguanakn circle avatar dan latar menggunakan gambar avatar dari data welcome.

               Menampilkan data first & lastname di gabung , buat ukuran 20 dengan text bold, di bawah nya ada email dengan ukuran 10 dan di pisah oleh size box dengan tinggi 5

Jika data belum tampil akan ada loading sampai data ada