serenader2014 / flutter_carousel_slider

A flutter carousel widget, support infinite scroll, and custom child widget.
https://pub.dev/packages/carousel_slider
MIT License
1.59k stars 578 forks source link

Carousel first image randomly not shown upon start #370

Open thedeukalion opened 2 years ago

thedeukalion commented 2 years ago

I'm using the Carousel Slider for a Flutter project and this is the behavior that is every X startup of the project when the CarouselSlider is shown at once

To reproduce:

  1. Create new Flutter project (Test project)
  2. Install carousel slider (4.1.1)
  3. Add 5 images with one color background each to assets (1920x1080)
  4. Replace main "_MyHomePageState" with:
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Complicated image slider demo')),
      body: Container(
        child: CarouselSlider(
          options: CarouselOptions(
              autoPlay: true,
              aspectRatio: 16.0/9.0,
              enlargeCenterPage: true,
              viewportFraction: 1.0
          ),
          items: [
            Image.asset( "assets/examples/bg_blue.png", fit: BoxFit.cover),
            Image.asset( "assets/examples/bg_green.png", fit: BoxFit.cover),
            Image.asset( "assets/examples/bg_orange.png", fit: BoxFit.cover),
            Image.asset( "assets/examples/bg_purple.png", fit: BoxFit.cover),
            Image.asset( "assets/examples/bg_red.png", fit: BoxFit.cover),
          ],
        ),
      ),
    );
  }
}

This is an unacceptable bug. The images are assets. The same thing happens with heavier images to load - networked images. I've experiences similiar bugs with 'card_swiper' but I like CarouselSlider more. But they behave similiar. On a more "complex" or "bigger" image the loading issue is more frequent - almost every time. Touch the screen and it renders. With these one color images it happens every 5 - 10 times or so. Still, should not happen. Replacing this whole Widget with a Image as the body works as expected. So there's something wrong with above code. I've tried alot of configurations. I have much more complex setup in my main project but since it works poorly in an example project as well - with everything as default then I guess the issue is with the plugins or dart / flutter. Works great in a browser. Does not work on a phone at all.

https://user-images.githubusercontent.com/9720180/185963176-c2e4c3ba-0c51-4ba9-a4a8-006c41bda933.mp4

thedeukalion commented 2 years ago

Adding a manual PageView.builder and using this plugin: https://pub.dev/packages/preload_page_view

Solves the preload issue Perhaps something to look into for this plugin