google / flutter.widgets

Home Page:https://pub.dev/packages/flutter_widgets

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

The cache extent of scrollable_positioned_list is determined by height when scroll direction is horizontal

PurplePolyhedron opened this issue · comments

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:(){},
              );
            }
          ),