[Flutter] Connect the API to the UI in Flutter using Getx

I'm trying to connect the API to the UI in a flutter. I created Json class, product controller,product models and API services. But when running this code, I got a blank page. I can't find the list of data.

Could anyone please help to solve this? Thanks in advance!

Product list view Code:

class ProductListView extends StatelessWidget {
final ProductController productController = Get.put(ProductController());

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(AppString.productList),
),
body: Obx(() {
if (productController.isLoading.value)
return Center(
child: CircularProgressIndicator(),
);
else
return ListView.builder(
itemCount: productController.productList.length,
itemBuilder: (context, index) {
return Column(
children: [
Row(
children: [
Container(
width: 150,
height: 100,
margin: EdgeInsets.fromLTRB(16, 8, 8, 8),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.network(
productController.productList[index].imageLink,
width: 150,
height: 100,
fit: BoxFit.fill,
color: AppColor.purplecolor,
colorBlendMode: BlendMode.color),
),
),
Flexible(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
productController.productList[index].title,
style: TextStyle(fontSize: 18),
),
Text(
productController
.productList.value[index].description,
style:
TextStyle(fontSize: 18, color: AppColor.grey),
),
Text(
productController.productList[index].brand,
style:
TextStyle(fontSize: 18, color: AppColor.grey),
),
Text(
productController.productList[index].price,
style:
TextStyle(fontSize: 18, color: AppColor.grey),
),
],
),
),
],
),
Container(
color: AppColor.grey200,
height: 2,
),
],
);
},
);
}),
);
}
}


Product Model code:

import 'dart:convert';

List<ProductModel> productModelFromJson(String str) => List<ProductModel>.from(
json.decode(str).map((x) => ProductModel.fromJson(x)));

String productModelToJson(List<ProductModel> data) =>
json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class ProductModel {
int? id;
String? title;
String? description;
int? price;
double? discountPercentage;
double? rating;
int? stock;
String? brand;
String? category;
String? thumbnail;
List<String>? images;

ProductModel(
{this.id,
this.title,
this.description,
this.price,
this.discountPercentage,
this.rating,
this.stock,
this.brand,
this.category,
this.thumbnail,
this.images});

ProductModel.fromJson(Map<String, dynamic> json) {
id = json['id'];
title = json['title'];
description = json['description'];
price = json['price'];
discountPercentage = json['discountPercentage'];
rating = json['rating'];
stock = json['stock'];
brand = json['brand'];
category = json['category'];
thumbnail = json['thumbnail'];
images = json['images'].cast<String>();
}

Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['title'] = this.title;
data['description'] = this.description;
data['price'] = this.price;
data['discountPercentage'] = this.discountPercentage;
data['rating'] = this.rating;
data['stock'] = this.stock;
data['brand'] = this.brand;
data['category'] = this.category;
data['thumbnail'] = this.thumbnail;
data['images'] = this.images;
return data;
}
}



Product model class declaration in product controller:

RxList productList = <ProductModel>[].obs;

Continue reading...