Add a editorial console to your Flutter app with our headless CMS

Adding advanced CMS capabilities to a Flutter application is quick and easy. In this guide, we will show how you can add ContentChef as your headless cms system to any Flutter app.

Setting up

We will use the example content that comes packed with every trial account of ContentChef, so to get started, you need to start the 30-day free trial. After registering here, note down your SpaceId and Online API key that you find right in your dashboard home page.

You also need the channel ID that for this demo is "example-ch".

And this is an example of the payload of content JSON we will get from our Delivery API, it's a simple content repesenting a website with a url, a title and a image.

    {
        "title": "ContentChef",
        "description": "Accelerate content management for any digital experience.",
        "url": "https://www.contentchef.io",
        "image": "demo-xxx/7vZXiMPqEg7/contentChef-logo"
    }

We suppose that you already have a working Flutter app or just start a new onw with the usual Flutter commands and be sure to have evrything in place.

Now it's time to add the ContentChef Dart SDK to your dependecies

    dependencies:
        contentchef_dart: ^1.0.0

And now get it

# get it using flutter
flutter pub get

Getting content from a Flutter app

Start by creating a file to instantiate the ContentChef client with the data you have noted down before.

import 'package:contentchef_dart/contentchef_dart.dart';

    void main() {

        var configuration = Configuration(spaceId: SPACE_ID);
        var contentChef = (configuration: configuration);

    }

And now, let's see how to get a content from it's PublicID and print it as JSON.

        var getContentFilters = GetContentFilters(publicId: 'content-chef-site');

        var onlineChannel = contentChef.getOnlineChannel(apiKey: ONLINE_API_KEY, publishingChannel: PUBLISHING_CHANNEL);

        try {
            var result = await onlineChannel.getContent(filters: getContentFilters);
            print(jsonEncode(result));
        } catch(e) {
            print(jsonEncode(e));
        }

And now you have evritying in place, and you can simply pass the result object where you need to redere it's properries.

Your app now is powered by ContentChef Delivery API. This is a simple example, and maybe you need more advanced features or you want to optimize the number of calls to our API, so just feel free to explore our docs o reach out to our development team.

Headless CMS for several frontend stacks including

React, VueJs, React Native, Go, Java, Kotlin, Swift, and many more!