'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 |
|---|

