Create Videos Programmatically with Flutter

Declarative video composition using familiar widgets. Frame-perfect rendering with FFmpeg encoding.

Get Started View Examples API Docs

VideoComposition(
  fps: 30,
  durationInFrames: 90,
  child: LayerStack(
    children: [
      Layer.background(...),
      Layer(
        child: Text('Hello Fluvie!'),
      ),
    ],
  ),
)

→

video.mp4

What is Fluvie?

Fluvie is a Flutter package for programmatic video generation. Like Remotion for React, but for Flutter. It combines Flutter's powerful rendering engine with FFmpeg's encoding capabilities to create frame-perfect videos from declarative widget trees.

Instead of manually editing videos, you write Dart code using familiar Flutter widgets. Fluvie captures each frame, manages timing, and encodes the result into production-ready video files.

Why Fluvie?

Declarative API

Use Flutter widgets you already know. No video editing expertise required.

Frame-Perfect

30fps/60fps deterministic rendering with frame-level precision.

Layer System

Z-index ordering, blend modes, time-based visibility, and fade transitions.

Audio Support

Background music, multiple tracks, fade in/out, and BPM-synced animations.

Cross-Platform

Desktop (Linux, macOS, Windows) and Web with WASM FFmpeg support.

Production-Ready

9.8/10 quality score, enterprise CI/CD, comprehensive docs, 80%+ test coverage.

Live Code Examples

Try Fluvie directly in your browser. Edit the code and see the structure.

Code Structure Preview

Full rendering requires Flutter SDK + FFmpeg

Edit code to see structure analysis

Use Cases

What can you build with Fluvie?

📱

Social Media

Instagram stories, TikTok videos, YouTube shorts with animated text and transitions.

📊

Data Visualization

Animated charts, infographics, and data-driven storytelling videos.

🎬

Marketing

Product demos, explainer videos, promotional content at scale.

🎉

Year-in-Review

Spotify Wrapped-style summaries, user achievements, personalized videos.

📚

Education

Animated tutorials, presentations, educational content with synchronized narration.

🎨

Templates

Pre-built compositions for common needs. Customize and generate in minutes.

🎄

Holiday Video

Seasonal greetings, birthday wishes, and personalized celebration videos.

🎓

Tutorials

Step-by-step guides, how-to videos, and instructional content with code highlights.

How It Works

Four simple steps from code to video

Define Composition

Set video parameters: resolution, FPS, duration, and build your widget tree.

VideoComposition(
  fps: 30,
  width: 1920,
  height: 1080,
  durationInFrames: 90,
  child: MyContent(),
)

Build Widget Tree

Use familiar Flutter widgets: LayerStack, Sequence, TimeConsumer, Text, Container, etc.

LayerStack(
  children: [
    Layer.background(...),
    Layer(child: Text('Hello!')),
  ],
)

Render Frames

RenderService captures each frame using RepaintBoundary, then encodes with FFmpeg.

final output = await renderService.execute(
  config: config,
  onFrameUpdate: (frame) => print('Frame $frame'),
);

Export Video

Get a production-ready video file: MP4, WebM, or GIF.

print('Video saved to: $output');
// Output: /tmp/fluvie_xxxxx.mp4

Getting Started

Start creating videos in under 5 minutes

1. Installation

flutter pub add fluvie

2. FFmpeg Setup

sudo apt install ffmpeg

brew install ffmpeg

choco install ffmpeg
# Or download from https://ffmpeg.org/download.html

# FFmpeg.wasm used automatically
# Ensure proper CORS headers

3. Enable Impeller Renderer

Required for video rendering (not preview)

flutter run --enable-impeller

4. Your First Composition

import 'package:fluvie/fluvie.dart';

final composition = VideoComposition(
  fps: 30,
  durationInFrames: 90,
  child: Center(
    child: Text('Hello Fluvie!',
      style: TextStyle(fontSize: 48, color: Colors.white),
    ),
  ),
);

// Render
final output = await renderService.execute(config: ...);
print('Video saved: $output');

Next Steps

📖

Full Tutorial

Complete guide to Fluvie concepts

🧩

Widget Reference

All available widgets and APIs

⚙️

Platform Setup

Platform-specific configuration

Templates & Examples

Pre-built compositions ready to customize

Intro

The Neon Gate

Cyberpunk-style intro with neon colors and glitch effects

Data Viz

Liquid Minutes

Animated metrics with flowing liquid effects

Collage

The Grid Shuffle

Photo grid with shuffle animation transitions

Year-in-Review

Summary Poster

Spotify Wrapped-style annual summary

Explore All Templates

Documentation

Everything you need to master Fluvie

Core Docs

Guides

Resources

Develop with AI Assistance

Fluvie MCP Server for Claude and Continue.dev

The Fluvie MCP (Model Context Protocol) Server enables AI-assisted development with intelligent code generation, documentation search, template suggestions, and widget reference lookup.

Available Tools

searchDocs - Search through Fluvie documentation
getTemplate - Retrieve template code by category
generateCode - Generate Fluvie compositions from descriptions
suggestTemplates - Get template recommendations
getWidgetReference - Look up widget API documentation

Claude Desktop Configuration

{
  "mcpServers": {
    "fluvie": {
      "url": "https://mcp.fluvie.dev/mcp"
    }
  }
}

Try MCP Server View Documentation

Community & Contributing

Join the Fluvie community

GitHub Stats

Get Involved

Support Development

Fluvie is open source and MIT licensed. Support ongoing development:

Sponsor on GitHub