Building Flutter apps with WordPress Backend— Part 2
WordPress back-end can be really robust and useful in many cases and business models and we can easily build mobile applications with the WordPress back-end with great performance. The performance and speed of the application depend upon the server in which the API is hosted. Anyone wanted to create a great mobile app with great performance, then he/she must ensure the perfect server configuration.
Wordpress provides us a great JSON API for using our site data in other places. This makes it easy for the mobile app developer to build apps. Wordpress by default provides a JSON API and endpoints but you can build your own endpoints. For that, please refer to this.
In the last part of this series, we have used a demo JSON API for the demo purpose and we will use the same for this article. You may use your own WordPress API based on your domain name. This API is having demo content and we will be building an app without using any flutter WordPress package or library (like we have done in the last part). In this article, we will be writing our own logic for building our app.
Here is the pubspec.yaml file for our app
First of all let us create a model named “Post” for post that we are required to retrieve from the API. As the API sends a lot of things in the response, so we need to fetch only those which are of our interest. So, please refer the code below to get an idea of that. (For modularity, I have kept the post.dart in models folder which is placed in the root directory of the project).
In the above code, we are defining the attributes of the Post that we want and this code may be different for different use cases. Also, we have defined and implemented a factory method named Post.fromJSON() which is used to transform the received Map/JSON data structure to an abstract Post object. This is done for having a clear idea of what attributes a post is having.
Now, as we are ready with our post model, we will be building the UI component in which our post will be rendered and basically that will be a Card and we will define it with the name PostCard. We will create a new file inside the widgets folder named post_card.dart and the code for that UI is given below:
The above code can be defined in a different manner and the posts can be rendered in a different format as well. This UI will be applicable for a particular post/json object which we want to render. Now, let’s build the UI in which we can show a dynamic list of posts that we are getting in response.
NOTE: In the above code we have called a new widget named DetailsPage() and we have defined that later so be patient till we define and implement that.
For that, we need to create a new file named landing_page.dart and we will be defining a class LandingPage which will consist of the UI of the list of the card of posts. The code for that is given below:
In the above code, first of all, we are fetching the posts from the API inside the _fetchPosts() method. We are fetching the posts and storing those in a list of posts. After that, we are rendering the list of posts using the ListView.builder() widget. This implementation is a demo one and anyone can extend this up to any extent. Also, anyone can render the list of posts in any manner.
Till now, we are ready with our postcard, list of postcards and the UI for the home/landing page. Now, we will be implementing a details page which will be shown when a particular post is clicked/selected. Also earlier in this article, we have called this page to navigate so the implementation of that is given below:
Again this UI can be designed in any manner and it can be taken upto any extent. This implementation is a demo one that will give a detailed idea of implementation.
Last Words
In this article, we have implemented the JSON API provided by WordPress and written each and everything without using any library or package for wordpress as we had done in the last part of this article. Wordpress is a very convenient, easy to use and developer-friendly back-end solution that gives a lot of flexibility to different kinds of businesses and developers. So, it can be a good option as a back-end. And everyone knows how great Flutter is, so the combo of Flutter framework and Wordpress is really great and high scale applications can be built using these technologies.
If you found this article useful then do share it and please clap for the article. Thank you for being patient and I appreciate your interest in this article. Keep Fluttering :)
