Currently Flutter is hot in both Android and iOS development. I have personally used it to create a couple of personal apps. It’s great and very intuitive. Flutter employs Dart as it’s programming language. Both Flutter and Dart were created and are being primarily maintained by Google.

Dart is a client-optimized programming language for apps on multiple platforms. It is developed by Google and is used to build mobile, desktop, backend and web applications. Dart is an object-oriented, class defined, garbage-collected language using a C-style syntax that transcompiles optionally into JavaScript. If you want to learn about this awesome programmimg language then Dart.dev is a good place to start.

WordPress on the other hand needs no introduction. These days it’s not just a CMS but a framework. Plenty of themes and plugins exist for Worpdress.

Given the popularity of these two, wouldn’t it be great if we were able to use both. Use WordPress as backend then Flutter app as the client. This means you wouldn’t need to master server side programming language like PHP. Instead you can use a couple of the thousands of plugins that exist for free to create a powerful backend. For example you can use Woocommerce to create an online store/shop. Then you can use APIs to talk to mobile clients. Flutter makes this every easy given a couple of libraries written by developers.

In this piece we want to explore these libraries, otherwise called packages in the Dart/Flutter world.

1. Flutter WordPress

Flutter WordPress is a library that allows for easy communication between a Flutter app and the WordPress backend. It uses WordPress REST API v2 for this interaction.

Flutter WordPress Library

If your app is going to make use of authentication or other admin level APIs then the developer recommends you use these two authenthentication wordpress plugins:

  1. Application Passwords
  2. JWT Authentication for WP REST API (recommended)

How to use Flutter WordPress

  1. Go to your pubspec.yaml then add the following as a dependency:
flutter_wordpress: ^0.1.4

You can check for the latest version here.

  1. Import it in your code:
import 'package:flutter_wordpress/flutter_wordpress.dart' as wp;
  1. You instantiate WordPress:
wp.WordPress wordPress;

// adminName and adminKey is needed only for admin level APIs
wordPress = wp.WordPress(
  baseUrl: 'http://localhost',
  authenticator: wp.WordPressAuthenticator.JWT,
  adminName: '',
  adminKey: '',
);
  1. You then authenticate the user:
Future<wp.User> response = wordPress.authenticateUser(
  username: 'ChiefEditor',
  password: 'chiefeditor@123',
);

response.then((user) {
  createPost(user);
}).catchError((err) {
  print('Failed to fetch user: $err');
});
  1. Here’s how you can fetch wordpress posts and show them in your flutter app:
Future<List<wp.Post>> posts = wordPress.fetchPosts(
  params: wp.ParamsPostList(
    context: wp.WordPressContext.view,
    pageNum: 1,
    perPage: 20,
    order: wp.Order.desc,
    orderBy: wp.PostsOrderBy.date,
  ),
  fetchAuthor: true,
  fetchFeaturedMedia: true,
  fetchComments: true,
);
  1. And here’s how you can fetch users:
Future<List<wp.User>> users = wordPress.fetchUsers(
  params: wp.ParamsUserList(
    context: wp.WordPressContext.view,
    pageNum: 1,
    perPage: 30,
    order: wp.Order.asc,
    orderBy: wp.UsersOrderBy.name,
    role: wp.UserRole.subscriber,
  ),
);
  1. And here’s how to fetch comments:
Future<List<wp.Comment>> comments = wordPress.fetchComments(
  params: wp.ParamsCommentList(
    context: wp.WordPressContext.view,
    pageNum: 1,
    perPage: 30,
    includePostIDs: [1],
  ),
);
  1. Then creating a wordpress post via flutter is easy:
void createPost(wp.User user) {
  final post = wordPress.createPost(
    post: new wp.Post(
      title: 'First post as a Chief Editor',
      content: 'Blah! blah! blah!',
      excerpt: 'Discussion about blah!',
      author: user.id,
      commentStatus: wp.PostCommentStatus.open,
      pingStatus: wp.PostPingStatus.closed,
      status: wp.PostPageStatus.publish,
      format: wp.PostFormat.standard,
      sticky: true,
    ),
  );

  post.then((p) {
    print('Post created successfully with ID: ${p.id}');
    postComment(user, p);
  }).catchError((err) {
    print('Failed to create post: $err');
  });
}

Then to post a comment:

void postComment(wp.User user, wp.Post post) {
  final comment = wordPress.createComment(
    comment: new wp.Comment(
      author: user.id,
      post: post.id,
      content: "First!",
      parent: 0,
    ),
  );

  comment.then((c) {
    print('Comment successfully posted with ID: ${c.id}');
  }).catchError((err) {
    print('Failed to comment: $err');
  });
}

Download full example here.