Slack API

Go to api.slack.com/apps and click 'Create New App'. Choose 'From scratch', name the app (e.g., 'FlutterFlow Notifier'), and select your workspace. Once created, navigate to 'Incoming Webhooks' in the left sidebar and toggle 'Activate Incoming Webhooks' on. Click 'Add New Webhook to Workspace', choose a target channel (e.g., `#notifications`), and click Allow. Copy the webhook URL — it looks like `https://hooks.slack.com/services/T00.../B00.../XXX`. For the full Web API, instead go to 'OAuth & Permissions' in the left sidebar, scroll to 'Scopes', and under 'Bot Token Scopes' add `chat:write`. Click 'Install to Workspace', confirm, and copy the 'Bot User OAuth Token' that starts with `xoxb-...`. Both the webhook URL and the bot token are secrets — do not paste them anywhere in FlutterFlow yet. Store them somewhere temporarily (a local text file or password manager) until you deploy the Cloud Function in the next step.

Because the bot token and webhook URL are secrets, they must live in a server environment, not in your Flutter app. Firebase Cloud Functions run Node.js on Google's servers — your FlutterFlow app calls the function's HTTPS URL, and the function makes the actual Slack request using the secret it holds in its runtime config. In the Firebase Console, open your project and go to Functions → Get started. If you prefer the CLI, set up Firebase CLI locally and run `firebase init functions`. In your `index.js` (or `index.ts`) file, add an HTTPS function that reads your Slack token from `process.env.SLACK_BOT_TOKEN` (or `functions.config().slack.token` if using the older SDK), builds the Slack request body with the incoming `channel` and `text` parameters, and POSTs to `https://slack.com/api/chat.postMessage`. Parse the JSON response and return `{ ok, ts, error }` back to FlutterFlow. Add CORS headers so the function is callable from the FlutterFlow web preview. Set the `SLACK_BOT_TOKEN` environment variable in the Firebase Console under Functions → select your function → Edit → Environment Variables, or use the CLI: `firebase functions:config:set slack.token='xoxb-...'`. Deploy with `firebase deploy --only functions`. Copy the deployed HTTPS URL — it looks like `https://us-central1-your-project.cloudfunctions.net/sendSlackMessage`.

1// functions/index.js (Firebase Cloud Function — Node.js 18)
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5exports.sendSlackMessage = functions.https.onRequest(async (req, res) => {
6  // Allow CORS for FlutterFlow web preview
7  res.set('Access-Control-Allow-Origin', '*');
8  res.set('Access-Control-Allow-Headers', 'Content-Type');
9  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
10
11  const { channel, text } = req.body;
12  if (!channel || !text) {
13    res.status(400).json({ ok: false, error: 'missing_channel_or_text' });
14    return;
15  }
16
17  const token = process.env.SLACK_BOT_TOKEN; // set in Firebase env vars
18  const response = await fetch('https://slack.com/api/chat.postMessage', {
19    method: 'POST',
20    headers: {
21      'Authorization': `Bearer ${token}`,
22      'Content-Type': 'application/json'
23    },
24    body: JSON.stringify({ channel, text })
25  });
26
27  const data = await response.json();
28  // IMPORTANT: Slack returns HTTP 200 even on failure — always check data.ok
29  res.status(200).json({ ok: data.ok, ts: data.ts, error: data.error || '' });
30});

Open your FlutterFlow project. In the left navigation, click API Calls. Click the + Add button and select Create API Group. Name the group 'Slack Proxy'. In the Base URL field, paste your Firebase Cloud Function's base HTTPS URL — for example `https://us-central1-your-project.cloudfunctions.net`. You do not need any shared headers here because authentication is handled inside the Cloud Function, not in FlutterFlow. Click Save to create the group. Next, inside the Slack Proxy group, click + Add → Create API Call. Name the call 'Send Message'. Set the Method to POST and the Endpoint to `/sendSlackMessage` (the function name). Go to the Body tab and set the Body Type to 'JSON'. Add two body fields: `channel` mapped to a Variable, and `text` mapped to a Variable. Click the Variables tab and create two variables: `channel` (String, no default) and `text` (String, no default). These variables will be populated at runtime from your widget. Go to the Response & Test tab. Expand Test Values, enter a real channel name (e.g., `#test`) and a text string, and click Test API Call. You should see a 200 response with `{ "ok": true, "ts": "..." }`. If you see `ok: false`, check the error field — a common one is `not_in_channel`, which means the bot hasn't been invited to that channel yet (do `/invite @YourBotName` in Slack).

1// API Call configuration reference (for documentation)
2{
3  "method": "POST",
4  "base_url": "https://us-central1-your-project.cloudfunctions.net",
5  "endpoint": "/sendSlackMessage",
6  "body_type": "JSON",
7  "body": {
8    "channel": "{{ channel }}",
9    "text": "{{ text }}"
10  },
11  "variables": [
12    { "name": "channel", "type": "String" },
13    { "name": "text", "type": "String" }
14  ]
15}

Now that the API Call works in the Test tab, go back to the Response & Test tab and click Generate JSON Paths from the successful response. FlutterFlow will parse the response body and create JSON Path entries automatically. You should see paths like `$.ok` (Boolean), `$.ts` (String), and `$.error` (String). These paths let you read the response values in your Action Flow. Next, go to the widget that should trigger the Slack message — for example a Button on your screen. Open the widget's Actions panel (click the widget → go to the Actions tab in the right sidebar). Click + Add Action. Under Integrations, select API Call. Choose the Slack Proxy group and the 'Send Message' call. In the variable bindings section, set `channel` to a widget value (e.g., a TextField state variable or a hardcoded channel string like `#alerts`) and `text` to another widget value or an App State variable. After the API Call action, add a Conditional Action: check if the response JSON path `$.ok` equals `true`. If true, navigate to a success screen or show a SnackBar with 'Message sent!' If false, show a SnackBar reading the `$.error` path (e.g., `not_in_channel`, `channel_not_found`). This is critical — Slack returns HTTP 200 even when the call fails, so the only reliable signal is `ok: false` in the JSON body.

Before your integration is production-ready, make sure the Slack bot has access to every channel you plan to post to. In Slack, open the target channel, type `/invite @YourBotName`, and press Enter. Do this for each channel in your list. If your app has a dynamic channel selector (e.g., a DropDown widget with a list of channel names or IDs), remember that the bot must be invited to each of those channels manually — there is no auto-join for bots without additional scopes. Also decide whether you want to post to a channel by its display name (`#general`) or by channel ID (`C01234ABC`). Using the channel ID is more robust — display names can change, but IDs never do. You can find a channel's ID by clicking the channel name in the Slack desktop app and scrolling to the bottom of the About section. If you need to post to a private channel, the bot must be explicitly invited there too — private channels require `chat:write` scope AND membership. For rate limiting: the `chat.postMessage` endpoint allows roughly one message per second per channel on the standard rate tier. If your app might burst multiple posts (e.g., sending to 10 users simultaneously), add server-side batching in the Cloud Function rather than calling the FlutterFlow API Call in a loop on the client. Finally, if you want users to see a real Slack thread inside your Flutter app, you'll need a separate `GET /conversations.replies` or `GET /conversations.history` call — those read operations also require the `channels:history` scope on the bot token.