[ BUG ] : The cards are being redrawn whenever one card moves

[markhallak]

Plugin name Appinio Swiper

Describe the bug Whenever the top card moves one pixel, all the cards are being redrawn. Now imagine when the user swipes the top card all the way to the left, all the cards will be redrawn many times. This sudden unnecessary workload (kind of a burst load) really leads to several issues mainly not being able to save the state of the cards even if they are stateful and each card is using a global key.

To Reproduce Steps to reproduce the behavior:

1. For each card, add a number that is being generated randomly using the random class

Expected behavior The card state should be preserved and the cards shouldn't be redrawn.

Smartphone:

• Device: S22 Ultra
• OS: Android 14

[markhallak]

Update: I solved the problem by using Provider (saved the card state) but it made the code unnecessarily complicated and it shouldn't be like this.

[khanmujeeb687]

Hey @markhallak , The cards needs to redraw because of the change in their size when we swipe. The issue that the state is not being maintained is maybe due to the implementation. Because I created a timer for every card and the state is being maintained for Every card. Here is the code for the exampleCard. You can try this and if the issue persists, reopen this issue.

class ExampleCard extends StatefulWidget {
  final ExampleCandidateModel candidate;

  const ExampleCard({
    Key? key,
    required this.candidate,
  }) : super(key: key);

  @override
  State<ExampleCard> createState() => _ExampleCardState();
}

class _ExampleCardState extends State<ExampleCard> {
  late Timer _timer;
  int a = 0;

  @override
  void initState() {
    _timer = Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() {
        a++;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
    _timer.cancel();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: CupertinoColors.white,
        boxShadow: [
          BoxShadow(
            color: CupertinoColors.systemGrey.withOpacity(0.2),
            spreadRadius: 3,
            blurRadius: 7,
            offset: const Offset(0, 3),
          )
        ],
      ),
      alignment: Alignment.center,
      child: Column(
        children: [
          Flexible(
            child: Container(
              decoration: BoxDecoration(
                gradient: widget.candidate.color,
                borderRadius: const BorderRadius.only(
                  topLeft: Radius.circular(10),
                  topRight: Radius.circular(10),
                ),
              ),
            ),
          ),
          Container(
            padding: const EdgeInsets.all(15),
            decoration: const BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(10),
                bottomRight: Radius.circular(10),
              ),
            ),
            child: Row(
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      a.toString() + " : " + widget.candidate.name!,
                      style: const TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 20,
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    Text(
                      widget.candidate.job!,
                      style: const TextStyle(
                        color: Colors.grey,
                        fontSize: 15,
                      ),
                    ),
                    const SizedBox(
                      height: 5,
                    ),
                    Text(
                      widget.candidate.city!,
                      style: const TextStyle(
                        color: Colors.grey,
                        fontSize: 15,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}