Skip to content
Fluvie Fluvie Fluvie

Your first video

You describe what the video is. Fluvie computes when everything happens. Lesson 01 is the smallest complete example: one scene, one background, one animated title.

Start with two imports. Fluvie’s Animation, Clip, Image, and Tween replace Flutter’s, so hide those four:

import 'package:flutter/material.dart' hide Animation, Clip, Image, Tween;
import 'package:fluvie/fluvie.dart';

Now the whole video:

Video lesson01Video() {
  return Video(
    size: VideoSize.square,
    poster: 1.seconds,
    scenes: [
      Scene(
        duration: 4.seconds,
        background: Background.gradient(const [Color(0xFF1A2980), Color(0xFF26D0CE)]),
        children: [
          const Text(
            'Hello, Fluvie',
            style: TextStyle(color: Colors.white, fontSize: 72, fontWeight: FontWeight.bold),
          ).animate([Animation.fadeIn(), Animation.pop()]),
        ],
      ),
    ],
  );
}

What each line does

Section titled “What each line does”
  • Video is the root. VideoSize.square makes a 1080 by 1080 canvas at the default 30 fps.
  • poster: 1.seconds names the frame that previews and thumbnails show.
  • Scene holds 4 seconds of content. Its children sit on a centered canvas.
  • Background.gradient fills the scene behind everything else.
  • .animate([...]) attaches motion to any widget. The fade and the pop both start when the scene starts; you never type a frame number.

In your own project the builder is named build: a composition file exposes a top-level Video build(), and that is what the CLI calls. The gallery names each lesson so thirteen of them can live side by side.

Render it

Section titled “Render it”

Point the CLI at the file and name an output:

Terminal window
fluvie render ./lib/my_video.dart --out hello.mp4

The CLI captures every frame, then FFmpeg encodes the MP4. From this repo, render the lesson by its key instead, because the gallery keeps a registry:

Terminal window
dart run packages/fluvie_cli/bin/fluvie.dart render 01_hello_video --out build/01_hello_video.mp4

Preview it

Section titled “Preview it”

Watch it live, with hot reload:

Terminal window
fluvie preview ./lib/my_video.dart

Edit the file, save, and the preview redraws. In this repo you can also open the gallery app and pick “Hello, video” in the lesson list: scrub the slider to step through frames, and the timeline pane shows when each animation plays.

Where to next

Section titled “Where to next”