How to show json data in flutter carousel slider - flutter

Question

I am creating a slider where I want to show json data in carousel slider the data will be coming from API ofcourse
What are the steps need for that can you guys guide me like have to create http method to first read data.
CarouselSlider(
options: CarouselOptions(
aspectRatio: 1.5,
viewportFraction: 0.95,
enlargeStrategy: CenterPageEnlargeStrategy.height,
enlargeCenterPage: true,
reverse: false,
enableInfiniteScroll: true,
autoPlay: true,
autoPlayAnimationDuration: const Duration(milliseconds: 900),
initialPage: initialPage,
onPageChanged: (index, reason) {
setState(() {
initialPage = index;
debugPrint('$initialPage');
});
}),
items: Category.categories
.map((category) => HeroCarouselCard(category: category))
.toList(),
),
This is something I was firstly doing Category.categories is another equatable class where I was storing static data.
[
{
"CarouselName": "Others",
"CarouselDescription": "A smartphone and tablet-based solution to register and report Factory Assembly Line Inspection information.",
"CarouselImage": "banner3.png"
},
{
"CarouselName": "Production",
"CarouselDescription": "Grow your business",
"CarouselImage": "banner1.jpg"
}
]
following is the json that I wanna use
If I get a complete example would be great for me dont't wanna use getx

Answer 1

The best and easy way is to create a future builder and in future pass the api call in my case I have used http request to fetch all the data.
Container(
margin: const EdgeInsets.symmetric(
horizontal: 10, vertical: 10),
width: MediaQuery.of(context).size.width,
child: FutureBuilder(
future: future,
builder: (context, snapshot) {
final items = snapshot.data;
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return const Center(
child: RepaintBoundary(
child: HomeCardShimmerEffect()),
);
default:
if (snapshot.hasError) {
return Center(
child: Column(
children: [
const Text(
'Something went Wrong Please try again'),
const SizedBox(
height: 5,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const BottomNavBar()));
},
child: const Text('Try Again'))
],
));
} else {
return HomeCardWidget(items: items!);
}
}
}),
)
Step 2:
Is to use Carousel.Builder instead of Carousel Simple and pass it items builder
and else it will work same as the data you show in listview.builder or gridview.builder
Passing context and fetching data according to that.
Hopefully this will be helpfull.