Skip to content

Widget Reference

Complete guide to all Fluvie widgets

This section documents every widget available in Fluvie, organized by category. Each widget page includes properties, examples, and usage guidelines.

Table of Contents

Widget Categories

Core Widgets

The fundamental building blocks for video composition:

Widget Description
Video High-level scene-based composition (declarative API)
VideoComposition Low-level composition root (full API)
Scene Time-bounded section of video
Sequence Basic timing container
TimeConsumer Frame-based animation driver

Layout Widgets

Video-aware layout widgets with timing and fade support:

Widget Description
LayerStack Z-indexed layer composition
Layer Individual layer with visibility timing
VStack Video-aware Stack
VColumn Column with stagger support
VRow Row with stagger support
VCenter Centered content with timing
VPadding Padded content with timing
VSizedBox Sized box with timing
VPositioned Positioned element with hero transitions

Audio Widgets

Add music, sound effects, and audio-reactive features:

Widget Description
AudioTrack Precise audio timing and synchronization
AudioSource Audio file reference types
BackgroundAudio Full-video background music
AudioReactive BPM detection and frequency analysis

Text Widgets

Animated typography optimized for video:

Widget Description
FadeText Text with video-safe opacity
AnimatedText Pre-built text animations
TypewriterText Character-by-character reveal
CounterText Animated number counting

Media Widgets

Embed images and videos:

Widget Description
EmbeddedVideo Video-in-video with frame sync
VideoSequence External video file reference
Collage Multi-element photo layouts

How to Use This Reference

Page Structure

Each widget page follows this structure:

  1. Overview - What the widget does and when to use it
  2. Properties - Complete property reference table
  3. Examples - Working code examples
  4. Related - Links to related widgets

Property Tables

Properties are documented with:

Column Description
Property The property name
Type Dart type
Default Default value (if optional)
Description What the property does

Example Code

All examples are complete and runnable:

// Examples show full context
Video(
  fps: 30,
  width: 1920,
  height: 1080,
  scenes: [
    Scene(
      durationInFrames: 90,
      children: [
        // The widget being demonstrated
        VCenter(
          child: Text('Hello'),
        ),
      ],
    ),
  ],
)

Quick Reference

Choosing the Right Widget

I want to... Use this widget
Create a multi-scene video Video
Define scene timing Scene
Animate based on frame TimeConsumer
Stack layers with z-index LayerStack
Show/hide content over time Layer or VPositioned
Animate children sequentially VColumn with stagger
Add background music BackgroundAudio
Add sound effects AudioTrack
Animate text entrance AnimatedText
Type out text TypewriterText
Count up numbers CounterText
Embed a video clip EmbeddedVideo

Common Patterns

Fade in content at a specific frame: 

VPositioned(
  startFrame: 30,
  fadeInFrames: 15,
  child: MyContent(),
)

Staggered list animation: 

VColumn(
  stagger: StaggerConfig.slideUp(delay: 10),
  children: [Item1(), Item2(), Item3()],
)

Frame-based animation: 

TimeConsumer(
  builder: (context, frame, progress) {
    return Opacity(
      opacity: progress,
      child: MyContent(),
    );
  },
)