Flutter | Carousel Slider

slider.dart

import 'dart:developer';

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flightspy/config/palette.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:iconsax/iconsax.dart';

// TODO: FIXME Temp solution for preserved backend request
Future<String> getPromos(int number) async {
  return await 'test';
}

class CarouselSliderWidget extends HookWidget {
  // Slides count
  final int slides = 5;
  late final PageController pageController =
      PageController(initialPage: 0, viewportFraction: 0.85);
  final ScrollController scrollController = ScrollController();
  late final Timer? carouselTimer;

  @override
  Widget build(BuildContext context) {
    final page = useState<int>(0);
    // final Brightness brightness = MediaQuery.of(context).platformBrightness;

    Timer getTimer() {
      return Timer.periodic(Duration(seconds: 3), (timer) {
        if (page.value == 4) {
          page.value = 0;
        } else {
          page.value++;
        }

        pageController.animateToPage(
          page.value,
          duration: Duration(seconds: 1),
          curve: Curves.easeInOutCubicEmphasized,
        );
      });
    }

    useEffect(
      () {
        // initState
        carouselTimer = getTimer();
        return () {
          // dispose
          pageController.dispose();
          carouselTimer?.cancel();
        };
      },
      [], // didUpdateWidget
      // null: fires in every change
      // empty list: fires only once on the first time
      // list with items: fires when any of the items on the list change.
    );

    return FutureBuilder<dynamic>(
      future: getPromos(slides),
      builder: (context, snapshot) {
        var composition = snapshot.data;
        if (composition != null) {
          return Stack(
            children: [
              Column(
                children: [
                  SizedBox(
                    height: 200,
                    child: PageView.builder(
                      controller: pageController,
                      physics: BouncingScrollPhysics(),
                      onPageChanged: (index) => page.value = index,
                      itemBuilder: (_, index) {
                        return AnimatedBuilder(
                          animation: scrollController,
                          builder: (ctx, child) {
                            return child!;
                          },
                          child: GestureDetector(
                            onTap: () {
                              ScaffoldMessenger.of(context).showSnackBar(
                                SnackBar(
                                  content:
                                      Text("Hello you tapped at ${index + 1} "),
                                ),
                              );
                            },
                            // onPanDown: (d) {
                            //   carouselTimer?.cancel();
                            //   carouselTimer = null;
                            // },
                            // onPanCancel: () {
                            //   carouselTimer = getTimer();
                            // },
                            child: Container(
                              margin: EdgeInsets.only(
                                top: 12.0,
                                left: 8.0,
                                right: 8.0,
                                bottom: 12.0,
                              ),
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(24.0),
                                color: Palette.primary[80],
                              ),
                            ),
                          ),
                        );
                      },
                      itemCount: slides,
                    ),
                  ),
                ],
              ),
              Container(
                margin: EdgeInsets.only(top: 150.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(
                    slides,
                    (index) => GestureDetector(
                      child: Container(
                        margin: EdgeInsets.all(2.0),
                        child: Icon(
                          Iconsax.security,
                          size: 22.0,
                          color: page.value == index
                              ? Colors.indigoAccent
                              : Colors.grey.shade300,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          );
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}