Swiper: Detect which card is in top?

[simplenotezy]

Does anybody know of an easy way to detect which card is in top? I'm asking because Im considering adding a blurred overlay behind the swiped card, that will gradually blur in as your drag the card more and more.

But I am no sure how to do this, one way would be to add an overlay to the cards[] widget, that is not shown on the card currently in front.

[khanmujeeb687]

hey @simplenotezy , you can use code below to detect which card is in background and apply overlay.

import 'dart:developer';
import 'dart:ui';
import 'package:flutter/cupertino.dart';

import 'package:appinio_swiper/appinio_swiper.dart';
import 'package:example/example_candidate_model.dart';
import 'package:example/example_card.dart';
import 'package:flutter/material.dart';
import 'example_buttons.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  State<Example> createState() => _ExamplePageState();
}

class _ExamplePageState extends State<Example> {
  final AppinioSwiperController controller = AppinioSwiperController();
  int backgroundCardIndex = 1;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Column(
        children: [
          const SizedBox(
            height: 50,
          ),
          SizedBox(
            height: MediaQuery.of(context).size.height * 0.75,
            child: AppinioSwiper(
              swipeOptions: AppinioSwipeOptions.vertical,
              unlimitedUnswipe: true,
              controller: controller,
              unswipe: _unswipe,
              onSwipe: _swipe,
              padding: const EdgeInsets.only(
                left: 25,
                right: 25,
                top: 50,
                bottom: 40,
              ),
              onEnd: _onEnd,
              cardsCount: candidates.length,
              cardsBuilder: (BuildContext context, int index) {
                Widget exampleCard = ExampleCard(candidate: candidates[index]);
                if (backgroundCardIndex == index) {
                  return Container(
                    decoration: const BoxDecoration(
                      color: Colors.black,
                    ),
                    child: Stack(
                      children: [
                        exampleCard,
                        Container(
                          child: BackdropFilter(
                            filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
                            child: Container(
                              color: Colors.black.withOpacity(0.5),
                            ),
                          ),
                        )
                      ],
                    ),
                  );
                }
                return exampleCard;
              },
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const SizedBox(
                width: 80,
              ),
              swipeLeftButton(controller),
              const SizedBox(
                width: 20,
              ),
              swipeRightButton(controller),
              const SizedBox(
                width: 20,
              ),
              unswipeButton(controller),
            ],
          )
        ],
      ),
    );
  }

  void _swipe(int index, AppinioSwiperDirection direction) {
    backgroundCardIndex = index + 1;
    log("the card was swiped to the: " + direction.name);
  }

  void _unswipe(bool unswiped) {
    if (unswiped) {
      backgroundCardIndex--;
      log("SUCCESS: card was unswiped");
    } else {
      log("FAIL: no card left to unswipe");
    }
  }

  void _onEnd() {
    log("end reached!");
  }
}