Home > Net >  Flutter Pagination with WordPress REST API
Flutter Pagination with WordPress REST API

Time:08-28

I am trying to get my WordPress posts in my Flutter Application and I am getting posts successfully. Now the problem is that only ten posts are displaying.

Future<List> fetchWpCats() async{
  final response = await http.get(
      Uri.parse('https://rashtrasandeshnews.com/wp-json/wp/v2/posts'),
      headers: {"Accept": "application/json"}
  );
  var convertedDatatoJson = jsonDecode(response.body);

  return convertedDatatoJson;
}

Here is my ListView, in which I am getting only 10 items.

FutureBuilder(
                future: fetchWpPosts('posts'),
                builder: (context, AsyncSnapshot snapshot) {
                  if (snapshot.data != null) {
                    return ListView.builder(
                      itemCount: snapshot.data.length!,
                      itemBuilder: (context, index) {
                        Map JSON = snapshot.data![index];
                        return InkWell(
                          onTap: () => Navigator.push(
                              context,
                              MaterialPageRoute(
                                  builder: (context) => PostDetails(
                                        id: JSON['id'],
                                        title: JSON['title']['rendered'],
                                        content: JSON['content']['rendered'],
                                        image: JSON['_embedded']
                                                ['wp:featuredmedia'][0]
                                            ["source_url"],
                                      ))),
                          child: Card(
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(25),
                            ),
                            elevation: 10,
                            shadowColor: Colors.pink,
                            child: Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Column(
                                children: [
                                  Html(
                                    data: JSON['title']['rendered'],
                                    style: {
                                      "body": Style(
                                          fontSize: FontSize(18.0),
                                          fontWeight: FontWeight.bold,
                                          textAlign: TextAlign.center),
                                    },
                                  ),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  }
                  return Center(
                      child: CircularProgressIndicator(
                    backgroundColor: Colors.pink,
                  ));
                },
              ),

Now, please provide me with detailed instructions/steps so that I can fetch all the posts.

CodePudding user response:

For this case i use the infinite_scroll_pagination package:

https://pub.dev/packages/infinite_scroll_pagination

Check the example under Usage

CodePudding user response:

I think this is the default behavior of WordPress. I checked their documentation and found that the link you used to retrieve the posts only returns the first page of posts (each page contains 10), you can specify how many posts per page or you can get the content page by page. Here is the link that explains what options you have:

https://developer.wordpress.org/rest-api/using-the-rest-api/pagination/

according to the documentation, this link should retrieve the first 100 posts:

https://rashtrasandeshnews.com/wp-json/wp/v2/posts?per_page=100

I can't check it on my computer, it gives me an SSL error.

  • Related