How to Integrate a Stock Market API for Real-Time Trading Data in FlutterFlow

In the FlutterFlow Firestore panel, create two collections. First: stock_quotes with fields symbol (String), companyName (String), price (Double), change (Double), changePercent (Double), volume (Integer), lastUpdated (Timestamp), high (Double), low (Double), open (Double). Second: stock_history sub-collection under each stock_quotes document, with fields date (String, YYYY-MM-DD format), open (Double), high (Double), low (Double), close (Double), volume (Integer). Also create a watchlist collection with fields userId (String, DocumentReference to users), symbols (List of Strings) so each user has a personal list of tracked symbols. Deploy the Firestore security rules so only authenticated users can read stock_quotes and only write their own watchlist documents.

In your Firebase project, create a Cloud Function named fetchStockQuotes using the firebase-functions/v2/scheduler module. The function runs every 15 minutes (minimum free refresh rate) using pubsub.schedule('every 15 minutes'). It reads the list of symbols to track from a Firestore config document (config/stocks.watchedSymbols array). For each symbol, it calls the Alpha Vantage GLOBAL_QUOTE endpoint: https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol={SYMBOL}&apikey={KEY}. Parse the response's 'Global Quote' object and write to Firestore stock_quotes/{symbol}. Store the API key in Firebase Secret Manager, not hardcoded. Deploy with firebase deploy --only functions:fetchStockQuotes.

1const { onSchedule } = require('firebase-functions/v2/scheduler');
2const { defineSecret } = require('firebase-functions/params');
3const admin = require('firebase-admin');
4const axios = require('axios');
5
6const alphaVantageKey = defineSecret('ALPHA_VANTAGE_KEY');
7
8exports.fetchStockQuotes = onSchedule(
9  { schedule: 'every 15 minutes', secrets: [alphaVantageKey] },
10  async () => {
11    const db = admin.firestore();
12    const configDoc = await db.doc('config/stocks').get();
13    const symbols = configDoc.data()?.watchedSymbols || ['AAPL', 'GOOGL', 'MSFT'];
14
15    for (const symbol of symbols) {
16      const url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${alphaVantageKey.value()}`;
17      const response = await axios.get(url);
18      const quote = response.data['Global Quote'];
19      if (!quote || !quote['05. price']) continue;
20
21      await db.collection('stock_quotes').doc(symbol).set({
22        symbol,
23        price: parseFloat(quote['05. price']),
24        change: parseFloat(quote['09. change']),
25        changePercent: parseFloat(quote['10. change percent'].replace('%', '')),
26        volume: parseInt(quote['06. volume']),
27        open: parseFloat(quote['02. open']),
28        high: parseFloat(quote['03. high']),
29        low: parseFloat(quote['04. low']),
30        lastUpdated: admin.firestore.FieldValue.serverTimestamp()
31      }, { merge: true });
32    }
33  }
34);

In FlutterFlow, create a Watchlist page. Add a Backend Query at the page level querying the stock_quotes collection ordered by symbol. Add a ListView below, bound to the query result using Generate Dynamic Children. Each child is a Container with a Row layout. Inside the Row: a Column with two Text widgets (symbol in bold 16px, companyName in gray 12px), a Spacer, and a Column with two more Text widgets (price formatted as $0.00, and changePercent formatted as +1.23% or -1.23%). For the changePercent text, set the font color using a Conditional Value: if changePercent > 0 then Color.green, else if changePercent < 0 then Color.red, else Color.gray. Add an up-arrow or down-arrow Icon conditionally based on the same condition. Make each row tappable to navigate to a StockDetail page passing the symbol as a page parameter.

Create a StockDetail page with a page parameter symbol (String). Add a Backend Query for the stock document at stock_quotes/{symbol}. Add a second Backend Query for the stock_history sub-collection ordered by date descending, limited to 30 records. Create a Custom Widget for the price chart. Import fl_chart in Pubspec Dependencies (version ^0.68.0). In the Custom Widget, build a LineChart using the fl_chart package. Pass the stock_history documents as a list parameter to the widget. Map each document to a FlSpot(x: index.toDouble(), y: close). Set the line color based on whether the current price is above or below the opening price. Add axis labels for dates. Display the chart in a Container with fixed height 220px on the StockDetail page below the quote summary.

Add a search TextField at the top of the Watchlist page, bound to a Page State variable searchQuery. In the API Manager, create an API Group named AlphaVantage with base URL https://www.alphavantage.co. Add an API Call named searchSymbols with method GET, path /query, and query parameters: function=SYMBOL_SEARCH, keywords={searchQuery}, apikey={ALPHA_VANTAGE_KEY} (store the key in FlutterFlow Secrets). On the search TextField's onChange action, wait for 500ms debounce (use a Timer Custom Action), then call the searchSymbols API Call. Bind the response bestMatches array to a ListView below the search field showing symbol, name, and region. Tapping a search result adds the symbol to the user's watchlist Firestore document and navigates to the StockDetail page. Store the API key in Secrets — do NOT hardcode it in the API Call.