CODEWITHSUNDEEP
flutter
umarbeyoglu
umarbeyoglu

Reputation: 450

How can i paginate ListView.builder?

I am deploying a social media mobile app and last thing i have to do is pagination. I looked at various flutter blogs etc and i tried to figure it out but i had tons of errors when i tried those codes (i could not figure out the way to implement them with my codes unfortunately.)

What i want is basically, when i scroll down after various number of posts (for example 5 posts), my flutter app will initiate a function like reload more and give me more posts.How can i do it?

Future<List<Post>> FetchPosts(http.Client client) async {
  List<Post> posts;
  List<Post> finalposts;
  final response = await http.get("$SERVER_IP/api/articles/?format=json");
  final parsed = jsonDecode(response.body).cast<Map<String, dynamic>>();
  posts = parsed.map<Post>((json) => Post.fromJSON(json)).toList();
  return posts;
}

class FeedScreen extends StatefulWidget{...}

class FeedScreenState extends State<FeedScreen> {
  FeedScreenState({Key key, this.posts});
  final List<Post> posts;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: refreshpage,
        child: FutureBuilder<List<Post>>(
          future: FetchPosts(http.Client()),
          builder: (context, snapshot) {
            if (snapshot.hasError) print(snapshot.error);

            return snapshot.hasData ?
            PostsList(posts: snapshot.data,user:user)
                : Center(
              child: CircularProgressIndicator(backgroundColor: Colors.pink,valueColor: new AlwaysStoppedAnimation<Color>(Colors.pinkAccent),
              ),);},),),);}}

class PostsList extends StatefulWidget{...}

class PostsListState extends State<PostsList> {
  final List<Post> posts;
  PostsListState({Key key, this.posts, this.user});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts.length,
      physics: ScrollPhysics(),
      itemBuilder: (context, index) {
        return AspectRatio(...);
      },);}}

Upvotes: 3

Views: 5769

Answers (1)

Aaron Ayalew
Aaron Ayalew

Reputation: 123

As shown in this answer: Flutter ListView lazy loading you can listen to a ScrollController and fetch more posts according to the ScrollPosition

Upvotes: 2

Related Questions