Introducing Ghost Content API Flutter Plugin

Introducing Ghost Content API Flutter Plugin

If you have a Ghost blog, you can use our new plugin to quickly create your own Flutter mobile app using your own blog to feed the contents of your app using your blog pages, posts, tags, authors and settings.

Flutter

Made by Google, Flutter is a relatively new framework aimed at building beautiful, native apps for mobile, web and desktop.

Ghost

Ghost is a publishing platform enabling writers to focus on their writing. The Ghost Content API is a simple way to access the information in a Ghost blog using HTTP requests. Before today, there was only a JavaScript client library for developers to access posts and pages from a Ghost blog programmatically. We wanted to create a Flutter client library to use in mobile applications to turn a Ghost blog into a mobile app.

Introducing the Flutter Ghost Content API Plugin

This plugin wraps the Ghost Content API with convenient a convenient Flutter widget to access the contents of any ghost blog. The source code for the plugin is MIT-licensed and available on GitLab, and we have also made the source code for our mobile app for Learn Software available on GitLab so you can see our usage of the plugin.

How To Use The Plugin

There are four steps to use the plugin that we will go through in detail in this post:

  1. Generating an API key
  2. Add the plugin dependency to your project
  3. Configure the provider widget
  4. Call the plugin client to retrieve content

Generating an API Key

You will need to add a custom integration to your Ghost blog to generate an API key. This can be achieved via the "integrations" page of your admin settings:

After clicking "Add custom integration", you can name the integration anything you like and then you will see a Content API Key shown on the screen, alongside an Admin API Key and the API URL. Be sure to keep the Admin API Key private and take note of the Content API Key and API URL only.

Adding The Plugin Dependency

To add the dependency, add a new line to your pubspec.yaml file:

dependencies:
  ...
  flutter_ghost_content_api: <latest version>
  

You can check the latest version on the pub.dev website.

Configuring The Provider Widget

The GhostContentAPIProvider is a widget that needs to be at or near the root of the widget tree so that it is an ancestor to all of the pages that need access to its functionality.

In the following example, the GhostContentAPIProvider is created above the MaterialApp widget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GhostContentAPIProvider(
      client: GhostContentAPIClient(
        version: 'v2',
        url: 'https://your-subdomain.ghost.io',
        contentAPIkey: 'your content api key',
      ),
      child: MaterialApp(
        title: 'Flutter Demo',       
        home: MyHomePage(),
      ),
    );
  }
}

Note that the GhostContentAPIProvider requires a client GhostContentAPIClient to be supplied with the Content API Key and URL generated in an earlier section.

Retrieve Content

You can use a FutureBuilder to wrap calls to individual API endpoints:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Ghost"),
      ),
      body: FutureBuilder(
        future: GhostContentAPIProvider.of(context).getPosts(),
        builder: (BuildContext context, AsyncSnapshot<PostsResponse> snapshot) {
          // UI code
        },
      ),
    );
  }
}

For example, the Learn Software mobile app uses this approach to get the tags to display:

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return FutureBuilder(
      future: GhostContentAPIProvider.of(context).getTags(includes: [TagInclude.countPosts]),
      builder: (BuildContext context, AsyncSnapshot<TagsResponse> snapshot) {
        // UI code
      },
    );
  },
);

Limitations

There are two main limitations to consider when using Flutter and the Ghost Content API:

  1. Flutter cannot render HTML directly, so another plugin is required for this. We used the flutter_html plugin by Matthew Whitaker for this in our app, and it looks good.
  2. Flutter cannot open URLs directly, so another plugin is required for this. We used the official url_launcher plugin for this in our app.

Issues

If there are any missing features or other issues that you notice, please do let us know and we can try to resolve them. You can create an issue in the GitLab repository directly.

Show Comments

Get the latest posts delivered right to your inbox.