9. Get Username & Kategori
Setelah kita berhasil membuat tampilan home sekarang kita akan membuat proses untuk menampilkan datanya menggunakan API yang sudah kita persiapkan
1. Create Model
A. Akses api dengan url http://localhost:457/kategori/list (api ini sudah terintegrasi JWT Token maka untuk mengakses API ini membutuhkan token) menggunakan postman
B. Copy respon yang dikirim API
C. Masukkan pada app.quicktype.io dengan nama model Kategori
D. Buat file baru pada model dengan nama kategori.dart
E. Pastekan model yang sudah digenerate quicktype ke kategori.dart
F. Koneksikan dengan file induknya yakni model.dart
G. Jika terdapat kata dummy (class yang memang sama dengan widget flutter atau namanya terkesan aneh contohnya Datum atau sejenisnya maka kita wajib menggantinya) seperti kode berikut ini :
part of "model.dart";
Kategori kategoriFromJson(String str) => Kategori.fromJson(json.decode(str));
String kategoriToJson(Kategori data) => json.encode(data.toJson());
class Kategori {
String status;
String message;
int count;
List<DataKategori> data;
Pagination pagination;
Kategori({
required this.status,
required this.message,
required this.count,
required this.data,
required this.pagination,
});
factory Kategori.fromJson(Map<String, dynamic> json) => Kategori(
status: json["status"],
message: json["message"],
count: json["count"],
data: List<DataKategori>.from(json["data"].map((x) => DataKategori.fromJson(x))),
pagination: Pagination.fromJson(json["pagination"]),
);
Map<String, dynamic> toJson() => {
"status": status,
"message": message,
"count": count,
"data": List<dynamic>.from(data.map((x) => x.toJson())),
"pagination": pagination.toJson(),
};
}
class DataKategori {
int id;
String namaKategori;
String gambarKategori;
CreatedBy createdBy;
dynamic updatedBy;
DataKategori({
required this.id,
required this.namaKategori,
required this.gambarKategori,
required this.createdBy,
required this.updatedBy,
});
factory DataKategori.fromJson(Map<String, dynamic> json) => DataKategori(
id: json["id"],
namaKategori: json["nama_kategori"],
gambarKategori: json["gambar_kategori"],
createdBy: CreatedBy.fromJson(json["created_by"]),
updatedBy: json["updated_by"],
);
Map<String, dynamic> toJson() => {
"id": id,
"nama_kategori": namaKategori,
"gambar_kategori": gambarKategori,
"created_by": createdBy.toJson(),
"updated_by": updatedBy,
};
}
class CreatedBy {
int id;
String nama;
CreatedBy({
required this.id,
required this.nama,
});
factory CreatedBy.fromJson(Map<String, dynamic> json) => CreatedBy(
id: json["id"],
nama: json["nama"],
);
Map<String, dynamic> toJson() => {
"id": id,
"nama": nama,
};
}
2. Create Controller
Setelah kita membuat model atau kerangka datanya sekarang kita akan membuat prosesnya untuk mendapatkan username & kategori maka dari itu silahkan buat file baru pada folder controller dengan nama homeController.dart.
3. Get Username
Kita akan memulai proses yang pertama yaitu get username pada homeController.dart buatkan get username seperti dibawah ini :
class HomeController {
Future getName() async {
final SharedPreferences prefs = await SharedPreferences.getInstance();
Login dataUser = loginFromJson(prefs.getString("isLogin").toString());
return dataUser.data.nama;
}
}
Selanjutnya kita akan implementasikan pada homePage.dart
class _HomePageState extends State<HomePage> {
String nama = "Fullan";
@override
void initState() {
HomeController().getName().then((value) {
setState(() {
nama = value;
});
});
super.initState();
}
@override
//Start hello
Container(
margin: EdgeInsets.only(bottom: tinggi * 0.03),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
margin: EdgeInsets.only(right: 10),
child: CircleAvatar(
backgroundColor: Color.fromARGB(255, 252, 211, 64),
child: Icon(Icons.person),
),
),
Text("Hello, ${nama}",
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontSize: 20, fontWeight: FontWeight.w500)))
],
),
Icon(Icons.notifications)
],
),
),
//end hello
Keterangan
- untuk memanggil function yang telah kita buat di controller kita hanya perlu memanggil nama controllernya dan nama function yang kita sudah buat sebelumnya
thenadalah sebuah proses untuk mengecek return yang dihasilkan prosesinitStatesebuah aktivitas yang dijalankan sebelum widget terbuat jadi sebelum widget terbuat proses akan berjalan terlebih dahulu
4. Get Data Kategori
Setelah username kita telah dapatkan sekarang kita akan mengambil data kategori yang ada di database. Pada pengambilan data ini agar tampilannya menarik kita perlu menggunakan package shimmer (silahkan di add terlebih dahulu pada project). Selanjutnya kita akan mulai membuat prosesnya :
Future getKategori() async {
await Future.delayed(Duration(seconds: 3));
String url = "${dotenv.env['IP']}/kategori/list";
Uri urlData = Uri.parse(url);
final SharedPreferences prefs = await SharedPreferences.getInstance();
Login dataUser = loginFromJson(prefs.getString("isLogin").toString());
String token = "Bearer ${dataUser.data.accessToken}";
final respon = await http.get(urlData, headers: {"Authorization": token});
if (respon.statusCode == 200) {
Kategori data = kategoriFromJson(respon.body);
return data.data;
} else {
return null;
}
}
Lalu kita implementasikan pada tampilan home page:
//start category
Judul("Choose Category", "See All", tinggi),
FutureBuilder(
future: HomeController().getKategori(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
List<DataKategori> data = snapshot.data;
return Container(
margin: EdgeInsets.only(bottom: tinggi * 0.03),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Wrap(
spacing: 20,
children: List.generate(data.length, (index) {
return Category(data[index].namaKategori,
data[index].gambarKategori, lebar);
})),
));
} else {
return Shimmer.fromColors(
baseColor: Colors.grey.shade300,
highlightColor: Colors.grey.shade100,
child: Container(
margin: EdgeInsets.only(bottom: tinggi * 0.03),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Wrap(
spacing: 20,
children: List.generate(3, (index) {
return Category(
"Category",
"https://i.ibb.co/vPnDfxZ/play-circle.png",
lebar);
})),
)));
}
},
),
//end category
Keterangan
- pada home controller kita menggunakan delay agar bisa mengecek proses shimmer (karena kita masih menggunakan API local yang loadingnya cepat maka kita berikan delay)
- seperti yang dijelaskan di awal untuk mengakses API kategori kita membutuhkan token maka dari itu kita dapat mengambil token yang sudah tersimpan pada shared preferences
- untuk metode get lakukan http.get, untuk token kita dapat mengirimkannya menggunakan header
FutureBuilder: sebuah widget yang digunakan untuk perulangan dari prosesFutureyang memiliki 2 parameter yang harus diisi yakni. Future = prosesnya (harus function future) & Builder = aksinya- Pada future builder disini ada 2 kondisi dimana ketika prosesnya belum selesai akan menampilkan loading yang berbentuk shimmer & jika prosesnya sudah selesai maka akan menampilkan datanya