State Management Provider #Flutter Indonesia Part 2

Asslamu’alaikum Wr. Wb.

Hallo sobat flutter kembali lagi di posting saya , pada postingan kali ini saya akan membahas kelanjutan tentang State Management Provider Jika kalian belum mengengerti apa itu state management kalian bisa lihat postingan saya yang sebelumnya kalian dapat mengunjungi postingan sebelumnya dengan klik link dibawah ini :

State Management Provider #Flutter Indonesia Part 1

Okeh kali ini saya akan melanjutkan dari postingan sebelumnya setelah kita mengedit file main.dart maka akan muncul line merah disana karena kita belum membuat class baru untuk class BlocUser

1. Sebelumnya disini kita akan menggunakan webservice api sample dari https://jsonplaceholder.typicode.com/users
2. Selanjutnya setelah kita buka webservice tadi kalian bisa buat model nya dengan menggunakan generate https://quicktype.io/ dan beri nama classnya ModelUser
3. Maka kita pastekan kedalam file ModelUser maka kurang lebih seperti ini

4. Kemudian kita edit file BlocUser tadi dengan membuat sebuah class baru seperti dibawah ini dengan mengextends ChangeNotifier agar jika ada perubahan data maka akan selalu terekam:

class BlocUser extends ChangeNotifier{
  
}

5. Setelah itu kita buat variable untuk getter dan setter nya disini getter dan setter ini biasa saya sebut dengan prototype fungsinya untuk menyimpan data sementara yang sewaktu waktu bisa berubah, didalam prototype ini terdapat variable local yang mana dia menyimpan data semetara dari json koneksi json lalu di lemparkan kembali kepada variable global yang mana variable global akan dipanggil di setiap class yang membutuhkan

6. Kita buat prototype nya terlebih dahulu dengan mengetikan code berikut ini :

import 'dart:convert';

import 'package:flutter/foundation.dart';
import 'package:wisata_pattern_provider/model/ModelUser.dart';
import 'package:http/http.dart' as http;

class BlocUser extends ChangeNotifier{
  
  //Prototype get list data from json
  List<ModelUser> _user;
  List<ModelUser> get listUser => _user;
  set listUser(List<ModelUser> val){
    _user=val;
    notifyListeners();
  }
}

7. Lalu kita buat koneksi untuk ke webservice nya dengan menggunakan http dan dengan menambahkan source code berikut ini :

class BlocUser extends ChangeNotifier{
.... 
  //Connection to api webservice database
  Future<List<ModelUser>> fecthData()async{
    final response = await http.get('https://jsonplaceholder.typicode.com/users/');
    List myData = modelUserFromJson(response.body);
    print("MyData : " + myData.toString());
    listUser = myData;
    return listUser;
  }
}

8. Barulah kita buat tampilan homenya dengan mengetikan source code berikut ini :

9. Setelah itu kalian bisa running project kita maka kurang lebih tampilannya seperti ini :

Mungkin cukup sekian postingan kali ini semoga bermanfaat jangan lupa share, comment agar saling berbagi untuk postingan selanjutnya yaitu di part 3 kita akan buat detailnya kalian bisa klik link dibawah ini :