title: How to implement pagination in flutter bloc pattern
body: <p>I am trying to implement pagination in flutter with bloc pattern.What i want is when the list_view reached the end it update the current list_view with new content but what it is doing is creating a new list_view with new content</p>
  
  <p>Built_valueModel.dart</p>
  
  <pre><code>
  abstract class Verces implements Built&lt;Verces, VercesBuilder&gt; {
    static Serializer&lt;Verces&gt; get serializer =&gt; _$vercesSerializer;
  
    BuiltList&lt;Madni&gt; get verses;
  
    Meta get meta;
  
    Verces._();
  
    factory Verces([updates(VercesBuilder b)]) = _$Verces;
  }
  
  abstract class Madni implements Built&lt;Madni, MadniBuilder&gt; {
    static Serializer&lt;Madni&gt; get serializer =&gt; _$madniSerializer;
  
    int get id; //1,
    int get verse_number; //: 1,
    int get chapter_id; //: 1,
    String get verse_key; // "1:1",
    String get text_madani; //: "بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ",
    String get text_indopak; //: "بِسۡمِ اللهِ الرَّحۡمٰنِ الرَّحِيۡمِ",
    String get text_simple; //: "بسم الله الرحمن الرحيم",
    int get juz_number; //: 1,
    int get hizb_number; //: 1,
    int get rub_number; // 1,
  //  "sajdah": null,
  //  "sajdah_number": null,
    int get page_number; // 1,
  
    BuiltList&lt;Translations&gt; get translations; //": [],
  
    Madni._();
  
    factory Madni([updates(MadniBuilder b)]) = _$Madni;
  }
  
  abstract class Translations
      implements Built&lt;Translations, TranslationsBuilder&gt; {
    static Serializer&lt;Translations&gt; get serializer =&gt; _$translationsSerializer;
  
    int get id; //: 104845,
    String get language_name; //: "english",
    String get text; //: "Alif Lam Mim.",
    String get resource_name; // "Shakir",
    int get resource_id; //: 21
  
    Translations._();
  
    factory Translations([updates(TranslationsBuilder b)]) = _$Translations;
  }
  
  abstract class Meta implements Built&lt;Meta, MetaBuilder&gt; {
    static Serializer&lt;Meta&gt; get serializer =&gt; _$metaSerializer;
  
    @nullable
    int get current_page; //": 1,
    @nullable
    int get next_page; //": 2,
    @nullable
    int get prev_page; //": null,
    @nullable
    int get total_pages; //": 6,
    @nullable
    int get total_count; //": 286
  
    Meta._();
  
    factory Meta([updates(MetaBuilder b)]) = _$Meta;
  }
  
  List&lt;Madni&gt; getmadni(String jsonStr) {
    final res = json.jsonDecode(jsonStr);
    Verces verces = standardSerializers.deserializeWith(Verces.serializer, res);
    //print(verces);
    return verces.verses.map((Madni mad) =&gt; mad).toList();
  }
  
  Meta getmeta(String jsonStr) {
    final res = json.jsonDecode(jsonStr);
    Verces verces = standardSerializers.deserializeWith(Verces.serializer, res);
    return verces.meta;
  }
  </code></pre>
  
  <p>Bloc.dart</p>
  
  <pre><code>import 'dart:async';
  import 'package:quran_app/src/chapters/model/model.dart';
  import 'dart:collection';
  import 'package:http/http.dart' as http;
  
  class Verses_bloc {
    var _chap = &lt;Madni&gt;[];
    var _meta = Meta();
  
    HashMap&lt;int, List&lt;Madni&gt;&gt; _cashedChapters;
  
    // Verses bloc start
    final Verses_blocController = StreamController&lt;List&lt;Madni&gt;&gt;();
  
    StreamSink&lt;List&lt;Madni&gt;&gt; get _incontroller =&gt; Verses_blocController.sink;
  
    Stream&lt;List&lt;Madni&gt;&gt; get output_verses =&gt; Verses_blocController.stream;
  
    // Verses bloc End
  
    // Pages bloc start
    final pages_blocController = StreamController&lt;Meta&gt;();
  
    StreamSink&lt;Meta&gt; get _inpageController =&gt; pages_blocController.sink;
  
    Stream&lt;Meta&gt; get output_pages =&gt; pages_blocController.stream;
  
    // Pages bloc start
  
    int chap;
    int page;
  
    Verses_bloc(this.chap, this.page) {
      _cashedChapters = HashMap&lt;int, List&lt;Madni&gt;&gt;();
  
      update(this.chap, this.page);
    }
  
    // Future which will return value to UI when the data is fetched
    Future&lt;void&gt; update(int chap, int page) async {
       _chap = await getVerses(chap, page);
  
      _meta = await getPages();
  
      _incontroller.add(_chap);
      _inpageController.add(_meta);
    }
  
    // Get Verses Method Which will return pages with limit of 50 pages
  
    Future&lt;List&lt;Madni&gt;&gt; getVerses(int chap, int page) async {
      if (!_cashedChapters.containsKey(1)) {
        final storiesUrl =
            'http://staging.quran.com:3000/api/v3/chapters/${chap}/verses?recitation=1&amp;translations=21&amp;language=en&amp;page=${page}&amp;text_type=words';
        final storyRes = await http.get(Uri.parse(storiesUrl));
  
        if (storyRes.statusCode == 200) {
          _cashedChapters[1] = getmadni(storyRes.body);
        } else {
          throw Exception("Error");
        }
      }
      return _cashedChapters[1];
    }
  
    // Get Meta Quantities Method
    Future&lt;Meta&gt; getPages() async {
      final storiesUrl =
          'http://staging.quran.com:3000/api/v3/chapters/${chap}/verses?recitation=1&amp;translations=21&amp;language=en&amp;page=2&amp;limit=50&amp;text_type=words';
      final storyRes = await http.get(Uri.parse(storiesUrl));
  
      if (storyRes.statusCode == 200) {
        return getmeta(storyRes.body);
      } else {
        throw Exception("Error");
      }
    }
  
    void dispose() {
      Verses_blocController.close();
    }
  }
  
  </code></pre>
  
  <p>Main_UI.dart</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:quran_app/src/chapters/model/bloc/Verses_bloc.dart';
  import 'package:quran_app/src/chapters/model/model.dart';
  
  class Surah extends StatefulWidget {
    final String name;
    final int id;
    final int verses_count;
  
    const Surah({Key key, this.name, this.id, this.verses_count})
        : super(key: key);
  
    @override
    _SurahState createState() =&gt; _SurahState();
  }
  
  class _SurahState extends State&lt;Surah&gt; {
    var _bloc = Verses_bloc(0, 0);
    ScrollController _controller;
    int n = 1;
  
    _scrollListener() {
      if (_controller.offset &gt;= _controller.position.maxScrollExtent &amp;&amp;
          !_controller.position.outOfRange) {
        setState(() {
          print("Reached end");
  
          // _bloc=Verses_bloc(widget.id,2);
          // This line is creating a new listview
          // instead of updating current listview
  
        });
      }
    }
  
    @override
    void initState() {
      _bloc = Verses_bloc(widget.id, n);
      _controller = ScrollController();
      _controller.addListener(_scrollListener);
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.name),
        ),
        body: Container(
          child: StreamBuilder(
            stream: _bloc.output_verses,
            initialData: List&lt;Madni&gt;(),
            builder: (BuildContext context,
                AsyncSnapshot&lt;List&lt;Madni&gt;&gt; snapshot_Madni) {
              if (snapshot_Madni.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(),
                );
              } else if (snapshot_Madni.data.isEmpty) {
                return Center(
                  child: Text("The End"),
                );
              } else {
                return ListView.builder(
                  controller: _controller,
                  padding: EdgeInsets.all(8.0),
                  itemCount: n,
                  addAutomaticKeepAlives: false,
                  itemBuilder: (BuildContext context, index) {
                    return ListView(
                        physics: ClampingScrollPhysics(),
                        shrinkWrap: true,
                        children: snapshot_Madni.data.map(_buildList).toList());
                  },
                );
              }
            },
          ),
        ),
      );
    }
  
    Widget _buildList(Madni e) {
      return ListView(
        children: e.translations
            .map&lt;ListTile&gt;((a) =&gt; ListTile(
                  contentPadding: EdgeInsets.all(10),
                  title: Text(
                    e.text_madani,
                    style: TextStyle(fontSize: 22.0),
                    textAlign: TextAlign.right,
                  ),
                  subtitle: Text(a.text),
                ))
            .toList(),
        physics: ClampingScrollPhysics(),
        shrinkWrap: true,
      );
    }
  
  //  Get List Pages
    String getMeta() {
      StreamBuilder(
          stream: _bloc.output_pages,
          builder: (BuildContext context, AsyncSnapshot&lt;Meta&gt; snapshot) {
            return Center(
              child: Text('${snapshot.data.next_page}'),
            );
          });
    }
  
  
    @override
    void dispose() {
      super.dispose();
      _bloc.dispose();
      _controller.dispose();
    }
  }
  </code></pre>
  
  <p>When the list_view reached its ends instead of updating current list_view it is creating a new list_view  , which is obvious because it i am creating a new bloc with different parameters.</p>