NotificationListener in TabController for infinite scroll
Asked Answered
C

1

0

I have 4 tabs and I want to add lazy load or infinite scroll option in them. Earlier I tried with Scroll Controller but when it reaches to the end. Event firing more than once. Hence there are multiple Future http request to API.

I read some question on SO and found I might need to use NotificationListener. I am not sure I need to define it once or for all the tabs. I have no idea how to use NotificationListener.

class _Searchstate extends State<Search> with SingleTickerProviderStateMixin{
  ScrollController _scrollController = new ScrollController();

  final _scaffoldKey = GlobalKey<ScaffoldState>();
   TabController _controller;



TabBarView(
          controller: _controller,
          children: [
           // Text("TAB ONE CONTENT"),
           RefreshIndicator(
            onRefresh: refreshData, 
           child:Container(
                decoration: BoxDecoration(
                  color: Colors.black87,
                ),
                padding: EdgeInsets.only(top: 10, bottom: 5),
                height: MediaQuery.of(context).size.height,
                width: double.infinity,
                child: ListView.builder(
                    controller: _scrollcontroller,
                    itemCount: (recommended) ? lists.length : searchlists.length,
                    itemBuilder: (BuildContext context, int index) {
                      return buildList1(context, index);
                    }),
              ),
           ),
            //Text("TAB TWO CONTENT"),
            RefreshIndicator(
            onRefresh: refreshData1, 
            child:Container(
                decoration: BoxDecoration(
                  color: Colors.black54,
                ),
                padding: EdgeInsets.only(top: 10, bottom: 5),
                height: MediaQuery.of(context).size.height,
                width: double.infinity,
                child: ListView.builder(
                    controller: _scrollcontroller,
                    itemCount: (nearme) ? lists1.length : searchlists1.length, 
                    itemBuilder: (BuildContext context, int index) {
                      return buildList2(context, index);
                    }),
              ),
            ),

Below is the buildList where I am using the Listview.Builder to show the data which is coming from database. I tried to use ScrollController in this too like below.

Widget buildList1(BuildContext context, int index) {
     
              _scrollController.addListener((){
          print(_scrollController.position.pixels);
          print(_scrollController.position.maxScrollExtent);
          if(_scrollController.position.pixels == _scrollController.position.maxScrollExtent){
            print(recommended);
             if(recommended){
               //getData();
               print('getData()1;');
             }
          //   getData();

          }  
        }); 

I have added some relevant codes only in this question as full code is very long.

Edit

I tried using Notification listener and if I define it once around Scaffold then it is working at least I can see the scroll events but I have 4 tabs and I am not sure how can I implement it for all. Because it would be quite hard to set condition for all those 4 tabs.

  @override
  Widget build(BuildContext context) {
       return NotificationListener<ScrollNotification>(
       child:Scaffold(

---- -- - - - - - More Codes -----
 onNotification: (notificationInfo) {
          if (notificationInfo is ScrollEndNotification) {
            print("scroll");
            print("detail:"+notificationInfo.dragDetails.toString());
            /// your code
          }
          return true;
        },
      );

Same code I tried to put inside the tabs but it is not detecting the scroll event.

Concent answered 3/10, 2020 at 16:38 Comment(0)
C
0

I managed to get it work but not sure this is the efficient way or not. May be it will others who may have faced similar issue.

Below code will help to identify the active tab.

void initState(){ 
        _controller = TabController(vsync: this, length: 4);
        currentTab = (_controller.index);
        _controller.addListener(() {
        if(_controller.indexIsChanging) {
          print("tab is animating. from active (getting the index) to inactive(getting the index) ");
        }else {
          //tab is finished animating you get the current index
          print(_controller.index);
          currentTab = (_controller.index);
          _handleTabSelection();
        }
      });

and below code i have added in NotificationListner.

  onNotification: (notificationInfo) {
          if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {
            print("scroll");
              if(currentTab == 0){
                if(recommended == true && tab0 == 'Suggested' ){
                  // getData();
                 print('fire the 1 event');
                }else{
                  print('Name()1;');
                }
              }
             if(currentTab == 1){
                if(nearme == true && tab1 == 'Near Me'){
                  //getData();
                  print('fire the 2nd event ');
                }else{

                }
             }
             if(currentTab == 2){
                if(byRating == true && tab2 == 'By Rating'){
                  //getData();
                  print('fire the 3rd event');
                }else{
                  
                }
             }

             if(currentTab == 3){
                if(byprice == true && tab3 == 'Active'){
                  //getData();
                  print('fire the 4 event');
                }else{

                }
             }
            /// your code
          }
          return true;
        },
      );

Edit: As i have multiple taps so, above code is firing on left and right scroll too. To prevent that i have changed the code to as below.

if (notificationInfo is ScrollEndNotification && notificationInfo.metrics.axisDirection == AxisDirection.down  && notificationInfo.metrics.pixels == notificationInfo.metrics.maxScrollExtent) {
Concent answered 4/10, 2020 at 5:13 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.