flutterhorizontallist

How to make pagination in case items as horizontal Scrolling not vertical listview builder in flutter?


I have horizontal listview builder so how to make pagination to load more data in case items for horizontal listview !


Solution

  • You can copy paste run full code below
    You can use package https://pub.dev/packages/flutter_pagewise

    code snippet

    return PagewiseListView(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            pageSize: PAGE_SIZE,
            itemBuilder: this._itemBuilder,
            pageFuture: (pageIndex) =>
                BackendService.getPosts(pageIndex * PAGE_SIZE, PAGE_SIZE));
    

    working demo

    enter image description here

    full code

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    import 'package:flutter_pagewise/flutter_pagewise.dart';
    import 'package:http/http.dart' as http;
    import 'dart:convert';
    
    class PagewiseListViewExample extends StatelessWidget {
      static const int PAGE_SIZE = 5;
    
      @override
      Widget build(BuildContext context) {
        return PagewiseListView(
            shrinkWrap: true,
            scrollDirection: Axis.horizontal,
            pageSize: PAGE_SIZE,
            itemBuilder: this._itemBuilder,
            pageFuture: (pageIndex) =>
                BackendService.getPosts(pageIndex * PAGE_SIZE, PAGE_SIZE));
      }
    
      Widget _itemBuilder(context, PostModel entry, _) {
        return Container(
          width: 200,
          child: ListTile(
            leading: Icon(
              Icons.person,
              color: Colors.brown[200],
            ),
            title: Text(entry.title),
            //subtitle: Text(entry.body),
          ),
        );
      }
    }
    
    class BackendService {
      static Future<List<PostModel>> getPosts(offset, limit) async {
        final responseBody = (await http.get(
                'http://jsonplaceholder.typicode.com/posts?_start=$offset&_limit=$limit'))
            .body;
    
        // The response body is an array of items
        return PostModel.fromJsonList(json.decode(responseBody));
      }
    
      static Future<List<ImageModel>> getImages(offset, limit) async {
        final responseBody = (await http.get(
                'http://jsonplaceholder.typicode.com/photos?_start=$offset&_limit=$limit'))
            .body;
    
        // The response body is an array of items.
        return ImageModel.fromJsonList(json.decode(responseBody));
      }
    }
    
    class PostModel {
      String title;
      String body;
    
      PostModel.fromJson(obj) {
        this.title = obj['title'];
        this.body = obj['body'];
      }
    
      static List<PostModel> fromJsonList(jsonList) {
        return jsonList.map<PostModel>((obj) => PostModel.fromJson(obj)).toList();
      }
    }
    
    class ImageModel {
      String title;
      String id;
      String thumbnailUrl;
    
      ImageModel.fromJson(obj) {
        this.title = obj['title'];
        this.id = obj['id'].toString();
        this.thumbnailUrl = obj['thumbnailUrl'];
      }
    
      static List<ImageModel> fromJsonList(jsonList) {
        return jsonList.map<ImageModel>((obj) => ImageModel.fromJson(obj)).toList();
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(height: 200, child: PagewiseListViewExample()),
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      }
    }