Bismillah, Assalamu’alaikum warahmatullahi wabarakatuh,
Haloo sobat uda unii! Semoga dalam keadaan sehat yaa, pada artikel kali ini aku akan sharing cara get data dari Webservice API dengan menggunakan State Management Provider.
Hasil output yang tampil akan tampak seperti berikut :
Pada project ini kita akan membagi file ke dalam beberapa package yaitu model, provider, dan repository.
Pada direktori model kita dapat menambahkan model yang sudah digenerate dari response JSON, seperti berikut :
// To parse this JSON data, do
//
// final resGetDataMahasiswa = resGetDataMahasiswaFromJson(jsonString);
import 'package:meta/meta.dart';
import 'dart:convert';
ResDataMahasiswa resDataMahasiswaFromJson(String str) => ResDataMahasiswa.fromJson(json.decode(str));
String resDataMahasiswaToJson(ResDataMahasiswa data) => json.encode(data.toJson());
class ResDataMahasiswa {
ResDataMahasiswa({
required this.isSuccess,
required this.message,
required this.data,
});
bool isSuccess;
String message;
List<Datum> data;
factory ResDataMahasiswa.fromJson(Map<String, dynamic> json) => ResDataMahasiswa(
isSuccess: json["is_success"],
message: json["message"],
data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"is_success": isSuccess,
"message": message,
"data": List<dynamic>.from(data.map((x) => x.toJson())),
};
}
class Datum {
Datum({
required this.id,
required this.nama,
required this.nim,
required this.jurusan,
required this.alamat,
required this.hp,
});
String id;
String nama;
String nim;
String jurusan;
String alamat;
String hp;
factory Datum.fromJson(Map<String, dynamic> json) => Datum(
id: json["id"],
nama: json["nama"],
nim: json["nim"],
jurusan: json["jurusan"],
alamat: json["alamat"],
hp: json["hp"],
);
Map<String, dynamic> toJson() => {
"id": id,
"nama": nama,
"nim": nim,
"jurusan": jurusan,
"alamat": alamat,
"hp": hp,
};
}
Selanjutnya, pada direktori atau package repository kita dapat menambahkan kodingan untuk kodingan mengambil data dari Webservice dengan nama file yaitu mahasiswa_repository.php
import 'package:crud_provider/model/res_get_mahasiswa.dart';
import 'package:http/http.dart' as http;
class RepoMahasiswa {
final String BaseUrl = "http://192.168.20.210/servermahasiswa/";
Future getMahasiswa() async {
try {
final response = await http.get(Uri.parse(BaseUrl + 'getMahasiswa.php'));
if (resDataMahasiswaFromJson(response.body).isSuccess == true) {
return resDataMahasiswaFromJson(response.body).data;
} else {
return null;
}
} catch (e) {
return e;
}
}
}
final repoMahasiswa = RepoMahasiswa();
Pada kodingan diatas terdapat method getMahasiswa yang digunakan untuk mengambil data dari Webservice API dengan end point yaitu getMahasiswa.php
Selanjutnya kita beralih ke direktori Provider, disini kita tambahkan file mahasiswa_provider.dart
import 'package:crud_provider/model/res_get_mahasiswa.dart';
import 'package:crud_provider/repository/repo_mahasiswa.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
class MahasiswaProvider extends ChangeNotifier{
List<Datum> listMahasiswa = [];
bool isLoading = true;
MahasiswaProvider(){
this.getData();
}
void getData(){
isLoading = true;
notifyListeners();
repoMahasiswa.getMahasiswa().then((value){
isLoading = false;
if(value != null){
listMahasiswa = value;
}
notifyListeners();
});
}
}Nah, disini dapat kita lihat pada class MahasiswaProvider memiliki extends ChangeNotifier yang menandakan class MahasiswaProvider ini memiliki turunan dari ChangeNotifier yang nanti berfungsi sebagai pengirim data ke UI aplikasi. selanjutnya, pada class ini terdapat variable listMahasiwa yang digunakan untuk menyimpan list mahasiswa yang berhasil kita dapatkan dari API. selanjutnya didalam method getData terdapat notifyListeners, jika diibaratkan notifyListeners() ini berfungsi sebagai si pemberi tahu bahwa ada perubahan. seperti ketika user ingin menampilkan data maka notifyListeners() inilah yang memberitahu bahwa user melakukan request data dan ketika berhasil mendapatkan data ia juga yang akan memberi tahu kepada class bahwa data berhasil didapatkan.
Selanjutnya, untuk menggunakan provider kita juga harus menambahkan ChangeNotifierProvider pada widget yang digunakan untuk menampilkan data yang berhasil didapatkan, seperti berikut:
import 'package:crud_provider/model/res_get_mahasiswa.dart';
import 'package:crud_provider/provider/mahasiswa_provider.dart';
import 'package:crud_provider/ui/add_mahasiswa.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (context) => MahasiswaProvider())
],
child: Consumer<MahasiswaProvider>(builder: (context, mhsprovider, _) {
return Scaffold(
appBar: AppBar(
title: Text(
'CRUD Provider',
style:
TextStyle(color: Colors.black, fontWeight: FontWeight.bold),
),
elevation: 0,
backgroundColor: Colors.white,
),
body: Padding(
padding: EdgeInsets.all(10),
child: mhsprovider.isLoading
? Center(
child: CircularProgressIndicator(
color: Color(0xFF37AEEE),
//801E48FF
))
: ListView.builder(
itemCount: mhsprovider.listMahasiswa.length,
itemBuilder: (context, index) {
Datum data = mhsprovider.listMahasiswa[index];
return InkWell(
onTap: () async {
//detail
},
child: Card(
shadowColor: Colors.black,
child: ListTile(
title: Text(
'${data.nama}',
style: TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text(
'${data.nim}',
style: TextStyle(fontWeight: FontWeight.bold),
),
trailing: InkWell(
onTap: () {
},
child: Container(
height:
MediaQuery.of(context).size.height,
width:
MediaQuery.of(context).size.width *
0.1,
child: Icon(
Icons.delete,
color: Color(0xFF1E94F3),
),
),
)),
),
);
},
),
),
floatingActionButton: Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: FloatingActionButton(
backgroundColor: Color(0xFF11BDFF),
foregroundColor: Colors.white,
onPressed: () async {
var result = await Navigator.push(
// Respond to button press
},
child: Icon(Icons.add),
),
),
);
}),
);
}
}
Setelah menambahkan ChangeNotifierProvider, pada setiap widget yang berfungsi sebagai penampung data tambahkan variable mhsprovider yang mebawa nilai yang akan ditampilkan.
Cukup mudah bukan? selamat mencoba yaa, semangat belajar ^ ^