How to Implement a Real-Time Stock Market Tracker in FlutterFlow

Create a scheduled Cloud Function that runs every 15 minutes (matching free API tier limits). The function reads a list of tracked symbols from a Firestore `tracked_symbols` document, calls the Alpha Vantage Global Quote endpoint for each symbol, and writes the response data to `stock_quotes/{symbol}` documents with fields: symbol (String), price (double), change (double), changePercent (String), volume (int), high (double), low (double), and lastUpdated (Timestamp). Store your Alpha Vantage API key in Cloud Functions environment config, never in client code.

1// Cloud Function: fetchStockQuotes
2// Scheduled: every 15 minutes
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5const fetch = require('node-fetch');
6admin.initializeApp();
7
8exports.fetchStockQuotes = functions.pubsub
9  .schedule('every 15 minutes')
10  .onRun(async () => {
11    const db = admin.firestore();
12    const apiKey = functions.config().alphavantage.key;
13    const doc = await db.doc('config/tracked_symbols').get();
14    const symbols = doc.data().symbols || [];
15
16    for (const symbol of symbols) {
17      const url = `https://www.alphavantage.co/query?function=GLOBAL_QUOTE&symbol=${symbol}&apikey=${apiKey}`;
18      const res = await fetch(url);
19      const data = await res.json();
20      const q = data['Global Quote'];
21      if (!q) continue;
22
23      await db.doc(`stock_quotes/${symbol}`).set({
24        symbol,
25        price: parseFloat(q['05. price']),
26        change: parseFloat(q['09. change']),
27        changePercent: q['10. change percent'],
28        volume: parseInt(q['06. volume']),
29        high: parseFloat(q['03. high']),
30        low: parseFloat(q['04. low']),
31        lastUpdated: admin.firestore.FieldValue
32          .serverTimestamp(),
33      });
34    }
35  });

Create a Watchlist page. Store each user's watched symbols in a `users/{uid}/watchlist` subcollection, each document containing a symbol field. Add a Backend Query on this subcollection to get the user's symbols. For each symbol, run a second Backend Query on `stock_quotes/{symbol}` with Single Time Query set to OFF for real-time updates. Display each stock in a ListView with a Container showing: symbol (bold Text), price (Text), and change with changePercent in green (positive) or red (negative) using Conditional Styling. Add a sparkline by storing the last 20 price points in an array field on the stock_quotes document.

At the top of the Watchlist page, add a TextField with a search icon for entering stock symbols. On submit, call an API endpoint (Alpha Vantage Symbol Search) via a Cloud Function that returns matching symbols with company names. Display results in a ListView below the search field. Each result shows the symbol, company name, and an Add to Watchlist IconButton. The Add action creates a document in `users/{uid}/watchlist` with the symbol and also adds the symbol to the `config/tracked_symbols` array (using FieldValue.arrayUnion) so the scheduled function starts fetching it. Add a swipe-to-dismiss gesture on watchlist items that deletes the symbol from the user's watchlist subcollection.

When a user taps a stock in the watchlist, navigate to a StockDetail page passing the symbol as a parameter. Fetch historical data by calling the Alpha Vantage Daily endpoint via a Cloud Function and store results in `stock_history/{symbol}` with a prices array of {date, close} objects. Create a Custom Widget named StockChart using fl_chart's LineChart. The widget takes a list of price points and renders them as a curved line with gradient fill beneath. Add ChoiceChips above the chart for time range selection: 1D, 1W, 1M, 3M, 1Y. Each selection filters the price data array to the appropriate date range and rebuilds the chart.

1// Custom Widget: StockChart (simplified)
2import 'package:flutter/material.dart';
3import 'package:fl_chart/fl_chart.dart';
4
5class StockChart extends StatelessWidget {
6  final double width;
7  final double height;
8  final List<double> prices;
9
10  const StockChart({
11    Key? key,
12    required this.width,
13    required this.height,
14    required this.prices,
15  }) : super(key: key);
16
17  @override
18  Widget build(BuildContext context) {
19    final spots = prices.asMap().entries.map(
20      (e) => FlSpot(e.key.toDouble(), e.value),
21    ).toList();
22
23    final isPositive = prices.last >= prices.first;
24    final color = isPositive ? Colors.green : Colors.red;
25
26    return SizedBox(
27      width: width,
28      height: height,
29      child: LineChart(LineChartData(
30        gridData: const FlGridData(show: false),
31        titlesData: const FlTitlesData(show: false),
32        borderData: FlBorderData(show: false),
33        lineBarsData: [
34          LineChartBarData(
35            spots: spots,
36            isCurved: true,
37            color: color,
38            barWidth: 2,
39            dotData: const FlDotData(show: false),
40            belowBarData: BarAreaData(
41              show: true,
42              color: color.withOpacity(0.1),
43            ),
44          ),
45        ],
46      )),
47    );
48  }
49}

Below the chart on the StockDetail page, add a News section. Create a Cloud Function that fetches news articles from a news API (like NewsAPI.org) filtered by the stock's company name. Cache results in `stock_news/{symbol}` with an articles array containing title, source, publishedAt, url, and imageUrl fields. Update the cache hourly via a scheduled function. In FlutterFlow, add a Backend Query on the stock_news document and bind results to a ListView. Each news item shows a Container with the article image, title, source name, and publication time. Tapping an item calls Launch URL to open the full article in the browser.