Hello everyone i have a problem to fetch data from the api
first thing first i will show u the guide of the api for showing images :
Card Images
Images are pulled from our image server images.ygoprodeck.com. You must download and store these images yourself!
Please only pull an image once and then store it locally. If we find you are pulling a very high volume of images per second then your IP will be blacklisted and blocked.
Our card images are in .jpg format and are web optimized.
All of our cloud URLs will either be https://images.ygoprodeck.com/images/cards/ (full size images), https://images.ygoprodeck.com/images/cards_small/ (small size images) or https://images.ygoprodeck.com/images/cards_cropped/ (cropped image art). You pass the ID of the card to retrieve the image.
Example Limit Reverse Card Image: https://images.ygoprodeck.com/images/cards/27551.jpg
The image URLs are found within the JSON response as image_url, image_url_small, and image_url_cropped, all within the card_images array.
Alternative artwork (if available) will also be listed within the card_images array.
Since v3: Card images are now properly returned without slashes being incorrectly escaped as it was with v2.
i have the api link i got the json data and convert it to dart
i have the method i can fetch the data from it and it works of course but i have a problem with displaying the images from the api i will share my code and wait u guys to help me solve this problem
this is the page that i want to show the images and rest of the detail everything from the api is working except the images and i can’t download all the images because and cuz it will be more then 13000 file so will cash them in the device storage anyways here is the the code :
class Home extends GetView<HomecontrollerImp> {
final CardsModel? cardsModel;
const Home({super.key, this.cardsModel});
@override
Widget build(BuildContext context) {
Get.put(HomecontrollerImp());
return Scaffold(
appBar: AppBar(),
body: GetBuilder<HomecontrollerImp>(
builder: (controller) {
if (controller.statusRequest == StatusRequest.loading) {
return Center(child: const Text("loading"));
} else if (controller.statusRequest ==
StatusRequest.offlinefailure) {
return const Text("offlinefailure");
} else {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, childAspectRatio: 0.8),
itemBuilder: (context, index) {
return Column(
children: [
CardsImages(cardImages: CardImages.fromJson(controller.data[index])),
Container(
height: 200,
width: 100,
child: Text(
"${controller.data[index]['name']}",
style: TextStyle(fontSize: 10),
))
],
);
},
);
}
},
));
}
}
and this is the the class for showing the images
class CardsImages extends StatelessWidget {
final CardImages cardImages ;
const CardsImages({super.key, required this.cardImages});
@override
Widget build(BuildContext context) {
HomecontrollerImp controller = Get.put(HomecontrollerImp());
return Image.network("${AppLink.smallimages}}/${cardImages.imageUrlSmall}") ;
}
}
the result of the code after hot restarting
════════ Exception caught by image resource service ════════════════════════════
HTTP request failed, statusCode: 404, https://images.ygoprodeck.com/images/cards_small%7D/null
i guess the problem in my code or i understood the guide in the wrong way
any one can help ??
abstract class Homecontroller extends GetxController {
getdata();
getImages() ;
StatusRequest statusRequest = StatusRequest.initial;
}
class HomecontrollerImp extends Homecontroller {
List data = [];
List getImage = [] ;
HomeData homeData = HomeData(Get.find());
ImageData imageData = ImageData(Get.find()) ;
var isLoading = false;
@override
void onInit() {
getImages() ;
getdata();
update();
super.onInit();
}
@override
getdata() async {
statusRequest = StatusRequest.loading;
var response = await homeData.getData();
statusRequest = handlingData(response);
if (StatusRequest.success == statusRequest) {
data.addAll(response['data']);
}else{
statusRequest = StatusRequest.failure ;
}
update();
}
@override
getImages() async {
statusRequest = StatusRequest.loading;
var response = await imageData.getData();
statusRequest = handlingData(response);
if (StatusRequest.success == statusRequest) {
getImage.addAll(response['data']);
}else{
statusRequest = StatusRequest.failure ;
}
update();
}
}
the app link page :
class AppLink {
static const String server = "https://db.ygoprodeck.com/api/v7/cardinfo.php" ;
static const String smallimages = "https://images.ygoprodeck.com/images/cards_small" ;
}
2
Answers
We can use the
cached_network_image: ^3.2.3
package and load from cached network and another way isreturn Image.network("${AppLink.smallimages}}/${cardImages.imageUrlSmall}") ;
null check and after that show.
Please update :
Also,