Question 209690 in Flutter Question posted in
The official Flutter documentation can be found here.

How to tell if the last item in ListView.Builder has been shown to the screen in Flutter

all.

I want to listen to the scrolls in the ListView.Builder() in flutter and be notified whenever the last item of the list has been drawn/shown to the screen of the user. I want to hide the FloatingActionButton so the user can see the last item without "view channel" being hidden/blocked by the FloatingActionButton

enter image description here


ListView.builder(
         itemCount: Data.channels.length,
         itemBuilder: (c, index) {
         Channel item = Data.channels[index];
         return Container(Text(item.name);},
Tags:

2

Answers


  1. 0

    You can use ScrollController to track the scroll position.

    class DF extends StatefulWidget {
  const DF({super.key});

  @override
  State<DF> createState() => _DFState();
}

class _DFState extends State<DF> {
  final _controller = ScrollController();
  ValueNotifier<bool> isLast = ValueNotifier(false);

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      // you can try _controller.position.atEdge
      if (_controller.position.pixels >= _controller.position.maxScrollExtent - 100) {
        //100 is item height
        isLast.value = true;
      } else {
        isLast.value = false;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: ValueListenableBuilder(
        valueListenable: isLast,
        builder: (context, value, child) {
          return Visibility(
            visible: value,
            child: FloatingActionButton(
              onPressed: () {},
            ),
          );
        },
      ),
      body: ListView.builder(
        controller: _controller,
        itemCount: 15,
        itemBuilder: (context, index) => Container(
          height: 100,
          color: Colors.red,
          child: Text('$index'),
        ),
      ),
    );
  }
}

    Also you can check visibility_detector.

    Login or Signup to reply.
  2. 0

    You can achieve via this code

    class _MyHomePageState extends State<MyHomePage> {
  ScrollController scrollController = ScrollController();
  bool _showFloating = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),

      bottomNavigationBar: Container(height: 100,color: Colors.cyan,width: double.infinity,),
      body: NotificationListener<ScrollNotification>(
          onNotification: (ScrollNotification scrollInfo) {
            if (scrollInfo.metrics.pixels ==
                scrollInfo.metrics.maxScrollExtent) {
              setState(() {
                _showFloating = false;
              });
            } else {
              setState(() {
                _showFloating = true;
              });
            }
            return false;
          },
          child: ListView.separated(
              controller: scrollController,
              itemBuilder: (c, i) {
                return Container(
                  width: double.infinity,
                  height: 100,
                  color: Colors.red,
                );
              },
              separatorBuilder: (c, i) {
                return Divider();
              },
              itemCount: 10)),
      floatingActionButton:
          _showFloating ? FloatingActionButton(onPressed: () {}) : SizedBox(),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search