Building Flutter apps with WordPress Backend — Part 1
Flutter is well known for UI and cross-platform and now it is declared as #1 cross-platform framework of all time. Also, Wordpress is a strong and robust content management system(CMS) and almost everyone from IT industry must be knowing what Wordpress is. Wordpress provides us a very strong foundation of content management with hosting as well. And it is really easy for even a non-technical guy to work with Wordpress.
Now, the question comes in everybody’s mind that is Wordpress capable to do every crazy thing they want? And the answer is really simple, Yes. In fact WordPress provides a suitable large number of tools to all kind of tasks and do whatever you want. The Wordpress community is really strong and helpful as well.
WordPress is a developer-friendly CMS environment in which they provide a bunch of tools to do everything i.e. A developer has all controls in his hand. One of the developer-friendly tools that WordPress provides us is The great JSON API which can be used to play with data in the backend.
This API works like a normal API which can be used to perform every kind of database operations. This API is really developer-friendly and can be used with every front end technology.
Flutter works really fine with this API. In the Flutter framework, we are having two options to deal with the WordPress API.
- Using the flutter_wordpress package.
- Doing all the stuff by our own.
2nd one seems scary but it is more interesting than the first one. So, let us start building an application using option 1.
First of all, we are required to install the flutter_wordpress and all the other packages by adding the following code in our pubspec.yaml file.
Now, if you are using a Wordpress back-end then you must be having the JSON API for WordPress. For now, we will be using a demo WordPress API, which will provide us some dummy content for our app.
First of all, we are required to make a home page called landing_page.dart in the lib folder. This page will appear first when the app will be started. For the landing page, the following code is written.
In the above code, first of all, we have initialized the WordPress object with some of the basic properties in the WordPress constructor. These basic properties can be changed or some additional properties can be added. After that, we have defined _fetchPosts() method which will be used to fetch the posts from the API. In this method, the fetchPosts() method defined inside WordPress class is called on the WordPress object with some of the query parameters. Once again, these query parameters can be changed or added.
Now, after all these methods in place, we will be designing the UI of the page inside the build() method.
In this landing page, we are using a FutureBuilder widget as we are performing an asynchronous operation while fetching the posts. In this FutureBuilder widget, we are building a list of cards using the ListView.builder() widget. Now, we are done with our landing page. Now, for launching a browser for clicking on the hyperlinks, we will define a method named _launchUrl(). Here to render the excerpt, have used the flutter_html package as an excerpt in the of the post is present in HTML format.
So, after that, we are required to define a new file called details_page.dart inside the lib folder.
In the details page, we are displaying the full content of the post. This page is opened when the user will tap on the postcard. In the UI of the details page, we have rendered the content of the post using the flutter_html package as the content present in the API was in the HTML format.
Now, we are done with the code part of the app. Now it’s time to test the application.
Some of the screenshots of the app are:
Final Words
This app was a demo implementation of the flutter_wordpress package and this plugin can be used in different ways and with specific functionalities as well. As WordPress back-end is really robust and it’s really easy for a developer to set up all the configurations and settings in the back-end, it becomes a great option for the back-end of every kind of software application.
There are many different implementations and ways to achieve this kind of functionality and even better than this. This was one of the ways and in the successive parts, we will be having some good content regarding the different kinds of implementation.
Good Bye… Keep Fluttering:)
