Make Carousel Slider From Sticky Post -WordPress Website To Flutter App

SliderCard Code

class SliderCard extends StatelessWidget {
  final String imgUrl;
  const SliderCard({super.key, required this.imgUrl});

  @override
  Widget build(BuildContext context) {
    return  Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      child: ClipRRect(
        borderRadius: const BorderRadius.all(Radius.circular(10)),
        child: CachedNetworkImage(
          imageUrl:  imgUrl,
          progressIndicatorBuilder: (ctx, url, progress)=>
           const ShimmerView(),
          fit: BoxFit.cover,
          width: double.infinity,
        ),
      ),
    );
  }
}

ShimmerView Code

class ShimmerView extends StatelessWidget {
  const ShimmerView({super.key});

  @override
  Widget build(BuildContext context) {
    return  Shimmer.fromColors(
      baseColor: Colors.grey,
      highlightColor: Colors.white,
      child: Container(
        margin: const EdgeInsets.all(10),
        decoration: const BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.all(Radius.circular(10))
        ),
        child: AspectRatio(
          aspectRatio: 16/7,
          child: Container(color: Colors.grey,),
        )
      ),
    );
  }
}

CarouselSliderView Code

class CarouselSliderView extends StatefulWidget {

  final List<SliderBanner> sliderList;
  const CarouselSliderView({super.key, required this.sliderList});

  @override
  State<CarouselSliderView> createState() => _CarouselSliderViewState();
}

class _CarouselSliderViewState extends State<CarouselSliderView> {

  int _currentIndex = 0;
  late List<Widget>_sliderList;

  @override
  void initState() {
    _sliderList = widget.sliderList.map((e) => SliderCard(imgUrl: e.image)).toList();
    print("widget.sliderList.length");
    print(widget.sliderList.length);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return  Column(
      children: [
        CarouselSlider(
          items: _sliderList,
          options: CarouselOptions(
            autoPlay: true,
            enlargeCenterPage: true,
            aspectRatio: 16/7,
            animateToClosest: true,
            onPageChanged: (i, res){
              setState(() {
                _currentIndex = i;
              });
            }
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: widget.sliderList.map((i) {
            int pos = widget.sliderList.indexOf(i);
            return Container(
              width: 8,
              height: 8,
              margin: const EdgeInsets.symmetric(vertical: 5, horizontal: 3),
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: _currentIndex==pos? Colors.redAccent : Colors.grey
              ),
            );
          }).toList()
        ),
      ],
    );
  }
}

HomeScreen Code

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  HomeController homeController = HomeController.instence;

  @override
  Widget build(BuildContext context) {
    return SafeArea(child: Column(
      children: [
        const MainHeader(),
        Obx(() {
          if(!homeController.isSliderLoading.value){
           return CarouselSliderView(sliderList: homeController.sliderList);
          }else{
            return const ShimmerView();
          }
        })
      ],
    )
    );
  }
}

Make Carousel Slider From Sticky Post Tutorial Part 2

Pages: 1 2