How to Add Video Editing Features to Your FlutterFlow App

Open any FlutterFlow page, drag a VideoPlayer widget from the widget panel onto the canvas, and inspect its properties. You will see controls for autoplay, looping, mute, and a video URL field — but no trim, crop, or edit options. This is by design: FlutterFlowVideoPlayer wraps the video_player Flutter package for playback only. Accept this and plan your editing pipeline outside the visual builder. For short clips under 30 seconds on modern phones, the video_editor package can do client-side trim and crop. For anything longer or more complex — resolution changes, watermarks, merging clips — route the work to a server.

In FlutterFlow, go to Settings (gear icon in the left sidebar) then click on 'Custom Code' and select 'Dependencies'. Click 'Add Dependency', enter video_editor and set the version to ^3.0.0. Also add image_picker (for selecting videos from the gallery) and path_provider (for temporary file access). Click Save after adding each dependency. These packages allow your custom widget to display a timeline scrubber, set trim points, and export the trimmed segment as a new video file — all on the user's device without any server call.

Navigate to Custom Code in the left sidebar and click the '+' button next to 'Custom Widgets'. Name it VideoTrimmerWidget. In the code editor, write the Dart widget class that initializes a VideoEditorController with the selected file path, renders the CropGridViewer and TrimSlider from the video_editor package, and exposes an Export button that calls controller.exportVideo(). Pass the output file path back to FlutterFlow via a widget callback parameter named onExportComplete of type String. The widget should accept one parameter: videoPath of type String. Keep the trim UI minimal — a preview player, a horizontal trim slider, and an Export button is enough for most apps.

1import 'package:flutter/material.dart';
2import 'package:video_editor/video_editor.dart';
3import 'dart:io';
4
5class VideoTrimmerWidget extends StatefulWidget {
6  final String videoPath;
7  final void Function(String outputPath) onExportComplete;
8
9  const VideoTrimmerWidget({
10    Key? key,
11    required this.videoPath,
12    required this.onExportComplete,
13  }) : super(key: key);
14
15  @override
16  State<VideoTrimmerWidget> createState() => _VideoTrimmerWidgetState();
17}
18
19class _VideoTrimmerWidgetState extends State<VideoTrimmerWidget> {
20  late VideoEditorController _controller;
21  bool _exporting = false;
22
23  @override
24  void initState() {
25    super.initState();
26    _controller = VideoEditorController.file(
27      File(widget.videoPath),
28      minDuration: const Duration(seconds: 1),
29      maxDuration: const Duration(seconds: 30),
30    );
31    _controller.initialize().then((_) => setState(() {}));
32  }
33
34  @override
35  void dispose() {
36    _controller.dispose();
37    super.dispose();
38  }
39
40  Future<void> _export() async {
41    setState(() => _exporting = true);
42    await _controller.exportVideo(
43      onCompleted: (file) {
44        setState(() => _exporting = false);
45        widget.onExportComplete(file.path);
46      },
47    );
48  }
49
50  @override
51  Widget build(BuildContext context) {
52    if (!_controller.initialized) {
53      return const Center(child: CircularProgressIndicator());
54    }
55    return Column(
56      children: [
57        Expanded(
58          child: CropGridViewer.preview(controller: _controller),
59        ),
60        TrimSlider(
61          controller: _controller,
62          height: 60,
63        ),
64        ElevatedButton(
65          onPressed: _exporting ? null : _export,
66          child: _exporting
67              ? const CircularProgressIndicator()
68              : const Text('Export Trimmed Video'),
69        ),
70      ],
71    );
72  }
73}

On your target page, add a Button widget labeled 'Select Video'. Create a new Custom Action named pickVideoAction. Inside the action, use image_picker's ImagePicker().pickVideo(source: ImageSource.gallery) to let the user choose a video, then store the returned file path in a Page State variable named selectedVideoPath (type String). Add a Conditional Widget below the button: when selectedVideoPath is not empty, show your VideoTrimmerWidget and pass selectedVideoPath as the videoPath parameter. Wire the onExportComplete callback to update a second Page State variable named exportedVideoPath. Add a second Conditional Widget that shows an upload button when exportedVideoPath is not empty.

Create a Custom Action named uploadTrimmedVideo that accepts the exportedVideoPath String. Inside the action, use FirebaseStorage.instance.ref('trimmed_videos/${DateTime.now().millisecondsSinceEpoch}.mp4').putFile(File(exportedVideoPath)) to upload the trimmed file. Listen to the task.snapshotEvents stream to update a Page State variable named uploadProgress (double, 0.0-1.0) so you can display a LinearProgressIndicator. After upload completes, call task.snapshot.ref.getDownloadURL() and store the result in a Page State variable named uploadedVideoUrl. For files larger than 50 MB, consider chunked uploads by breaking the file with dart:io and reassembling with a Cloud Function.

For videos longer than 30 seconds or operations like resolution change, adding watermarks, or merging clips, create a Firebase Cloud Function that accepts a Firebase Storage path, processes it with FFmpeg on Cloud Run, and writes the result back to Storage. In the Firebase console, go to Functions and deploy the Node.js function below. The function reads the original file from Storage, runs FFmpeg via fluent-ffmpeg pointing at a Cloud Run container, and uploads the output. Trigger this function from FlutterFlow using a Custom Action that calls your Cloud Function's HTTPS endpoint with the storage path as the request body.

1// functions/index.js (Node.js 18)
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { Storage } = require('@google-cloud/storage');
5const os = require('os');
6const path = require('path');
7const fs = require('fs');
8const ffmpeg = require('fluent-ffmpeg');
9
10admin.initializeApp();
11const storage = new Storage();
12
13exports.processVideo = functions
14  .runWith({ timeoutSeconds: 300, memory: '2GB' })
15  .https.onCall(async (data, context) => {
16    if (!context.auth) {
17      throw new functions.https.HttpsError('unauthenticated', 'Login required');
18    }
19    const { storagePath, startTime, endTime } = data;
20    const bucket = admin.storage().bucket();
21    const inputTmp = path.join(os.tmpdir(), 'input.mp4');
22    const outputTmp = path.join(os.tmpdir(), 'output.mp4');
23
24    await bucket.file(storagePath).download({ destination: inputTmp });
25
26    await new Promise((resolve, reject) => {
27      ffmpeg(inputTmp)
28        .setStartTime(startTime)
29        .setDuration(endTime - startTime)
30        .output(outputTmp)
31        .on('end', resolve)
32        .on('error', reject)
33        .run();
34    });
35
36    const outputPath = `processed/${Date.now()}.mp4`;
37    await bucket.upload(outputTmp, { destination: outputPath });
38
39    fs.unlinkSync(inputTmp);
40    fs.unlinkSync(outputTmp);
41
42    const [url] = await bucket.file(outputPath).getSignedUrl({
43      action: 'read',
44      expires: Date.now() + 7 * 24 * 60 * 60 * 1000,
45    });
46    return { downloadUrl: url, storagePath: outputPath };
47  });