When Scrolling down I want to hide images from ScrollablePositionedList.builder

Question

ScrollablePositionedList.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return Column(
            children: [
            Image.network(",,,,,,,,")
            Text("Item number $index"),
            ],
          );
        },
      ),

I need the Text to be seen on scroll,but how I can hide the images onScroll?

Answer 1

i think some people still struggle with that feature, because its not support for this version.as you can see many people raise for these issue on github.

i just try some alternative from issue#305, its not good enough but you can apply it.

first its not official , so we need to fetch the plugin from other repository. so you need to modify your pubspec.yaml like below:

from this:

dependencies:
  scrollable_positioned_list: ^0.3.2

to this:

dependencies:
  scrollable_positioned_list:
    git:
      url: https://github.com/nabil6391/flutter.widgets.git
      ref: master
      path: packages/scrollable_positioned_list/

after you pub get , then your itemController will be able to access scrollController

so you just add listener to check the scroll direction

class _MyWidgetState extends State<MyWidget> {
  final ItemScrollController itemSctr = ItemScrollController();
  late bool _isVisible;
  
   @override
  void initState() {
    _isVisible = true;

    itemSctr.scrollController?.addListener(() {
      if (itemSctr.scrollController?.position.userScrollDirection ==
          ScrollDirection.reverse) {
        if (_isVisible == true) {
          setState(() {
            _isVisible = false;
          });
        }
      } else {
        if (itemSctr.scrollController?.position.userScrollDirection ==
            ScrollDirection.forward) {
          if (_isVisible == false) {
            setState(() {
              _isVisible = true;
            });
          }
        }
      }
    });

    super.initState();
  }

and last on your list you can apply like this

body: Scrollbar(
  controller: itemSctr.scrollController, // you need to modify your pubspec.yaml
  child: ScrollablePositionedList.builder(
    itemCount: 100,
    itemPositionsListener: _itemPositionController,
    itemScrollController: itemSctr,
    itemBuilder: (context, index) {
      return Column(
        children: [
          Visibility(
              visible: _isVisible,
              child:
                  Image.network('https://picsum.photos/250?image=9')),
          Text(
            "Item number $index   $_isVisible",
            style: const TextStyle(color: Colors.black),
          ),
        ],
      );
    },
  ),
),

i just tested and its works. but some bug also happend when you scroll to the last index, it cant be show as we want.