naderidev / flet-carousel

simple carousel sliders for flet framework

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add transition property like `blur` ?

baseplate-admin opened this issue · comments

Hi i was wondering if it was possible to add transition to your carousel?

Here is how i implemented it using dart:

class Carousel extends StatefulWidget {
  const Carousel({
      super.key,
      required this.width,
      required this.height,
      required this.data,
      this.backgroundColor = Colors.black});

  final double width;
  final double height;
  final Color? backgroundColor;
  final List<Map<String, String>> data;

  @override
  State<Carousel> createState() => _CarouselState();
}

class _CarouselState extends State<Carousel> {
  bool isBlurShown = false;
  late int _index;

  @override
  void initState() {
    isBlurShown = false;
    _index = 0;
    super.initState();
  }

  void addBlur() {
    isBlurShown = true;
    Timer(const Duration(milliseconds: 200), () {
      setState(() {
        isBlurShown = false;
      });
    });
  }

  void addOneToIndex() {
    setState(() {
      if (_index + 1 == widget.data.length) {
        _index = 0;
      } else {
        _index += 1;
      }
      addBlur();
    });
  }

  void minusOneToIndex() {
    setState(() {
      if (_index == 0) {
        _index = widget.data.length - 1;
      } else {
        _index -= 1;
      }

      addBlur();
    });
  }

  @override
  Widget build(BuildContext context) {
    var specificData = widget.data.elementAt(_index);

    return GestureDetector(
        onHorizontalDragEnd: (dragEndDetails) {
          // Swiping in right direction.
          if (dragEndDetails.primaryVelocity! < 0) {
            addOneToIndex();
          }

          // Swiping in left direction.
          else if (dragEndDetails.primaryVelocity! > 0) {
            minusOneToIndex();
          }
        },
        child: SizedBox(
          width: widget.width,
          height: widget.height,
          child: AnimatedSwitcher(
            duration: const Duration(milliseconds: 300),
            transitionBuilder: (Widget child, Animation<double> animation) {
              return FadeTransition(opacity: animation, child: child);
            },
            child: DecoratedBox(
              key: ValueKey<int>(_index),
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage(specificData['background_image']!),
                    fit: BoxFit.cover),
              ),
              child: isBlurShown
                  ? BackdropFilter(
                      filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
                      child: Container(
                        decoration:
                            BoxDecoration(color: Colors.white.withOpacity(0.0)),
                      ),
                    )
                  : const Placeholder(),
            ),
          ),
        ));
  }
}