'Flutter PageView and ListWheelScrollView asset image error

i use images in ListWheelScrollView in PageView. i have 3 pages and 60 same images in all pages in listwheelscrollview. when i try to change to second page (red page), I see that the images are not loading. i tried to precacheImage for all images but it didnt work.

i think the problem is with ListWheelScrollView's lazy loading. how can i load all widgets in ListWheelScrollView when ListWheelScrollView created?

i try to create sample code, i hope it is enough. there are 3 images in code but if you try 10-15 images, you will see error.

import 'package:flutter/material.dart';

class IntroPage extends StatelessWidget {
  final _images = ["image1", "image3", "image2"];

  late List<FixedExtentScrollController> _scrollControllers;

  IntroPage({Key? key}) : super(key: key) {
    _scrollControllers = List.generate(_images.length, (index) => FixedExtentScrollController(initialItem: index));
  }

  @override
  Widget build(BuildContext context) {
    // _precacheImages(context);

    return Scaffold(
      body: SafeArea(
        child: PageView.builder(
          clipBehavior: Clip.none,
          itemCount: 3,
          itemBuilder: (_, index) => _buildImagesWheel(index),
        ),
      ),
    );
  }

  Widget _buildImagesWheel(final int index) {
    return RotatedBox(
      quarterTurns: -1,
      child: ListWheelScrollView(
        itemExtent: 250.0,
        controller: _scrollControllers[index],
        physics: const NeverScrollableScrollPhysics(),
        children: [for (final image in _images) _buildImage(image)],
      ),
    );
  }

  Widget _buildImage(final String image) {
    return RotatedBox(
      quarterTurns: 1,
      child: SizedBox(
        width: 250.0,
        height: 250.0,
        child: Image.asset(
          image,
          fit: BoxFit.contain,
          color: Colors.black,
        ),
      ),
    );
  }

  /// methods
  void _precacheImages(final BuildContext context) {
    for (final image in _images) {
      precacheImage(AssetImage(image), context);
    }
  }
}



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source