Infinite Scroll

[sizoune]

hi, im new to flutter, so far i already can implement grid and fetch the data from api. My question is, how can i implement infinite scroll in NyListView ?

this is my example API Response

{
  "kind": "blogger#postList",
  "nextPageToken": "CgkIChiAkceVjiYQ0b2SAQ",
  "items": [
    {
      "kind": "blogger#post",
      "id": "7706273476706534553",
      "blog": {
        "id": "2399953"
      },
      "published": "2011-08-01T19:58:00.000Z",
      "updated": "2011-08-01T19:58:51.947Z",
      "url": "http://buzz.blogger.com/2011/08/latest-updates-august-1st.html",
      "selfLink": "https://www.googleapis.com/blogger/v3/blogs/2399953/posts/7706273476706534553",
      "title": "Latest updates, August 1st",
      "content": "elided for readability",
      "author": {
        "id": "401465483996",
        "displayName": "Brett Wiltshire",
        "url": "http://www.blogger.com/profile/01430672582309320414",
        "image": {
          "url": "http://4.bp.blogspot.com/_YA50adQ-7vQ/S1gfR_6ufpI/AAAAAAAAAAk/1ErJGgRWZDg/S45/brett.png"
         }
      },
      "replies": {
        "totalItems": "0",
        "selfLink": "https://www.googleapis.com/blogger/v3/blogs/2399953/posts/7706273476706534553/comments"
      }
    },
    {
      "kind": "blogger#post",
      "id": "6069922188027612413",
      elided for readability
    }
  ]
}

this is my widget

class _HomePageState extends NyState<HomePage> {
/// The [view] method should display your page.
 @override
 Widget view(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       centerTitle: true,
       elevation: 0.0,
       backgroundColor: ThemeColor.get(context).background,
       title: Text(
         'Cerita SiPalui',
         style: TextStyle(
             color: isThemeDark ? Colors.white : Colors.black,
             fontWeight: FontWeight.bold),
       ),
     ),
     body: SafeAreaWidget(
       child: NyListView.grid(
         child: (BuildContext context, dynamic data) {
           Post post = data;
           // Check if images are available
           if (post.images != null && post.images!.isNotEmpty) {
             return AspectRatio(
               aspectRatio: 1.0, // Ensure square aspect ratio
               child: Container(
                 decoration: BoxDecoration(
                   borderRadius: BorderRadius.circular(12.0),
                 ),
                 child: ClipRRect(
                   borderRadius: BorderRadius.circular(12.0),
                   child: Image.network(
                     post.images![0].url!,
                     fit: BoxFit.cover, // Ensure image covers the container
                   ),
                 ),
               ),
             );
           } else {
             return Center(child: Text('No image available'));
           }
         },
         data: () async {
           BloggerPost blogPosts =
               await api<ApiService>((request) => request.getBlogPosts());
           return blogPosts.items;
         },
         crossAxisCount: 2, // The number of rows in the grid
         mainAxisSpacing: 16.0, // The mainAxis spacing
         crossAxisSpacing: 16.0, // The crossAxisSpacing
       ),
     ),
   );
 }

 bool get isThemeDark =>
     ThemeProvider.controllerOf(context).currentThemeId ==
     getEnv('DARK_THEME_ID');
}

maybe there are some libraries that can be integrated to NyListView ?

[agordn52]

hi, im new to flutter, so far i already can implement grid and fetch the data from api. My question is, how can i implement infinite scroll in NyListView ?

this is my example API Response

{

  "kind": "blogger#postList",

  "nextPageToken": "CgkIChiAkceVjiYQ0b2SAQ",

  "items": [

    {

      "kind": "blogger#post",

      "id": "7706273476706534553",

      "blog": {

        "id": "2399953"

      },

      "published": "2011-08-01T19:58:00.000Z",

      "updated": "2011-08-01T19:58:51.947Z",

      "url": "http://buzz.blogger.com/2011/08/latest-updates-august-1st.html",

      "selfLink": "https://www.googleapis.com/blogger/v3/blogs/2399953/posts/7706273476706534553",

      "title": "Latest updates, August 1st",

      "content": "elided for readability",

      "author": {

        "id": "401465483996",

        "displayName": "Brett Wiltshire",

        "url": "http://www.blogger.com/profile/01430672582309320414",

        "image": {

          "url": "http://4.bp.blogspot.com/_YA50adQ-7vQ/S1gfR_6ufpI/AAAAAAAAAAk/1ErJGgRWZDg/S45/brett.png"

         }

      },

      "replies": {

        "totalItems": "0",

        "selfLink": "https://www.googleapis.com/blogger/v3/blogs/2399953/posts/7706273476706534553/comments"

      }

    },

    {

      "kind": "blogger#post",

      "id": "6069922188027612413",

      elided for readability

    }

  ]

}

this is my widget

class _HomePageState extends NyState<HomePage> {

/// The [view] method should display your page.

 @override

 Widget view(BuildContext context) {

   return Scaffold(

     appBar: AppBar(

       centerTitle: true,

       elevation: 0.0,

       backgroundColor: ThemeColor.get(context).background,

       title: Text(

         'Cerita SiPalui',

         style: TextStyle(

             color: isThemeDark ? Colors.white : Colors.black,

             fontWeight: FontWeight.bold),

       ),

     ),

     body: SafeAreaWidget(

       child: NyListView.grid(

         child: (BuildContext context, dynamic data) {

           Post post = data;

           // Check if images are available

           if (post.images != null && post.images!.isNotEmpty) {

             return AspectRatio(

               aspectRatio: 1.0, // Ensure square aspect ratio

               child: Container(

                 decoration: BoxDecoration(

                   borderRadius: BorderRadius.circular(12.0),

                 ),

                 child: ClipRRect(

                   borderRadius: BorderRadius.circular(12.0),

                   child: Image.network(

                     post.images![0].url!,

                     fit: BoxFit.cover, // Ensure image covers the container

                   ),

                 ),

               ),

             );

           } else {

             return Center(child: Text('No image available'));

           }

         },

         data: () async {

           BloggerPost blogPosts =

               await api<ApiService>((request) => request.getBlogPosts());

           return blogPosts.items;

         },

         crossAxisCount: 2, // The number of rows in the grid

         mainAxisSpacing: 16.0, // The mainAxis spacing

         crossAxisSpacing: 16.0, // The crossAxisSpacing

       ),

     ),

   );

 }



 bool get isThemeDark =>

     ThemeProvider.controllerOf(context).currentThemeId ==

     getEnv('DARK_THEME_ID');

}

maybe there are some libraries that can be integrated to NyListView ?

Hi @sizoune,

Yeah, you can use 'NyPullToRefresh'.

It works similar to NyListView.

Here's the docs https://nylo.dev/docs/5.20.0/ny-pull-to-refresh

[sizoune]

thank you for the info