How to load more in flutter ListView using Flutter graphql

Viewed 582

I need your help.

My first query result are displayed using ListView widget. And I call fetchMore function(from graphql_flutter) for more result. But instead of just adding new result at the bottom of ListView, It seems refresh whole widget.( it shows Loading widget)

I am very new to Flutter.

Here is builder in Query widget.

builder: (QueryResult result,                                                                                                                                                                                                                                                  
              {VoidCallback refetch, FetchMore fetchMore}) {                                                                                                                                                                                                                             
            if (result.hasException) {                                                                                                                                                                                                                                                   
              return Text(result.exception.toString());                                                                                                                                                                                                                                  
            }                                                                                                                                                                                                                                                                            
            if (result.loading) {                                                                                                                                                                                                                                                        
              return Center(                                                                                                                                                                                                                                                             
                child: CircularProgressIndicator(),                                                                                                                                                                                                                                      
              );                                                                                                                                                                                                                                                                         
            }                                                                                                                                                                                                                                                                            

            List items = result.data['playlistItems']['items'];                                                                                                                                                                                                                          

            String token = result.data['playlistItems']['nextPageToken'];
            token = token ?? "";

            FetchMoreOptions opts = FetchMoreOptions(
                variables: {'nextPageToken': token},
                updateQuery: (previousResultData, fetchMoreResultData) {
                  final List<dynamic> newItems = [
                    ...previousResultData['playlistItems']['items']
                        as List<dynamic>,
                    ...fetchMoreResultData['playlistItems']['items']
                        as List<dynamic>
                  ];

                  fetchMoreResultData['playlistItems']['items'] = newItems;
                  return fetchMoreResultData;
                });

              return Stack(
                children: <Widget>[
                  VideoList(itemCount: items.length, items: items),
                  Align(
                    alignment: Alignment.bottomRight,
                    child: Padding(
                      padding: EdgeInsets.symmetric(
                          vertical: 10.0, horizontal: 10.0),
                      child: FloatingActionButton.extended(
                        onPressed: () {
                          fetchMore(opts);
                        },
                        label: Text("Load More"),
                        icon: Icon(Icons.more),
                      ),
                    ),
                  ),
                ],
              );

How can I just add fetch more result at the bottom of the list instead of refreshing whole listview?

What am I missing?

0 Answers
Related