[Bug]: Previous sliders lose their size

[alejandrogiubel]

Contact Details

[email protected]

What happened?

When using ExpandableCarousel with a StatefulWidget with AutomaticKeepAliveClientMixin as a child, when navigating to previous sliders they lose their size.

https://github.com/alejandrogiubel/flutter_carousel_demo

Version

^3.1.0

What devices are you seeing the problem on?

iPhone, Android

OS

Android 12, iOS 17.5

Relevant log output

Code of Conduct

• I agree to follow this project's Code of Conduct

[nixrajput]

Hi @alejandrogiubel,

Thank you for bringing this to my attention! I will look into this issue soon and provide an update or implement a fix in the next update.

In the meantime, could you please share the code you’ve written to implement this? It would help me better understand the specific scenario and reproduce the issue accurately.

Thanks and regards,
Nikhil

[alejandrogiubel]

Hi @nixrajput , here is the example code
https://github.com/alejandrogiubel/flutter_carousel_demo

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = ExpandableCarouselController();
  List<ElementCard> elemets = [
    ElementCard(
      color: Colors.red,
      text: 'Element 0',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ExpandableCarousel(
              options: ExpandableCarouselOptions(
                disableCenter: true,
                controller: controller,
                showIndicator: false,
                viewportFraction: 1,
              ),
              items: elemets,
            ),
            ElevatedButton(
              onPressed: () {
                setState(
                  () {
                    elemets = [
                      ...elemets,
                      ElementCard(
                        color: Colors.primaries[
                            elemets.length % Colors.primaries.length],
                        text: 'Element ${elemets.length}',
                      )
                    ];
                    controller.animateToPage(elemets.length - 1);
                  },
                );
              },
              child: Text('Add'),
            ),
          ],
        ),
      ),
    );
  }
}

class ElementCard extends StatefulWidget {
  const ElementCard({
    super.key,
    required this.color,
    required this.text,
  });
  final Color color;
  final String text;

  @override
  State<ElementCard> createState() => _ElementCardState();
}

class _ElementCardState extends State<ElementCard>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Container(
      height: 200,
      color: widget.color,
      child: Text(widget.text),
    );
  }

  @override
  bool get wantKeepAlive => true;
}