Home > Enterprise >  When Scrolling down I want to hide images from ListView
When Scrolling down I want to hide images from ListView

Time:08-09

ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return Column(
            children: [
            Image.asset("assets/images/a.jpg")
            Text("Item number $index"),
            ],
          );
        },
      ),

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

CodePudding user response:

class _MyHomePageState extends State<MyHomePage> {
  ScrollController _ctrler;
  
  late bool _isVisible ;
  @override
  initState(){
    super.initState();
    _isVisible = true;
    _ctrler= new ScrollController();
    _ctrler.addListener((){
      if(_ctrler.position.userScrollDirection == ScrollDirection.reverse){
        if(_isVisible == true) {
            setState((){
              _isVisible = false;
            });
        }
      } else {
        if(_ctrler.position.userScrollDirection == ScrollDirection.forward){
          if(_isVisible == false) {
               setState((){
                 _isVisible = true;
               });
           }
        }
    }});
  }

then in your ListView

ListView.builder(
  itemCount: 100,
  controller: _ctrler,
  itemBuilder: (context, index) {
    return Column(
      children: [
      Visibility(
        visible:_isVisible ,
        Image.asset("assets/images/a.jpg")
       )
      Text("Item number $index"),
      ],
    );
  },
),
  • Related