Maybe it's somewhat usefull for others here as well.

Here's what i did to tackle this (actually there are a few ways to get this done):

Version 1:

The Lottie Way.

Convert the Videofile using some tools like Isotropic

Keep in mind however, in order to archive a decent smooth animation adjust the FPS to the FPS of your original Video. Very important. And also set the correct start and end frames.

Tune the jpg quality down in order to save file-size. For an intro animation for mobile for example, 0.5 was still fine. Test and check the quality on a physical device. Not on simulator.

Once done, download the json and add it as a lottie animation within FlutterFlow as usual.

Version 2:

The Sprite Way.

\"Back in the day\" so to say, we used sprite animations, wich basically is a sequence of images consisting of the individual frames of a video.

How to convert a mp4 Video to images?

On Mac pretty simple ( i guess on Windows it should be similar, but i havent tested it):

First you need homebrew to be installed (skip this if you already have it).

Easiest way is via Terminal (Don't get scared, i'll guide you through it)

So open Terminal (Programs -> Utility -> Terminal or cmd + space and enter Terminal)

then enter

/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"

This might asks you for your password. (Your login Password when starting your mac). Don't worry, if it doenst show anything when typing the password, that's normal.

Once done, type the following:

brew install ffmpeg

This will then install all necesary things for ffmpeg to work. It will show several progress bars and once it's done, you can then close that terminal window.

Open a new Terminal Window (will start a fresh session, that's why) and navigate to your folder where the mp4 video is.

For example:

cd Downloads

Now we convert the video in png frames:

ffmpeg -i yourVideo.mp4 sequence%06d.png

Where \"yourVideo.mp4\" is the actual file-Name of your video file and \"sequence....png\" the name of the output file. The placeholder \"%06d\" will be the number sequence for all frames. so don't change that.

Once this is done, you should have a bunch of png files in the same folder where your mp4 file was. numbered from \"sequence000001.png\" to whatever frames there is.

now you COULD use one of the many sprite packages to use it within your flutter app. For example:

Happy Coding

GIFs and WebP formats being displayed slower