MyFitnessPal

Before building anything, confirm that MyFitnessPal has no public API available. Go to myfitnesspal.com/api — you'll find either a closed sign-up page or a statement that the program is discontinued. Do not use unofficial endpoints or scrapers; they violate MFP's terms and break without warning. Now choose between the two supported paths: **Path A — CSV import:** Your users export their diary from MyFitnessPal → Settings → Diary Settings → Export Diary as CSV. You provide a UI in your FlutterFlow app where they can upload that file. This is a one-time historical snapshot — not a live sync. It works well for wellness coach apps that periodically review client history. **Path B — Nutritionix live integration:** You build a food-search and meal-logging UI powered by the Nutritionix API, giving users real-time nutrition lookups without needing a MyFitnessPal account at all. This is the better choice for any app targeting ongoing daily tracking. For most product scenarios, Path B delivers more value. The steps below cover Path B (Nutritionix) as the primary flow, with notes on the Firestore CSV approach where relevant. If you are on Path A, skip directly to Step 3 and configure a Firestore collection to receive the uploaded CSV data.

Your Nutritionix app ID and app key are secrets. If you put them in a FlutterFlow API Call header, they will be compiled into your app's binary and can be extracted from the APK or web bundle by anyone who downloads your app. Even if they're short strings, exposing them lets third parties burn through your API quota and potentially your billing. To fix this, deploy a Firebase Cloud Function (or Supabase Edge Function) that holds the credentials server-side and proxies requests to Nutritionix on behalf of your app. Here is a minimal Firebase Cloud Function in Node.js. Deploy it from the Firebase console or Firebase CLI, and set the two secrets as environment variables in the Cloud Function's configuration rather than hardcoding them: ```javascript const functions = require('firebase-functions'); const axios = require('axios'); exports.nutritionixSearch = functions.https.onRequest(async (req, res) => { res.set('Access-Control-Allow-Origin', '*'); if (req.method === 'OPTIONS') { res.set('Access-Control-Allow-Methods', 'POST'); res.set('Access-Control-Allow-Headers', 'Content-Type'); return res.status(204).send(''); } const { query } = req.body; if (!query) return res.status(400).json({ error: 'query is required' }); try { const response = await axios.post( 'https://trackapi.nutritionix.com/v2/natural/nutrients', { query }, { headers: { 'x-app-id': process.env.NUTRITIONIX_APP_ID, 'x-app-key': process.env.NUTRITIONIX_APP_KEY, 'Content-Type': 'application/json' } } ); return res.json(response.data); } catch (err) { return res.status(err.response?.status || 500).json({ error: err.message }); } }); ``` Set your environment variables in the Firebase console under Cloud Functions → your function → Edit → Environment variables, adding `NUTRITIONIX_APP_ID` and `NUTRITIONIX_APP_KEY`. Copy the deployed function URL — you'll use it in the next step.

1const functions = require('firebase-functions');
2const axios = require('axios');
3
4exports.nutritionixSearch = functions.https.onRequest(async (req, res) => {
5  res.set('Access-Control-Allow-Origin', '*');
6  if (req.method === 'OPTIONS') {
7    res.set('Access-Control-Allow-Methods', 'POST');
8    res.set('Access-Control-Allow-Headers', 'Content-Type');
9    return res.status(204).send('');
10  }
11  const { query } = req.body;
12  if (!query) return res.status(400).json({ error: 'query is required' });
13  try {
14    const response = await axios.post(
15      'https://trackapi.nutritionix.com/v2/natural/nutrients',
16      { query },
17      {
18        headers: {
19          'x-app-id': process.env.NUTRITIONIX_APP_ID,
20          'x-app-key': process.env.NUTRITIONIX_APP_KEY,
21          'Content-Type': 'application/json'
22        }
23      }
24    );
25    return res.json(response.data);
26  } catch (err) {
27    return res.status(err.response?.status || 500).json({ error: err.message });
28  }
29});

With the proxy deployed, you're ready to build the API Group in FlutterFlow that your app will call. Open your FlutterFlow project, click API Calls in the left navigation panel, then click + Add and select Create API Group. Name it 'Nutritionix' (or similar). In the Base URL field, paste your Cloud Function URL — for example, `https://us-central1-YOUR_PROJECT.cloudfunctions.net`. You do NOT paste the Nutritionix base URL here; the Cloud Function is your backend. With the API Group created, click + Add API Call inside that group to add the food-search call. Name it 'searchFood'. Set the method to POST and the endpoint to `/nutritionixSearch` (matching the function name). Under the Body tab, set the content type to JSON and add a body with the variable `{{ query }}`. To create the variable, go to the Variables tab, click + Add, name it `query`, set the type to String. Your full API Call config should look like this: ```json { "method": "POST", "endpoint": "/nutritionixSearch", "body": { "query": "{{ query }}" } } ``` Switch to the Response & Test tab. In the Body input, paste a sample Nutritionix response (search for 'chicken breast' in your deployed function using Postman and copy the JSON output). Click Generate JSON Paths and FlutterFlow will auto-detect paths like `$.foods[0].food_name`, `$.foods[0].nf_calories`, `$.foods[0].nf_protein`, `$.foods[0].nf_total_carbohydrate`, `$.foods[0].nf_total_fat`. Name each one clearly — `foodName`, `calories`, `protein`, `carbs`, `fat`.

1{
2  "method": "POST",
3  "endpoint": "/nutritionixSearch",
4  "headers": {},
5  "body": {
6    "query": "{{ query }}"
7  },
8  "json_paths": {
9    "foodName": "$.foods[0].food_name",
10    "calories": "$.foods[0].nf_calories",
11    "protein": "$.foods[0].nf_protein",
12    "carbs": "$.foods[0].nf_total_carbohydrate",
13    "fat": "$.foods[0].nf_total_fat",
14    "servingQty": "$.foods[0].serving_qty",
15    "servingUnit": "$.foods[0].serving_unit"
16  }
17}

Now create a custom Data Type in FlutterFlow to store nutrition results cleanly. Go to the Data panel in the left nav, click Custom Data Types → + Add, and name it `NutritionItem`. Add fields: `foodName` (String), `calories` (Double), `protein` (Double), `carbs` (Double), `fat` (Double), `servingQty` (Double), `servingUnit` (String). Next, add an App State variable: go to App State → + Add, name it `searchResults`, set it to a List of `NutritionItem`, and check Persisted if you want results to survive navigation. Now build the search screen. Add a TextField widget for the food query — name it `foodQueryField`. Add a Button below it labelled 'Search'. On the Button's Actions panel, + Add Action → Backend/API Calls → API Call → select your Nutritionix / searchFood call. Set the `query` variable to the `foodQueryField`'s value. After the API Call action, add an Update App State action that updates `searchResults` by mapping the API response: `foodName` → `searchResults[0].foodName`, and so on for each field. Then add a ListView widget bound to `searchResults` — each list tile displays `foodName`, `calories` kcal, and macros as Text widgets. Include a 'Log Meal' button on each tile that writes the item to a Firestore `meals` collection with the user's UID and today's date. For the CSV path: if you're on Path A, add a File Upload widget and an action that reads the uploaded CSV, parses rows, and writes each row as a Firestore document. FlutterFlow's Firestore integration handles the writes without an API key.

The most useful screen after search-and-log is a daily summary that aggregates the user's logged meals for today. In FlutterFlow, add a new screen called 'Dashboard' or 'Today's Nutrition'. Add a Firestore Query as the data source on that page: filter the `meals` collection where `userId == currentUser.uid` AND `date == today's date` (store date as a string in YYYY-MM-DD format so querying is straightforward). Bind Text widgets to show total calories, total protein, total carbs, and total fat — you'll need to sum these in FlutterFlow using a custom function or by reading aggregated values. For a simpler approach, write aggregated totals back to a separate Firestore document (`dailySummary/{userId}/{date}`) whenever a meal is logged, and bind the summary screen to that document. For a chart, add a Bar Chart or Line Chart widget. FlutterFlow's chart widgets accept a list of data points — you can bind the last 7 days of daily calorie totals from a `weeklyCalories` list in App State (populated by querying Firestore for the past 7 days on page load). Label the x-axis with day names and the y-axis with calories. If you'd rather skip building the nutrition proxy and dashboard yourself, RapidDev's team builds FlutterFlow integrations like this weekly — including the Cloud Function setup, Data Types, and chart binding. Book a free scoping call at rapidevelopers.com/contact.