How to Integrate a Custom CMS (Content Management System) with FlutterFlow

In FlutterFlow, go to API Calls and create a new API Group. Set the base URL to your CMS API endpoint: for Contentful it is https://cdn.contentful.com/spaces/{spaceId}/environments/master, for Strapi it is https://your-strapi-url.com/api, for Sanity it is https://{projectId}.api.sanity.io/v2021-10-21/data/query/production. Add a header for authentication: Contentful uses 'Authorization: Bearer {accessToken}', Strapi uses 'Authorization: Bearer {apiToken}', Sanity uses query parameters or bearer token. Create three API calls within the group: getEntries (list all entries of a content type), getEntryById (single entry by ID), and searchEntries (filtered query).

For the getEntries call, set the path to the content type listing endpoint. Contentful: /entries?content_type={contentType}&limit=20&order=-sys.createdAt. Strapi: /{contentType}?sort=createdAt:desc&pagination[limit]=20. Sanity: ?query=*[_type=="{contentType}"][0..19]|order(_createdAt desc). Add contentType as a variable parameter. Test the API call in FlutterFlow's API tester and verify the response. For getEntryById, set the path to fetch a single entry: Contentful /entries/{entryId}, Strapi /{contentType}/{id}, Sanity ?query=*[_id=="{id}"][0]. Map the response fields in FlutterFlow's JSON path viewer to extract title, body, imageUrl, author, publishedDate.

Create a ContentListPage with a ListView. Add a Backend Query using the getEntries API call. Map each list item to a ContentCard Container showing: title Text (from JSON path to title field), excerpt Text (first 100 characters of body), featured image using the Image widget (from JSON path to image URL), and published date Text. Tapping a card navigates to a ContentDetailPage passing the entry ID as a route parameter. On the detail page, call getEntryById and display: title as H1 Text, author name, published date, featured image (full width), and body content. For plain text bodies, use a Text widget. For rich text bodies, use the flutter_html Custom Widget in the next step.

Most headless CMS platforms return body content as HTML or rich text. Create a Custom Widget named RichContentRenderer that uses the flutter_html package to render HTML content. Pass the HTML string from the CMS response as a parameter. Configure custom tag styles for headings, paragraphs, lists, blockquotes, and code blocks to match your app's design theme. Handle images within the HTML by setting the customImageRenders to use CachedNetworkImage. Handle links by launching URLs via url_launcher when tapped. This widget converts CMS rich text into properly styled native Flutter elements.

1// Custom Widget: RichContentRenderer
2import 'package:flutter/material.dart';
3import 'package:flutter_html/flutter_html.dart';
4import 'package:url_launcher/url_launcher.dart';
5
6class RichContentRenderer extends StatelessWidget {
7  final String htmlContent;
8  final double width;
9  final double height;
10  const RichContentRenderer({
11    super.key,
12    required this.htmlContent,
13    required this.width,
14    required this.height,
15  });
16
17  @override
18  Widget build(BuildContext context) {
19    return SizedBox(
20      width: width,
21      child: Html(
22        data: htmlContent,
23        style: {
24          'h1': Style(
25            fontSize: FontSize(28),
26            fontWeight: FontWeight.bold,
27            margin: Margins.only(
28              bottom: 16, top: 24)),
29          'h2': Style(
30            fontSize: FontSize(22),
31            fontWeight: FontWeight.bold,
32            margin: Margins.only(
33              bottom: 12, top: 20)),
34          'p': Style(
35            fontSize: FontSize(16),
36            lineHeight: LineHeight(1.6),
37            margin: Margins.only(bottom: 12)),
38          'blockquote': Style(
39            backgroundColor: const Color(0xFFF5F5F5),
40            padding: HtmlPaddings.all(16),
41            margin: Margins.symmetric(
42              vertical: 12)),
43          'code': Style(
44            backgroundColor: const Color(0xFFF0F0F0),
45            fontFamily: 'monospace',
46            padding: HtmlPaddings.symmetric(
47              horizontal: 4, vertical: 2)),
48        },
49        onLinkTap: (url, _, __) {
50          if (url != null) launchUrl(Uri.parse(url));
51        },
52      ),
53    );
54  }
55}

Calling the CMS API on every page load is slow and may hit rate limits. Set up a caching layer: create a cms_content Firestore collection with fields matching your CMS content fields (title, body, imageUrl, author, publishedDate, contentType, cmsEntryId, lastSynced). Build a Cloud Function triggered by HTTP (webhook). Configure your CMS webhook to call this function URL whenever content is published or updated. The function receives the updated content, transforms it to match your Firestore schema, and writes or updates the document in cms_content. Update your FlutterFlow pages to read from Firestore cms_content instead of the CMS API. Keep the direct API calls as a fallback for cache misses.