Skip to content

Extending Fluvie

Build custom animations, effects, templates, and integrations

Fluvie is designed to be extensible. This section covers how to create custom components that integrate seamlessly with the framework.

Table of Contents

Overview

Fluvie provides several extension mechanisms:

  1. Custom Animations: Create reusable animation patterns
  2. Custom Effects: Build visual effect widgets
  3. Custom Templates: Package complete video templates
  4. Custom FFmpeg Providers: Integrate different FFmpeg implementations

Extension Points

Animations

Extend the animation system by: - Creating PropAnimation subclasses - Building custom EntryAnimation types - Implementing frame-based interpolation functions

Guide: Custom Animations

Effects

Create visual effects using: - TimeConsumer for frame-based effects - Custom paint operations - Particle systems

Guide: Custom Effects

Templates

Build reusable video templates: - Extend WrappedTemplate base class - Define data contracts - Support theming and timing

Guide: Custom Templates

FFmpeg Providers

Implement FFmpeg integrations: - Platform-specific implementations - Mobile FFmpegKit support - Custom encoding pipelines

Guide: Custom FFmpeg Provider

Guides

Guide Description
Custom Animations Create reusable animation patterns
Custom Effects Build visual effect widgets
Custom Templates Package complete video templates
Custom FFmpeg Provider FFmpeg integration options

Best Practices

1. Keep It Deterministic

All custom components must produce identical output for identical input:

// GOOD - Deterministic
TimeConsumer(
  builder: (context, frame, _) {
    final random = Random(frame);  // Seeded with frame
    return randomElement(random);
  },
)

// BAD - Non-deterministic
TimeConsumer(
  builder: (context, frame, _) {
    final random = Random();  // Different every render
    return randomElement(random);
  },
)

2. Support Both Modes

Ensure your components work in both preview and render modes:

Widget build(BuildContext context) {
  final isPreview = RenderModeProvider.of(context).isPreview;

  if (isPreview) {
    // Lighter version for preview
  } else {
    // Full quality for render
  }
}

3. Document Your Components

Include: - Property descriptions - Usage examples - Performance characteristics - Known limitations

4. Test Thoroughly

Write tests that verify: - Visual output at key frames - Animation timing - Edge cases (frame 0, last frame) - Performance benchmarks