MySQL

Choose the API approach that matches your hosting setup. The two most common options are a PHP script on shared hosting (fastest for WordPress/LAMP users) and a Node.js endpoint or Cloud Function (better for managed databases like PlanetScale and RDS). For the PHP path: create a new file api.php in your hosting account's public directory (accessible via your domain, e.g., https://yoursite.com/api.php). Use PHP's PDO extension with prepared statements to connect to MySQL and return JSON. Store the database password in an environment variable or a configuration file outside the web root — not hardcoded in api.php. Add a secret token check at the top of the file so only your FlutterFlow app can call it. For Node.js/Cloud Functions: use the mysql2 npm package (better than the older mysql package for async/await). Create a GET /items route with LIMIT/OFFSET pagination, a POST /items route for inserts, a PUT /items/:id route for updates, and a DELETE /items/:id route for deletes. Store the MySQL connection string in environment variables on your hosting platform (Render, Railway, Cloud Functions Application Settings) — never in source code. For PlanetScale specifically, the connection requires TLS and uses branches (main, dev). Your Node.js/PHP host manages the TLS connection and branch selection; FlutterFlow simply calls your API. The ssl setting in the mysql2 connection config must be enabled: ssl: { rejectUnauthorized: true }. For RDS/Aurora, add your API host's IP to the RDS security group's inbound rules (port 3306) and enable SSL/TLS on the connection using the AWS RDS certificate bundle — the cert file lives on the API host, not in FlutterFlow.

1<?php
2// api.php — minimal PHP REST wrapper for MySQL
3header('Content-Type: application/json');
4header('Access-Control-Allow-Origin: *');
5header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS');
6header('Access-Control-Allow-Headers: Content-Type, X-App-Token');
7
8if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') { http_response_code(200); exit; }
9
10// Simple token auth — compare against env var or config file
11$token = $_SERVER['HTTP_X_APP_TOKEN'] ?? '';
12if ($token !== getenv('APP_SECRET_TOKEN')) {
13  http_response_code(401); echo json_encode(['error' => 'Unauthorized']); exit;
14}
15
16$pdo = new PDO(
17  'mysql:host=' . getenv('DB_HOST') . ';dbname=' . getenv('DB_NAME') . ';charset=utf8mb4',
18  getenv('DB_USER'),
19  getenv('DB_PASS'),
20  [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
21);
22
23$method = $_SERVER['REQUEST_METHOD'];
24$action = $_GET['action'] ?? 'list';
25
26if ($method === 'GET' && $action === 'list') {
27  $page = max(1, intval($_GET['page'] ?? 1));
28  $limit = 20;
29  $offset = ($page - 1) * $limit;
30  $stmt = $pdo->prepare('SELECT * FROM items ORDER BY id DESC LIMIT :limit OFFSET :offset');
31  $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
32  $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
33  $stmt->execute();
34  echo json_encode(['items' => $stmt->fetchAll(PDO::FETCH_ASSOC)]);
35} elseif ($method === 'POST') {
36  $body = json_decode(file_get_contents('php://input'), true);
37  $stmt = $pdo->prepare('INSERT INTO items (name, value) VALUES (:name, :value)');
38  $stmt->execute([':name' => $body['name'], ':value' => $body['value']]);
39  echo json_encode(['id' => $pdo->lastInsertId(), 'success' => true]);
40}

Your MySQL username, password, and connection string are secrets — they must never appear in FlutterFlow variables, App Values, or any Dart code. On shared hosting (cPanel), set environment variables through cPanel → Software → MultiPHP INI Editor, or store them in a config file placed above the web root (one directory above public_html) so web visitors cannot access it directly. Your PHP script reads the file with require_once('../config.php') and references variables from there. For Node.js on platforms like Render, Railway, or Google Cloud Functions, add environment variables through the platform's settings UI: DB_HOST, DB_PORT, DB_NAME, DB_USER, DB_PASSWORD, and DB_SSL_CERT (path to the SSL certificate file). The mysql2 library reads these at connection time. For PlanetScale, the connection requires SSL and PlanetScale's 'isah' root CA. In Node.js with mysql2: pass ssl: { rejectUnauthorized: true } in the connection config. PlanetScale also provides a 'connection string' in their dashboard that you can paste directly into an environment variable — it includes all parameters. For Amazon RDS, download the AWS RDS SSL certificate bundle from AWS documentation, upload it to your API host, and reference its path in the mysql2 ssl config: ssl: { ca: fs.readFileSync('/path/to/rds-ca-bundle.pem') }. This ensures your API server verifies the RDS server's identity, preventing man-in-the-middle attacks. Whitelist your API host's IP address in the RDS Security Group inbound rules (port 3306) in the AWS console.

1// Node.js MySQL connection with SSL for RDS/PlanetScale
2const mysql = require('mysql2/promise');
3const fs = require('fs');
4
5const pool = mysql.createPool({
6  host: process.env.DB_HOST,
7  port: parseInt(process.env.DB_PORT || '3306'),
8  database: process.env.DB_NAME,
9  user: process.env.DB_USER,
10  password: process.env.DB_PASS,
11  waitForConnections: true,
12  connectionLimit: 10,
13  ssl: {
14    // For RDS: path to the certificate bundle
15    // ca: fs.readFileSync('./rds-ca-bundle.pem'),
16    rejectUnauthorized: true // For PlanetScale
17  }
18});
19
20module.exports = pool;

With your MySQL REST API running, open your FlutterFlow project and click API Calls in the left navigation panel. Click + Add → Create API Group. Name it 'MySQL API' and set the Base URL to your REST endpoint (e.g., https://yoursite.com or https://yourapi.railway.app/api). Under Headers, add 'X-App-Token: your-secret-token-value' and 'Content-Type: application/json'. Store the token value in an App Values constant (Settings → App Values → + Add) to avoid duplicating it across multiple API Calls. Inside the API Group, add individual API Calls for each operation. For ListItems: Method = GET, Path = /api.php?action=list (or /items for Node.js). Add a 'page' variable with a default of '1' and include it in the path: ?action=list&page={{page}}. Go to Response & Test, paste a sample response ({"items": [{"id": 1, "name": "Widget", "value": "Blue"}]}), and click Generate JSON Paths. FlutterFlow will extract $.items as the list path and $.items[0].id, $.items[0].name, $.items[0].value as field paths. For CreateItem: Method = POST, Path = /api.php (or /items), Body = {"name": "{{itemName}}", "value": "{{itemValue}}"}. Add the corresponding variables. Create UpdateItem and DeleteItem API Calls similarly. This gives you a complete CRUD API surface in FlutterFlow. Each operation has its own call, which makes action flow logic in the widget editor clear and testable independently.

1// Sample API Call config (JSON representation)
2{
3  "group_name": "MySQL API",
4  "base_url": "https://yoursite.com",
5  "headers": {
6    "X-App-Token": "{{appToken}}",
7    "Content-Type": "application/json"
8  },
9  "calls": [
10    {
11      "name": "ListItems",
12      "method": "GET",
13      "path": "/api.php?action=list&page={{page}}",
14      "variables": ["page"]
15    },
16    {
17      "name": "CreateItem",
18      "method": "POST",
19      "path": "/api.php",
20      "body": { "name": "{{itemName}}", "value": "{{itemValue}}" }
21    },
22    {
23      "name": "DeleteItem",
24      "method": "DELETE",
25      "path": "/api.php?action=delete&id={{itemId}}",
26      "variables": ["itemId"]
27    }
28  ]
29}

MySQL column names are typically snake_case (user_id, created_at) or sometimes camelCase depending on your query's aliases. FlutterFlow's JSON path matching is case-sensitive, so the paths must match your actual API response exactly. After running the API Call test and generating JSON Paths, go to Data Types in the left navigation panel → + Add a new Data Type. Name it 'MySQLItem' and add fields matching your response: id (Integer), name (String), value (String), createdAt (String). Map each field to its JSON path: $.items[0].id, $.items[0].name, and so on. Drag a ListView onto your canvas. In the ListView properties, set the Data Source to the ListItems API Call and the Data Type to MySQLItem. FlutterFlow will offer auto-suggestions for Text and Image widgets pre-bound to mysqlItem.name, mysqlItem.value, and so on. For date fields, use a Transform function in the widget binding to format the createdAt string into a human-readable date. For pagination, add two buttons to your page: 'Previous' and 'Next'. Each button modifies a page-level state variable (pageNumber) — decrement for Previous, increment for Next. Use a Conditional widget to hide Previous when pageNumber is 1. Set the ListView's refresh trigger to the pageNumber state variable so it re-fetches ListItems with the new page value automatically. For a smoother UX, add a loading state that shows a shimmer skeleton while the next page is loading. If your MySQL database has thousands of rows, also implement keyset pagination on the server side (WHERE id > lastSeenId) rather than OFFSET-based pagination, which becomes slow on large tables.

With read operations working, wire up create, update, and delete. For a 'Create Item' flow, add a Form widget (or individual TextFields) to a new page or popup. Connect a Submit button to an Action Flow: first run form validation (check required fields), then call the CreateItem API Call with the form field values as variables. After a successful response (check the API response code — it should be 200 or 201), navigate back or close the popup and trigger a refresh of the ListView. Show an alert dialog if the API returns an error. For delete, add a swipe-to-dismiss action on each ListView row or a Delete button on the detail page. Trigger the DeleteItem API Call with the item's id variable, then remove the item from the local list state or refresh the full list. For update, follow the same pattern as create but use the PUT /items/{{itemId}} endpoint (Node.js) or ?action=update&id={{itemId}} (PHP) with the updated field values in the request body. Error handling matters especially for MySQL because your REST layer may return custom error messages for validation failures (duplicate email, missing required field) or infrastructure errors (connection timeout, table lock). In FlutterFlow's Action Flow Editor, use the API Response condition node after every write API Call to branch on success vs. failure. Parse the error message from the response body (JSON path $.error or $.message) and display it to the user in an alert dialog so they understand what went wrong and can correct it. CORS must be set correctly in your PHP header() calls or Node.js middleware for web builds. Re-test all write operations in FlutterFlow's web preview mode to confirm CORS headers are correct — write operations (POST, PUT, DELETE) send a preflight OPTIONS request that must return 200 with the right CORS headers before the actual request fires.