data not rendered in the first time - flutter

Question

currently i'm trying to implement getx to my app, so far so good, i got the data i wanted but i'm kinda having some trouble when i tried to display the data to the screen.
This is where data supposed to be rendered as a horizontal listview
Home Screen
But apparently the data will only appear if i click the promo section and click back to the home section on bottom navigation.
Home Screen 2
Here is my home_controller.dart
class HomeController extends GetxController {
RxList<Hotels> listHotel = <Hotels>[].obs;
RxList<Province> listProvince = <Province>[].obs;
Future getListHotel() async {
final listHotel = await ApiService.getHotel();
this.listHotel.value = listHotel;
}
Future getListProvince() async {
final listProvince = await ApiService.getProvince();
this.listProvince.value = listProvince;
}
#override
void onInit() {
super.onInit();
getListHotel();
getListProvince();
}
}
and this is my home_screen.dart
Widget build(BuildContext context) {
final homeController = Get.put(HomeController());
final authController = Get.put(AuthController());
final orientation = MediaQuery.of(context).orientation;
return Scaffold(
body: SingleChildScrollView(
child: Builder(builder: (context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
SafeArea(
child: Padding(
padding: EdgeInsets.only(
left: 5.w, right: 5.w, top: 100.h <= 667 ? 5.h : 4.h),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Daftar Hotel",
style: TextStyle(
color: const Color(0xffF0B900),
fontSize: 10.sp,
fontWeight: FontWeight.bold),
),
SizedBox(
height: 31.h,
width: orientation == Orientation.landscape
? 100.h
: 100.w,
child: ListView.separated(
shrinkWrap: true,
separatorBuilder: (BuildContext context, int index) {
return SizedBox(
width: 1.h,
);
},
scrollDirection: Axis.horizontal,
itemCount: homeController.listHotel.length,
itemBuilder: (context, i) {
return InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HotelDetailScreen(
id: homeController
.listHotel[i].id,
checkin: checkInController.text
.toString(),
checkout: checkOutController.text
.toString(),
)));
},
child: SizedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
width: 70.w,
height: 20.h,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.network(
homeController.listHotel[i].cover,
fit: BoxFit.cover,
),
),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 8.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
homeController.listHotel[i].name,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 10.sp),
),
SizedBox(
width: 70.w,
child: Text(
homeController.listHotel[i].address,
maxLines: 2,
style: TextStyle(
fontWeight: FontWeight.w300,
fontSize: 10.sp),
overflow: TextOverflow.clip,
),
)
],
),
),
],
)),
);
},
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
"Rekomendasi",
style: TextStyle(
color: const Color(0xffF0B900),
fontSize: 10.sp,
fontWeight: FontWeight.bold),
),
),
SizedBox(
height: 25.h,
width: orientation == Orientation.landscape
? 100.h
: 100.w,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: homeController.listProvince.length,
itemBuilder: (context, i) {
String imageUrl = "http://$CURRENT_URL/image/" +
homeController.listProvince[i].cover;
return InkWell(
onTap: () async {
await launch("https://turu.id/property");
},
child: Padding(
padding: const EdgeInsets.only(right: 8.0),
child: SizedBox(
width: 30.w,
child: Stack(
children: [
SizedBox(
width: 30.w,
height: 25.h,
child: ClipRRect(
borderRadius:
BorderRadius.circular(12),
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
),
),
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(12),
color:
Colors.black.withOpacity(0.2),
),
),
Padding(
padding: EdgeInsets.only(
left: 2.h, bottom: 2.h),
child: Column(
mainAxisAlignment:
MainAxisAlignment.end,
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
Text(
homeController
.listProvince[i].name,
style: TextStyle(
color: Colors.white,
fontSize: 10.sp,
fontWeight:
FontWeight.bold),
),
],
),
)
],
),
),
),
);
}),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
"Promo Mantap",
style: TextStyle(
color: const Color(0xffF0B900),
fontSize: 10.sp,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
],
);
}),
),
);
}
also my index.dart (botnav)
class Index extends StatefulWidget {
const Index({Key? key}) : super(key: key);
#override
_IndexState createState() => _IndexState();
}
class _IndexState extends State<Index> {
int _currentIndex = 0;
final List<Widget> _container = [
const HomeScreen(),
const PromoScreen(),
const BookingStatusScreen(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
body: _container[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: const Color(0xffF0B900),
unselectedItemColor: const Color(0xffAFAFAF),
currentIndex: _currentIndex,
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
label: "Beranda",
),
BottomNavigationBarItem(
icon: Icon(
Icons.price_change_outlined,
),
label: "Promo",
),
BottomNavigationBarItem(
icon: Icon(
Icons.receipt_long_rounded,
),
label: "Transaksi",
),
])
);
}
}
Any help will be appreciated, Thank you.