DEV Community

idawnwon
idawnwon

Posted on

Connect Wordpress API to Flutter

After explored WordPress, I found it is really an easy-to-use yet powerful CMS backend. I decided to use Flutter to develop a front-end, CRUD data directly from WordPress through API.

1. Configure "JWT Authentication for WP-API"

This is a plugin for WordPress.

1.1 Search and Download "JWT Authentication for WP-API" in WordPress Plugin Market. (DON'T activate it for now.)

1.2 Edit .htaccess file, add lines below, between <IfModule mod_rewrite.c> and </IfModule> tag.

RewriteEngine on
RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]
Enter fullscreen mode Exit fullscreen mode

1.3 Edit wp-config.php file, add lines below, right after define('AUTH_KEY', '...');define('SECURE_AUTH_KEY', '...');define('LOGGED_IN_KEY', '...');define('NONCE_KEY', '...');define('AUTH_SALT', '...');define('SECURE_AUTH_SALT', '...');define('LOGGED_IN_SALT', '...');define('NONCE_SALT', '...');

define('JWT_AUTH_SECRET_KEY', 'YOUR_KEY_HERE');
define('JWT_AUTH_CORS_ENABLE', true);
Enter fullscreen mode Exit fullscreen mode

Replace 'YOUR_KEY_HERE' with your key. Strongly recommend you to get one random key at this trusted site.
Alt TextJust copy anyone you like.

1.4 Activate "JWT Authentication for WP-API" in your WordPress panel.

2. Edit pubspec.yaml file

This file locates in your flutter project folder.
Add following lines under dependencies: block:

flutter_wordpress: ^0.2.0
flutter_html: ^1.1.0
url_launcher: ^5.7.10
Enter fullscreen mode Exit fullscreen mode

The version numbers are not constant. I googled each one's latest version on November 24, 2020. Maybe there would be newer versions at the time you are reading here.

Thanks to Morten Rand-Hendriksen's tutorial on Lynda.com

Hope this helps!

So proud to be a coder!

Top comments (3)

Collapse
 
kris profile image
0xAirdropfarmer

Thanks for sharing this article. Was desperately looking for an article that helps to learn how to fetch data from WordPress API. And, this article explains everything very easily and properly. While doing some research, I also found out some of the most amazing Flutter WordPress app templates that are available in the market which provide superb UI and WordPress API already integrated.

Collapse
 
pablonax profile image
Pablo Discobar

wow, that's awesome! I really like it! if you are interested in this topic, then check this article - dev.to/pablonax/free-flutter-templ...

Collapse
 
napestershine profile image
napestershine

how will you do it in nginx?