How to Set Up a Content Delivery Network for a Media App in FlutterFlow

Create a Custom Widget called CachedImage that wraps the cached_network_image package. The widget takes parameters: imageUrl (String), width (double), height (double), and fit (BoxFit). Inside, use CachedNetworkImage with a placeholder showing a shimmer loading animation (Container with a gradient animation) and an errorWidget showing a grey placeholder icon. The package automatically caches downloaded images to the device's local storage, so the same image is only downloaded once. Subsequent displays load instantly from the local cache. Replace all standard Image.network widgets in your app with this CachedImage widget for dramatic performance improvement on repeat visits.

1// Custom Widget: CachedImage
2import 'package:flutter/material.dart';
3import 'package:cached_network_image/cached_network_image.dart';
4
5class CachedImage extends StatelessWidget {
6  final String imageUrl;
7  final double width;
8  final double height;
9
10  const CachedImage({
11    required this.imageUrl,
12    required this.width,
13    required this.height,
14  });
15
16  @override
17  Widget build(BuildContext context) {
18    return CachedNetworkImage(
19      imageUrl: imageUrl,
20      width: width,
21      height: height,
22      fit: BoxFit.cover,
23      placeholder: (context, url) => Container(
24        width: width,
25        height: height,
26        decoration: BoxDecoration(
27          color: Colors.grey[300],
28          borderRadius: BorderRadius.circular(8),
29        ),
30        child: const Center(
31          child: CircularProgressIndicator(strokeWidth: 2),
32        ),
33      ),
34      errorWidget: (context, url, error) => Container(
35        width: width,
36        height: height,
37        color: Colors.grey[200],
38        child: const Icon(Icons.broken_image, color: Colors.grey),
39      ),
40    );
41  }
42}

In the Firebase Console, go to Extensions and install the Resize Images extension. Configure it to watch your media upload path (e.g., 'media/images/'). Set it to generate thumbnails at three sizes: 200px (for list views and grids), 600px (for medium displays), and 1200px (for detail pages). The extension automatically creates resized versions when any image is uploaded, storing them in the same directory with size suffixes (e.g., image_200x200.jpg). In your Firestore media documents, store three URL fields: thumbnailUrl (200px), mediumUrl (600px), and fullUrl (original). Use thumbnailUrl in ListViews and GridViews, fullUrl only when the user opens the detail page.

For video content, deploy a Cloud Function triggered when a video is uploaded to the media/videos/ Storage path. The function downloads the video, uses FFmpeg to segment it into HLS format (multiple .ts segments plus an .m3u8 playlist file at multiple quality levels: 360p, 720p, 1080p). Upload the segments and playlist back to Storage. Store the playlist URL on the Firestore media document. In FlutterFlow, use the FlutterFlowVideoPlayer widget pointed at the .m3u8 URL. HLS enables adaptive bitrate streaming: the player automatically selects quality based on the user's network speed, preventing buffering on slow connections.

1// Cloud Function: convertToHLS (simplified)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { execSync } = require('child_process');
5const os = require('os');
6const path = require('path');
7admin.initializeApp();
8
9exports.convertToHLS = functions.storage
10  .object().onFinalize(async (object) => {
11    if (!object.name.startsWith('media/videos/')) return;
12    if (object.name.includes('/hls/')) return; // Skip HLS output
13    
14    const bucket = admin.storage().bucket();
15    const tmpDir = os.tmpdir();
16    const inputPath = path.join(tmpDir, 'input.mp4');
17    const outputDir = path.join(tmpDir, 'hls');
18    
19    // Download video
20    await bucket.file(object.name).download({ destination: inputPath });
21    
22    // Convert to HLS with FFmpeg
23    execSync(`mkdir -p ${outputDir}`);
24    execSync(
25      `ffmpeg -i ${inputPath} ` +
26      `-hls_time 10 -hls_list_size 0 ` +
27      `-hls_segment_filename ${outputDir}/segment_%03d.ts ` +
28      `${outputDir}/playlist.m3u8`
29    );
30    
31    // Upload HLS files to Storage
32    const hlsBasePath = object.name.replace('.mp4', '/hls/');
33    // Upload playlist and segments...
34  });

When uploading files to Firebase Storage (either via FlutterFlowUploadButton or Cloud Functions), set the Cache-Control metadata to control how long CDN edge servers and browsers cache the file. For images: set 'public, max-age=31536000' (1 year) since image content typically does not change. For videos: set 'public, max-age=86400' (1 day) for a balance of freshness and caching. For user-generated content that might be updated: set 'public, max-age=3600, s-maxage=86400' (browser: 1 hour, CDN: 1 day). In a Custom Action for uploads, add the metadata parameter when calling the Storage upload method. Firebase Storage with public files automatically serves through Google Cloud CDN.

In your media browse page, build the ListView or GridView using the thumbnailUrl (200px) from the Firestore media document for each item. This means each list item downloads a small image (typically 5-20KB) instead of the full resolution (500KB-5MB). When the user taps an item to open the detail page, load the fullUrl (original resolution) using the CachedImage widget. The transition feels seamless because the thumbnail loaded instantly in the list and the full image loads on the detail page where users expect a brief load. This single change can reduce list view data consumption by 90% or more.