'enableInfiniteScroll: false' doesn't work when setState is used in onPageChanged

[ronny-strath]

Hello,
I've encountered an issue where when I try to set the value on a variable using setState inside the onPageChanged call, it causes infinte scroll to be enabled, even though I have enableInfiniteScroll set to 'false'. Am I doing something wrong?

This is my code:

CarouselSlider(
          items: promos,
          options: CarouselOptions(
            height: 150,
            viewportFraction: 0.8,
            enlargeCenterPage: true,
            enableInfiniteScroll: false,
            onPageChanged: (int index, CarouselPageChangedReason reason) {
              print(index);
              setState(() {
                promoIndex = index;
              });
            }
          ),
        ),

Thanks!

[kishan-dhankecha]

Hi @ronny-strath, I am now working to provide support for this package on my own fork. I would like to help you with this issue. Can you please provide full reproducible code sample for this issue.

[jishnulal-crypto]

"" I've encountered an issue where when I try to set the value on a variable using setState inside the onPageChanged call, it causes infinte scroll to be enabled, even though I have enableInfiniteScroll set to 'false'. Am I doing something wrong? ""

can i get more details about this issue

[kishan-dhankecha]

@jishnulal-crypto Can you please share the reproducible code?

[jishnulal-crypto]

iam asking to fix the issue , if it is not fixed

[kishan-dhankecha]

@jishnulal-crypto Yes, I would like to solve this but I am asking for a reproducible code sample for this issue.

You can create a new temporary project and implement a similar feature so the issue can occur the same way as your original project and share that here.

I'll check and fix that!

[kishan-dhankecha]

Hello @jishnulal-crypto, @ronny-strath

I have tried to re-create the issue you are facing but I think it's working fine on my side. Please update to the latest version from carousel_slider_plus and let me know if you are still having same issue.

Video Preview

Code Sample

import 'package:carousel_slider_plus/carousel_slider_plus.dart';
import 'package:flutter/material.dart';

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

const List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

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

  @override
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  int _current = 0;
  final CarouselController _controller = CarouselController();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                padding: const EdgeInsets.symmetric(horizontal: 22, vertical: 12),
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text('Image ${_current + 1} of ${imgList.length}'),
              ),
              const SizedBox(height: 12),
              CarouselSlider(
                carouselController: _controller,
                options: CarouselOptions(
                  // autoPlay: true,
                  viewportFraction: 0.8,
                  enlargeCenterPage: true,
                  enableInfiniteScroll: false,
                  onPageChanged: (index, reason) {
                    setState(() => _current = index);
                  },
                ),
                items: imgList.map((item) {
                  return Image.network(item, fit: BoxFit.cover);
                }).toList(),
              ),
              Row(
                children: [
                  Expanded(
                    child: TextButton(
                      onPressed: () => _controller.previousPage(
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.linear,
                      ),
                      child: const Text('Previous'),
                    ),
                  ),
                  Expanded(
                    child: TextButton(
                      onPressed: () => _controller.nextPage(
                        duration: const Duration(milliseconds: 300),
                        curve: Curves.linear,
                      ),
                      child: const Text('Next'),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}