Problem description
The cache extent of scrollable_positioned_list is determined by the height of the widget when the scroll direction is horizontal.
It was supposed to be determined by width.
Steps to reproduce
import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const scroll = Axis.horizontal;
return MaterialApp(
home: Scaffold(
appBar: AppBar(),
body: SizedBox(
width: scroll == Axis.horizontal ? 400 : 100,
height: scroll == Axis.horizontal ? 100 : 400,
child: ScrollablePositionedList.builder(
scrollDirection: scroll,
itemCount: 50,
itemBuilder: (context, index) {
print("item $index build");
return Container(
height: 100,
width: 100,
color: index.isOdd ? Colors.blue : Colors.green,
);
},
),
),
),
);
}
}
Expected behavior
the cache extent should be determined by the width of the widget when the scroll direction is horizontal.
12 items(1200 pixel) should be built, 800 more than the visible width, twice the widget width.
This is the behavior when the scroll direction is vertical.
Actual behavior
6 items(600 pixel) are built, 200 more than the visible width, twice the widget height.
Environment
Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-AU)
• Flutter version 3.3.9 on channel stable at /Users/jax/php/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision b8f7f1f986 (3 weeks ago), 2022-11-23 06:43:51 +0900
• Engine revision 8f2221fbef
• Dart version 2.18.5
• DevTools version 2.15.0
Target platform is macOS
Additional details
The issue is likely from this code in src/scrollable_positioned_list.dart
double _cacheExtent(BoxConstraints constraints) => max(
constraints.maxHeight * _screenScrollCount,
widget.minCacheExtent ?? 0,
);
There is a workaround by wrapping with LayoutBuilder and pass the constraint as minCacheExtent
LayoutBuilder(
builder: (context,constraint) {
return ScrollablePositionedList.builder(
scrollDirection: scroll,
itemCount: 50,
minCacheExtent: constraint.maxWidth*2,
itemBuilder:(){},
);
}
),