{"id":2088,"date":"2023-01-12T16:40:25","date_gmt":"2023-01-12T16:40:25","guid":{"rendered":"https:\/\/hindtechnovel.com\/?p=2088"},"modified":"2023-01-12T16:40:25","modified_gmt":"2023-01-12T16:40:25","slug":"flutter-pagination","status":"publish","type":"post","link":"https:\/\/hindtechnovel.com\/?p=2088","title":{"rendered":"How do you implement pagination in Flutter with a bloc pattern?"},"content":{"rendered":"<p class=\"q-text qu-display--block qu-wordBreak--break-word qu-textAlign--start\">Its an easy process and here are the steps to follow for implementation of pagination in Flutter with a bloc pattern:<\/p>\n<ol class=\"q-box\">\n<li class=\"q-relative\">Define an\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">offset<\/code>\u00a0and a\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">limit<\/code>\u00a0in your bloc state to keep track of the current page and the number of items to be displayed on each page.<\/li>\n<li class=\"q-relative\">In your bloc, create a method that retrieves a page of items from your data source using the\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">offset<\/code>\u00a0and\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">limit<\/code>\u00a0values. This method should update the bloc state with the new page of items, as well as the total number of items in the data source.<\/li>\n<li class=\"q-relative\">In your Flutter app, create a\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">ListView<\/code>\u00a0widget and bind it to the page of items in the bloc state. You can use the\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">ListView.builder<\/code>\u00a0constructor to build the list view.<\/li>\n<li class=\"q-relative\">To handle pagination, you can use a\u00a0<code class=\"q-inline qu-bg--gray_ultralight qu-color--gray qu-overflowX--auto qu-textAlign--left qu-borderRadius--small qu-whiteSpace--pre-wrap\">ScrollController<\/code>\u00a0to detect when the user scrolls to the end of the list view. When the end of the list is reached, you can call the bloc method to retrieve the next page of items and update the bloc state.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>Its an easy process and here are the steps to follow for implementation of pagination in Flutter with a bloc pattern: Define an\u00a0offset\u00a0and a\u00a0limit\u00a0in your bloc state to keep track of the current page and the number of items to be displayed on each page. In your bloc, create a method that retrieves a page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[1],"tags":[],"class_list":["post-2088","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel<\/title>\n<meta name=\"description\" content=\"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/hindtechnovel.com\/?p=2088\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel\" \/>\n<meta property=\"og:description\" content=\"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.\" \/>\n<meta property=\"og:url\" content=\"http:\/\/hindtechnovel.com\/?p=2088\" \/>\n<meta property=\"og:site_name\" content=\"HindTechnovel\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-12T16:40:25+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088#article\",\"isPartOf\":{\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088\"},\"author\":{\"name\":\"admin\",\"@id\":\"http:\/\/hindtechnovel.com\/#\/schema\/person\/5dd77c69acc3235d8fcd671762a6acde\"},\"headline\":\"How do you implement pagination in Flutter with a bloc pattern?\",\"datePublished\":\"2023-01-12T16:40:25+00:00\",\"dateModified\":\"2023-01-12T16:40:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088\"},\"wordCount\":178,\"commentCount\":1,\"publisher\":{\"@id\":\"http:\/\/hindtechnovel.com\/#organization\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/hindtechnovel.com\/?p=2088#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088\",\"url\":\"http:\/\/hindtechnovel.com\/?p=2088\",\"name\":\"How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel\",\"isPartOf\":{\"@id\":\"http:\/\/hindtechnovel.com\/#website\"},\"datePublished\":\"2023-01-12T16:40:25+00:00\",\"dateModified\":\"2023-01-12T16:40:25+00:00\",\"description\":\"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.\",\"breadcrumb\":{\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088#breadcrumb\"},\"inLanguage\":\"en\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/hindtechnovel.com\/?p=2088\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/hindtechnovel.com\/?p=2088#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/hindtechnovel.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How do you implement pagination in Flutter with a bloc pattern?\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/hindtechnovel.com\/#website\",\"url\":\"http:\/\/hindtechnovel.com\/\",\"name\":\"HindTechnovel\",\"description\":\"Commitment is Our Prestige.\",\"publisher\":{\"@id\":\"http:\/\/hindtechnovel.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/hindtechnovel.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/hindtechnovel.com\/#organization\",\"name\":\"HindTechnovel\",\"url\":\"http:\/\/hindtechnovel.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"http:\/\/hindtechnovel.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/hindtechnovel.com\/wp-content\/uploads\/2022\/12\/cropped-logo.png\",\"contentUrl\":\"https:\/\/hindtechnovel.com\/wp-content\/uploads\/2022\/12\/cropped-logo.png\",\"width\":465,\"height\":464,\"caption\":\"HindTechnovel\"},\"image\":{\"@id\":\"http:\/\/hindtechnovel.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/hindtechnovel.com\/#\/schema\/person\/5dd77c69acc3235d8fcd671762a6acde\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en\",\"@id\":\"http:\/\/hindtechnovel.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/029ef3e6307e187a1b03b8cd11cf3e078fe797df7fe41f11f29e5d0e24b1cf5c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/029ef3e6307e187a1b03b8cd11cf3e078fe797df7fe41f11f29e5d0e24b1cf5c?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"https:\/\/hindtechnovel.com\"],\"url\":\"https:\/\/hindtechnovel.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel","description":"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/hindtechnovel.com\/?p=2088","og_locale":"en_US","og_type":"article","og_title":"How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel","og_description":"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.","og_url":"http:\/\/hindtechnovel.com\/?p=2088","og_site_name":"HindTechnovel","article_published_time":"2023-01-12T16:40:25+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/hindtechnovel.com\/?p=2088#article","isPartOf":{"@id":"http:\/\/hindtechnovel.com\/?p=2088"},"author":{"name":"admin","@id":"http:\/\/hindtechnovel.com\/#\/schema\/person\/5dd77c69acc3235d8fcd671762a6acde"},"headline":"How do you implement pagination in Flutter with a bloc pattern?","datePublished":"2023-01-12T16:40:25+00:00","dateModified":"2023-01-12T16:40:25+00:00","mainEntityOfPage":{"@id":"http:\/\/hindtechnovel.com\/?p=2088"},"wordCount":178,"commentCount":1,"publisher":{"@id":"http:\/\/hindtechnovel.com\/#organization"},"inLanguage":"en","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/hindtechnovel.com\/?p=2088#respond"]}]},{"@type":"WebPage","@id":"http:\/\/hindtechnovel.com\/?p=2088","url":"http:\/\/hindtechnovel.com\/?p=2088","name":"How do you implement pagination in Flutter with a bloc pattern? - HindTechnovel","isPartOf":{"@id":"http:\/\/hindtechnovel.com\/#website"},"datePublished":"2023-01-12T16:40:25+00:00","dateModified":"2023-01-12T16:40:25+00:00","description":"Define an offset and a limit in your bloc state to keep track of the current page and the number of items to be displayed on each page.","breadcrumb":{"@id":"http:\/\/hindtechnovel.com\/?p=2088#breadcrumb"},"inLanguage":"en","potentialAction":[{"@type":"ReadAction","target":["http:\/\/hindtechnovel.com\/?p=2088"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/hindtechnovel.com\/?p=2088#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/hindtechnovel.com\/"},{"@type":"ListItem","position":2,"name":"How do you implement pagination in Flutter with a bloc pattern?"}]},{"@type":"WebSite","@id":"http:\/\/hindtechnovel.com\/#website","url":"http:\/\/hindtechnovel.com\/","name":"HindTechnovel","description":"Commitment is Our Prestige.","publisher":{"@id":"http:\/\/hindtechnovel.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/hindtechnovel.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en"},{"@type":"Organization","@id":"http:\/\/hindtechnovel.com\/#organization","name":"HindTechnovel","url":"http:\/\/hindtechnovel.com\/","logo":{"@type":"ImageObject","inLanguage":"en","@id":"http:\/\/hindtechnovel.com\/#\/schema\/logo\/image\/","url":"https:\/\/hindtechnovel.com\/wp-content\/uploads\/2022\/12\/cropped-logo.png","contentUrl":"https:\/\/hindtechnovel.com\/wp-content\/uploads\/2022\/12\/cropped-logo.png","width":465,"height":464,"caption":"HindTechnovel"},"image":{"@id":"http:\/\/hindtechnovel.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/hindtechnovel.com\/#\/schema\/person\/5dd77c69acc3235d8fcd671762a6acde","name":"admin","image":{"@type":"ImageObject","inLanguage":"en","@id":"http:\/\/hindtechnovel.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/029ef3e6307e187a1b03b8cd11cf3e078fe797df7fe41f11f29e5d0e24b1cf5c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/029ef3e6307e187a1b03b8cd11cf3e078fe797df7fe41f11f29e5d0e24b1cf5c?s=96&d=mm&r=g","caption":"admin"},"sameAs":["https:\/\/hindtechnovel.com"],"url":"https:\/\/hindtechnovel.com\/?author=1"}]}},"_links":{"self":[{"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/posts\/2088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2088"}],"version-history":[{"count":1,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/posts\/2088\/revisions"}],"predecessor-version":[{"id":2089,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=\/wp\/v2\/posts\/2088\/revisions\/2089"}],"wp:attachment":[{"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2088"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hindtechnovel.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}