Use your Flutter knowledge to generate videos, animations and slideshows

Related tags

Media video flutter
Overview

logo

Use your Flutter knowledge to generate videos, animations and slideshows!

Automate your video production with server-side rendering.

preview editor

Footage is still in early stage! Use it at your own risks, and APIs are subject to change.

Quickstart

Install footage with pub.

dart pub global activate footage

Create a directory for your project, like my_video, and from this directory, run the footage init command.

mkdir my_video
cd my_video
footage init

This will initialize a flutter project, with footage default pre-configured template.

To start the preview mode, simply run the lib/main.dart like any regular Flutter app.

flutter run lib/main.dart -d macOS

Code your animations

Composition

The composition root object describes your video general properties.

Composition(
    fps: 30,
    duration: const Time.frames(90),
    width: 1920,
    height: 1080,
    child: const MyScene(),
);

Current frame and configuration

Any Composition descendant can then access the current frame and video properties through the context.video extension.

@override
Widget build(BuildContext context) {
    final frame = context.video.currentFrame;
    final fps = context.video.config.fps;
    final videoWidth = context.video.config.width;
    // ...
}

Sequence

Sequences are small sections in finite time that make up your video clip. By using a sequence, you can time-shift the animations of your children.

Sequence(
    name: 'Circle', // For preview editor
    from: Time.frames(10),
    duration: Time.frames(20),
    child: Builder(
        builder: (context) {
            final frame = context.video.frame; // From 0 to 20 (since sequence starts at 10 and ends at 30)
            // ...
        },
    ),
);

Loop

Repeats all children animations during the given duration.

Loop(
    name: 'Repeated circles', // For preview editor
    duration: Time.frames(20),
    child: Builder(
        builder: (context) {
            final frame = context.video.frame; // From 0 to 20, every 20 frames
            // ...
        },
    ),
);

Render your video

As png frames

Form your project directory, run the

footage render

You will find the output frame images in your build/video/frames.

Under the hood, the rendering process uses flutter_test to render each frame as an individual image, thanks to golden tests. This allows rendering without the need to run the app.

As a video

To render a video you first need to install ffmpeg command line tool.

Basic

Bring a -f format option to the render command.

They are simply shorcuts for ffmpeg commands :

  • webm : ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps= build/video/out.webm
footage render -f webm

The resulting video is build/video/out.webm.

Advanced

Use the ffmpeg tool from your frame files.

footage render
ffmpeg -i build/video/frames/%d.png -pix_fmt yuva420p -filter:v fps=30 build/video/out.webm

Examples

Basic

screenshot

Hello Waves

screenshot

Slidedeck

screenshot

Roadmap

  • Asset management when rendering
  • Asynchronous frame rendering
  • More default ffmpeg video rendering options
  • Embeddable player for Flutter apps
  • Audio support
  • Preview speed (x0.25, x0.5, x2)
  • Slideshow preview mode for presentation
  • More examples
  • Website

Thanks

Massive thanks to the Remotion project which inspired me a lot of concepts.

You might also like...

Flutter Music Player - A complete and open source music player designed in flutter.

 Flutter Music Player - A complete and open source music player designed in flutter.

Flutter Music Player A complete and open source music player designed in flutter. It is first complete music player designed in flutter. This app expl

Aug 20, 2022

Flutter plugin that can support audio recording and level metering

Flutter plugin that can support audio recording and level metering

flutter_audio_recorder English | 简体中文 Flutter Audio Record Plugin that supports Record Pause Resume Stop and provide access to audio level metering pr

Dec 13, 2022

Flutter plugin for sound. Audio recorder and player.

Flutter plugin for sound. Audio recorder and player.

Flutter Sound user: your documentation is there The CHANGELOG file is here Overview Flutter Sound is a Flutter package allowing you to play and record

Jan 2, 2023

video call with WebRTC and Flutter

video call with WebRTC and Flutter

Video Call Flutter App 📱 Description: This is sandbox video call application using Flutter and WebRTC, you can call from browser to browser, phone to

Nov 9, 2022

Open source geo based video sharing social app created with Flutter, Supabase and lots of love 💙💙💙

Open source geo based video sharing social app created with Flutter, Supabase and lots of love 💙💙💙

Spot Take a virtual journey around the world with Spot. Spot is a geo-tagged video sharing app, meaning every video recorded in Spot is saved on a loc

Jan 3, 2023

A Flutter audio-plugin to playing and recording sounds

A Flutter audio-plugin to playing and recording sounds

medcorder_audio Flutter record/play audio plugin. Developed for Evrone.com Funded by Medcorder Medcorder.com Getting Started For help getting started

Oct 29, 2022

A flutter package for iOS and Android for applying filter to an image

A flutter package for iOS and Android for applying filter to an image

Photo Filters package for flutter A flutter package for iOS and Android for applying filter to an image. A set of preset filters are also available. Y

Oct 26, 2021

Flutter package for creating a fully customizable and editable image widget.

Flutter package for creating a fully customizable and editable image widget.

EditableImage Flutter Package Flutter package for creating a fully customizable and editable image widget. The package has been written solely in Dart

Jun 13, 2022
Owner
Aloïs Deniel
Flutter Freelance
Aloïs Deniel
A cross-platform mobile app that helps you to generate transcripts either from a voice recording or by uploading an audio file

A cross-platform mobile app that helps you to generate transcripts either from a voice recording or by uploading an audio file

Souvik Biswas 26 Dec 18, 2022
This Flutter plugin created to show how to use OpenCV and ZXing C++ libraries natively in Flutter with Dart FFI using the camera stream

OpenCV and ZXing C++ libraries natively in Flutter with Dart FFI using the camera stream

Khoren Markosyan 17 Oct 21, 2022
This is a flutter package of video player. it's a very simple and easy to use.

This is a flutter package of video player. it's a very simple and easy to use.

初冬 184 Nov 18, 2022
Flutter plugin for use Video.js in flutter web

Flutter Video.js player Flutter plugin for use Video.js in flutter web Installation Add it to your package's pubspec.yaml file dependencies: video_j

null 15 Oct 17, 2022
A Flutter plugin to use speech recognition on iOS & Android (Swift/Java)

speech_recognition A flutter plugin to use the speech recognition iOS10+ / Android 4.1+ Basic Example Sytody, speech to todo app Installation Depend o

Erick Ghaumez 331 Dec 19, 2022
Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Better video player for Flutter, with multiple configuration options. Solving typical use cases!

Jakub 732 Jan 2, 2023
Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps.

LiveKit Flutter SDK Official Flutter SDK for LiveKit. Easily add real-time video and audio to your Flutter apps. This package is published to pub.dev

LiveKit 116 Dec 14, 2022
ScrollGalleryView is a flexible library which helps you to create awesome media galleries in your Android application.

ScrollGalleryView ScrollGalleryView is a flexible library which helps you to create awesome media galleries in your Android application. It's easily i

Boris Korogvich 529 Nov 30, 2022
Keep tracking your prayers

Keep tracking your prayers

Hasan Ragab Eltantawy 24 Dec 30, 2022
WazPlay is just a music app written in flutter and service to download song and play it.

wazplay Introduction WazPlay is just a music app written in flutter and service to download song and play it. WazPlay is the first product for Waz and

Zaw Lin Tun 4 Dec 8, 2022