WordPress

Before building anything in FlutterFlow, confirm that your WordPress site's REST API is publicly reachable. Open a browser and navigate to https://yoursite.com/wp-json/wp/v2/posts — you should see a JSON array of recent posts. If you get a 401 Unauthorized or 404 Not Found, you have a configuration issue to resolve first. Common causes: (1) a security plugin like Wordfence or iThemes Security has disabled REST API access for non-logged-in users — you'll need to whitelist the endpoint in the plugin settings; (2) the site is behind HTTP Auth (common on staging environments) — add the HTTP Auth credentials to every API Call header; (3) Pretty Permalinks are disabled in WordPress Settings → Permalinks, which breaks /wp-json routing — switch to any permalink structure other than 'Plain'. Once you can see the raw JSON in the browser, you're ready to build the API Group in FlutterFlow. Make a note of your site's base URL — you'll use it as the API Group base URL in the next step.

In FlutterFlow, click API Calls in the left navigation panel. Click the + Add button and choose Create API Group. Name the group 'WordPress' and set the Base URL to https://yoursite.com/wp-json/wp/v2 — replace 'yoursite.com' with your actual WordPress domain. Leave authentication as 'None' for now (public reads require no auth header). Click Save to create the group. Next, add your first API Call inside this group: click + Add API Call, name it 'Get Posts', set the method to GET, and enter /posts as the endpoint path. In the Query Parameters tab, click + Add Parameter and add two parameters: (1) name '_embed', value '1' — this tells WordPress to include the featured media and author in the response so you avoid extra requests per post; (2) name 'per_page', type Integer, default '10' — controls how many posts are returned. Click Response & Test, paste a sample posts response from your browser test into the Response Body field, then click Get Reponse Fields to auto-generate JSON paths. FlutterFlow will extract paths like $.title.rendered, $.excerpt.rendered, $.id, and nested paths like $._embedded['wp:featuredmedia'][0].source_url for the featured image. Map these into a Data Type called 'WPPost' with fields: id (Integer), title (String), excerpt (String), featuredImageUrl (String), content (String). Click Test API Call to confirm it returns live data.

1{
2  "Group Name": "WordPress",
3  "Base URL": "https://yoursite.com/wp-json/wp/v2",
4  "Calls": [
5    {
6      "Name": "Get Posts",
7      "Method": "GET",
8      "Endpoint": "/posts",
9      "Query Params": {
10        "_embed": "1",
11        "per_page": "[variable:perPage]",
12        "page": "[variable:page]",
13        "categories": "[variable:categoryId]"
14      },
15      "JSON Paths": {
16        "id": "$[*].id",
17        "title": "$[*].title.rendered",
18        "excerpt": "$[*].excerpt.rendered",
19        "featuredImageUrl": "$[*]._embedded['wp:featuredmedia'][0].source_url",
20        "content": "$[*].content.rendered",
21        "slug": "$[*].slug"
22      }
23    }
24  ]
25}

WordPress stores post content and excerpts as HTML strings in the content.rendered and excerpt.rendered fields. A standard Flutter Text widget will display the raw HTML tags (like <p>, <strong>, <img>) as literal text rather than rendering them. To display formatted post bodies, you need an HTML rendering Custom Widget. In FlutterFlow, go to Custom Code in the left nav, click + Add, and choose Widget. Name it 'HtmlContentWidget'. In the Dependencies field, add flutter_html as a pub.dev package (current version — check pub.dev for the latest). Paste the Dart code below. This widget accepts a single String parameter called htmlContent and renders it with flutter_html's Html widget, which handles headings, paragraphs, bold, italic, links, and inline images. After creating the widget, go to your post detail screen. Add the HtmlContentWidget from the Widget Palette under Custom Widgets. In the Properties panel, bind the htmlContent parameter to your WPPost.content field from your Data Type or page state. Set a reasonable width (Match Parent) and let the height be dynamic. Important: Custom Widgets do not render in FlutterFlow's web Test Mode — you must use Run mode or test on a real device or emulator to see the HTML rendered correctly. For post cards showing just an excerpt, you can use a simpler approach: strip the HTML tags using a Dart Custom Action (replace all <[^>]+> with an empty string) and display the result in a standard Text widget.

1import 'package:flutter/material.dart';
2import 'package:flutter_html/flutter_html.dart';
3
4class HtmlContentWidget extends StatelessWidget {
5  const HtmlContentWidget({
6    super.key,
7    required this.htmlContent,
8    this.width,
9    this.height,
10  });
11
12  final String htmlContent;
13  final double? width;
14  final double? height;
15
16  @override
17  Widget build(BuildContext context) {
18    return SizedBox(
19      width: width,
20      height: height,
21      child: SingleChildScrollView(
22        child: Html(
23          data: htmlContent,
24          style: {
25            'body': Style(
26              fontSize: FontSize(16.0),
27              fontFamily: 'Roboto',
28              color: Theme.of(context).textTheme.bodyLarge?.color,
29            ),
30            'h1': Style(fontSize: FontSize(24.0)),
31            'h2': Style(fontSize: FontSize(20.0)),
32            'p': Style(margin: Margins.only(bottom: 12.0)),
33          },
34        ),
35      ),
36    );
37  }
38}

If your app needs to create, update, or delete WordPress posts — not just read them — you'll use WordPress Application Passwords for authentication. Application Passwords are per-app tokens generated in WordPress Admin → Users → Your Profile → scroll to Application Passwords. Enter a name for the app, click Add New Application Password, and copy the generated password immediately (it's only shown once). The credential is used as HTTP Basic Auth: the header is Authorization: Basic base64(username:application_password). Since this credential must never be embedded in the Flutter app bundle, route authenticated requests through a Firebase Cloud Function. The function stores the WordPress username and Application Password as environment secrets (set via the Firebase Console → Functions → Configuration, or using firebase functions:secrets:set in the Firebase CLI). FlutterFlow calls your Cloud Function endpoint instead of WordPress directly — passing the post data as a JSON body. The function builds the WordPress API request with the Authorization header attached and forwards it. In FlutterFlow, add a new API Call in the WordPress group named 'Create Post (via proxy)'. Set the method to POST, and the endpoint to your Cloud Function URL (e.g., https://us-central1-your-project.cloudfunctions.net/wpProxy). Add a JSON body variable containing the post fields. This way, the Application Password never touches the client. If you'd rather skip building the proxy yourself, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function (Node.js) — index.js
2const { onRequest } = require('firebase-functions/v2/https');
3const { defineSecret } = require('firebase-functions/params');
4const fetch = require('node-fetch');
5
6const WP_USERNAME = defineSecret('WP_USERNAME');
7const WP_APP_PASSWORD = defineSecret('WP_APP_PASSWORD');
8const WP_BASE_URL = 'https://yoursite.com/wp-json/wp/v2';
9
10exports.wpProxy = onRequest(
11  { secrets: [WP_USERNAME, WP_APP_PASSWORD] },
12  async (req, res) => {
13    res.set('Access-Control-Allow-Origin', '*');
14    if (req.method === 'OPTIONS') {
15      res.set('Access-Control-Allow-Methods', 'POST');
16      res.set('Access-Control-Allow-Headers', 'Content-Type');
17      return res.status(204).send('');
18    }
19
20    const credentials = Buffer.from(
21      `${WP_USERNAME.value()}:${WP_APP_PASSWORD.value()}`
22    ).toString('base64');
23
24    const { endpoint, method, body } = req.body;
25    const wpResponse = await fetch(`${WP_BASE_URL}${endpoint}`, {
26      method: method || 'POST',
27      headers: {
28        Authorization: `Basic ${credentials}`,
29        'Content-Type': 'application/json',
30      },
31      body: JSON.stringify(body),
32    });
33
34    const data = await wpResponse.json();
35    return res.status(wpResponse.status).json(data);
36  }
37);

WordPress REST API supports cursor-based pagination via the page and per_page query parameters. For a FlutterFlow ListView showing blog posts, you'll want to implement pagination so the app doesn't fetch all posts at once — especially for sites with hundreds of entries. In your Get Posts API Call, ensure the page variable is defined with a default value of 1 (Integer type). In your ListView screen, add a Page State variable called currentPage (Integer, initial value 1). Use an Action Flow on your ListView's scroll position or a 'Load More' button: when triggered, increment currentPage by 1, then call the Get Posts API with the updated page value, and append the results to your existing list using a Combine action. For pull-to-refresh, wrap your ListView in a RefreshIndicator widget (available in FlutterFlow's widget palette). On the onRefresh callback, reset currentPage to 1 and re-fetch the posts — this replaces the existing list data. Add the per_page variable to the API Call and set it to 10 or 20 items based on your design. WordPress also returns total post count and total pages in the response headers (X-WP-Total and X-WP-TotalPages), which you can use to show a 'no more posts' indicator when you've reached the end of the list. Check the Headers tab in your API Call Response to read these values.