Learn how to integrate a headless CMS in a Flutter app with simple steps and working code examples. Get content management ready in minutes. Our Headless CMS Support Team is always here to help you.
How to Integrate a Headless CMS in a Flutter App
Managing content in mobile apps can be challenging. Luckily, Flutter makes app development smooth, and combining it with a headless CMS brings full control over content. In this guide, we will show exactly how to integrate a headless CMS in a Flutter app, step by step, with working code you can implement immediately.
An Overview
Understanding Flutter
Flutter is Google’s open-source UI toolkit for building natively compiled, multi-platform applications from a single codebase. Its efficiency allows developers to focus on features rather than juggling multiple platforms.
Adding a Headless CMS to Your Flutter App in Minutes
Adding a CMS like ContentChef to Flutter is straightforward. You can have it ready in just four minutes. First, you need a trial account with ContentChef. Once registered, note your SpaceId and Online API key from the dashboard. Also, grab the channel ID, which for this demo is “example-ch”.
Here’s an example of the content JSON you’ll receive:
{
"title": "ContentChef",
"description": "Accelerate content management for any digital experience.",
"url": "https://www.contentchef.io",
"image": "demo-xxx/7vZXiMPqEg7/contentChef-logo"
}Assume you already have a working Flutter app, or start a new one with the usual Flutter commands. Then, add the ContentChef Dart SDK to your dependencies:
dependencies:
contentchef_dart: ^1.0.0Next, fetch the package using:
flutter pub get
Fetching Content in Flutter
Create a file to initialize the ContentChef client with your API data:
import 'package:contentchef_dart/contentchef_dart.dart';
void main() {
var configuration = Configuration(spaceId: SPACE_ID);
var contentChef = (configuration: configuration);
}Now, get content using its 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));
}At this point, your Flutter app is powered by ContentChef Delivery API. You can now pass the result object wherever you want to render the content.
Start Managing Flutter Content Today
Integrating GraphQL for Advanced CMS Features
For more advanced use cases, you can leverage GraphQL in Flutter. First, add the graphql_flutter package in your pubspec.yaml. Then initialize the GraphQL client:
import 'package:flutter/material.dart';
import 'package:graphql_flutter/graphql_flutter.dart';
void main() {
final HttpLink httpLink = HttpLink(
'https://api-<region>.hygraph.com/v2/<some hash>/master',
);
final AuthLink authLink = AuthLink(
getToken: () async => 'Bearer YOUR_HYGRAPH_TOKEN',
);
final Link link = authLink.concat(httpLink);
final ValueNotifier<GraphQLClient> client = ValueNotifier(
GraphQLClient(
link: link,
cache: GraphQLCache(store: InMemoryStore()),
),
);
final app = GraphQLProvider(
client: client,
child: MyApp(),
);
runApp(app);
}Once the client is ready, use it in your UI code to fetch data:
class ProductList extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Query(
options: QueryOptions(
document: gql(
r'''
query GetProducts {
products {
name
description
slug
availability
image
}
}
''',
),
),
builder: (QueryResult result, { VoidCallback? refetch, FetchMore? fetchMore }) {
if (result.hasException) {
return Text(result.exception.toString());
}
if (result.isLoading) {
return CircularProgressIndicator();
}
List products = result.data['products'];
return ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return ListTile(
title: Text(product['name']),
subtitle: Text(product['description']),
trailing: product['availability']
? Icon(Icons.check_circle, color: Colors.green)
: Icon(Icons.remove_circle, color: Colors.red),
onTap: () {
// Navigate to product details page
},
);
},
);
},
);
}
}[If needed, Our team is available 24/7 for additional assistance.]
Conclusion
Now, you can integrate a headless CMS in a Flutter app with full control over your content. From basic content fetching using ContentChef to advanced GraphQL queries, your app is ready to handle dynamic data efficiently. Use this guide to implement your own CMS workflow in Flutter and reduce development overhead drastically.
By following these steps, your app not only gets powerful content management but also maintains speed, efficiency, and flexibility for future updates.
