Flutter images loading issue after reload display but not first time - flutter

Question

Trying to display cover image based on bookList which is RxList from getX but after hot reload it displays that particular book only. Need to load it instantly as soon as the page load.
Tried setstate too but UI is not updating the first time. Please help. Thank you.
Below is the screenshot images not getting displayed first time but after hot restart.
Here images problem:
HorizontalGrid Widget which based on horizontalGridTitle open the specific book
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:matab/constants/constants.dart';
import 'package:matab/controllers/cart_book_controller.dart';
import 'package:matab/models/book.dart';
import 'package:matab/ui/pages/styles.dart';
import '../../../controllers/book_controller.dart';
import '../../general_widgets/book_magazine_tapbar.dart';
import '../../general_widgets/my_network_image.dart';
import '../item_details/book_details_page.dart';
class HorizontalGrid extends StatefulWidget {
final String horizontalGridTitle;
const HorizontalGrid({Key? key, required this.horizontalGridTitle})
: super(key: key);
#override
State<HorizontalGrid> createState() => _HorizontalGridState();
}
class _HorizontalGridState extends State<HorizontalGrid> {
late RxList<dynamic> bookList;
final BookController bookController = Get.find(tag: 'bookController');
final CartBookController cartBookController =
Get.find(tag: 'cartBookController');
#override
void initState() {
bookList = bookController.getSpecifiedBooks(widget.horizontalGridTitle);
super.initState();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(20.0, 20, 20, 20),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
widget.horizontalGridTitle.tr,
style: TextStyle(
color: secondaryColor,
fontSize: 20,
fontWeight: FontWeight.bold),
),
GestureDetector(
onTap: () {
Get.to(() => BookMagazineTapbar(
titleText: widget.horizontalGridTitle,
));
},
child: Row(
children: [
Text(
"seeAll".tr,
style: TextStyle(
color: mainColor,
fontSize: 20,
fontWeight: FontWeight.bold),
),
Icon(Icons.arrow_forward, color: mainColor)
],
),
)
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 30, 20, 10),
child: Column(
children: [
SizedBox(
width: double.infinity,
height: 140,
child: GridView.builder(
scrollDirection: Axis.horizontal,
shrinkWrap: true,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 1,
),
itemCount: bookList.length,
itemBuilder: (context, index) {
return SizedBox(
child: GestureDetector(
onTap: () {
bookList[index].coverImage;
Get.to(BookDetailsPage(
type: Constants.bookConst,
index: index,
cartButtonText: 'addToCart'.tr,
));
},
child: Obx(
() => CachedNetworkImage(
key: widget.key,
imageUrl: bookList[index].coverImage,
),
)));
},
),
)
],
)),
],
),
);
}
}
This is called based on
getSpecifiedBooks(String title) {
// debugPrint("requested book is $title");
if (title == Constants.recommendedConst) {
debugPrint("recommended requested");
return recommendedBooksList;
} else if (title == Constants.latestByMatabConst) {
return latestBooksList;
} else if (title == Constants.onSaleConst) {
return onSaleList;
} else if (title == Constants.favoritesConst) {
return favoriteBookList;
} else if (title == Constants.allItemsConst) {
return bookList;
} else if (title == Constants.searchConst) {
return bookList;
} else {
return [];
}
}
Afterwards data coming from firebase perfectly in latestBooks:
RxList<dynamic> latestBooks = await databaseService.getLatestBooks();
Future<RxList> getLatestBooks() async {
RxList books = [].obs;
RxInt itemCount = 1.obs;
Query<Map<String, dynamic>> booksQuery = firestoreInstance
.collection('books')
.orderBy('createdAt', descending: true)
.limit(10);
await booksQuery.get().then(
(value) {
for (var doc in value.docs) {
Book bookItem = Book(
author: doc['author'],
title: doc['title'],
price: doc['price'].toDouble(),
coverImage: doc['coverImage'],
bookID: doc.id,
ratings: doc['ratings'].toDouble(),
description: doc['description'],
discountPercentage: doc['discountPercentage'],
isLiked: false,
itemCount: itemCount,
);
books.add(bookItem);
}
},
);
return books;
}
Finally latestBooks is assigned to latestBooksList:
final latestBooksList = [].obs;
latestBooksList.assignAll(latestBooks);