Organize your animations.

Related tags

Animation montage
Overview

montage

Organize your animations.

Quickstart

// 1. Define your animations
const entrance = MontageAnimation(
  key: 'entrance',
  duration: Duration(seconds: 2), 
);

const exit = MontageAnimation(
  key: 'exit',
  duration: Duration(seconds: 2),
);

class Home extends StatefulWidget {
  const Home({
    Key? key,
  }) : super(key: key);

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> with TickerProviderStateMixin {
  MontageController? controller;

  @override
  void initState() {
    controller = MontageController(
      vsync: this,
      initialAnimation: entrance,
    );
    super.initState();
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: ValueListenableBuilder<MontageAnimation?>(
          valueListenable: controller!.current,
          builder: (context, current, child) => Text(current?.key ?? 'none'),
        ),
      ),
      // 2. Wrap your animated widget in a `Montage` with its controller.
      body: Montage( 
        controller: controller!,
        child: BasicScene(),
      ),
      floatingActionButton: FloatingActionButton.extended(
        onPressed: () {
          /// Plays this sequence of animations
          controller!.play([
            entrance,
            exit,
          ]);
        },
        label: Text('Play'),
        icon: Icon(Icons.video_call),
      ),
    );
  }
}


class BasicScene extends StatelessWidget {
  const BasicScene({
    Key? key,
  }) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        // 3. Use the motion widgets that defiens motions for each one of your animations
        Motion(
          motion: {
            // You can use the provider motions or custom ones
            entrance: Motions.combine([
              Motions.rotate(startTurns: -1, endTurns: 0),
              Motions.fadeIn,
            ]),
            exit: Motions.combine([
              Motions.rotate(startTurns: 0, endTurns: 1),
              Motions.fadeOut,
            ]),
          },
          child: FlutterLogo(
            size: 50,
          ),
        ),
        MotionText(
          text: 'Hello world',
          style: TextStyle(
            fontSize: 64,
            color: Colors.black,
            fontWeight: FontWeight.bold,
          ),
          characterMotion: {
            entrance: Motions.fadeFromTop(),
            exit: Motions.fadeToTop(),
          },
          reversedCharacterAnimation: [exit],
          wordMotion: {
            entrance: Motions.fadeIn,
            exit: Motions.fadeOut,
          },
        ),
      ],
    );
  }
}

Widgets

Declaring animation references

You must start by declaring you scene's various animation sequences as MontageAnimation global objects.

const entrance = MontageAnimation(
  duration: Duration(seconds: 2),
);

const idle = MontageAnimation(
  duration: Duration(seconds: 3),
);

const exit = MontageAnimation(
  duration: Duration(seconds: 2),
);

Montage

The montage serves as the root configuration for your motion widgets. It takes a dedicated controller that will allow to trigger animations.

class _HomeState extends State<Home> with TickerProviderStateMixin {
  MontageController? controller;

  @override
  void initState() {
    controller = MontageController(
      vsync: this,
      initialAnimation: entrance,
    );
    super.initState();
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Montage(
        controller: controller!,
        child: Scene(),
      ),
      floatingActionButton: FloatingActionButton(
        icon: Icon(Icons.video_call),
        onPressed: () {
          /// Plays this sequence of animations
          controller!.play([
            entrance,
            exit,
            entrance,
            idle,
            exit,
          ]);
        },
      ),
    );
  }
}

Motion

The core widget that can animate a child widget differently for each one of the played MotionAnimation from the root Montage's controller.

Motion(
    motion: {
        entrance: Motions.fadeIn,
        exit: Motions.fadeOut,
    },
    child: FlutterLogo(
        size: 50,
    ),
)

Staggered animation

If you want to animated a set of widgets progressively, you use the Motion.staggered helper method.

Two curves are provided with children animated in the original order as forward, or children animated in reverse order with backwards.

You can also configure overlap if you want that animation of each children starts before the end of the previous one.

Row(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
    ...Motion.staggered(
        children: [
            Text("FL"),
            Text("UT"),
            Text("TER"),
        ],
        motion: (child, i, forward, backward) {
            return {
                entrance: Motions.curved(
                    forward,
                        Motions.combine([
                            Motions.rotate(startTurns: -1, endTurns: 0),
                            Motions.fadeIn,
                            Motions.scale(begin: 3, end: 1)
                        ]),
                ),
                exit: Motions.curved(
                    backward,
                        Motions.combine([
                        Motions.rotate(startTurns: 0, endTurns: -1),
                        Motions.fadeOut,
                        Motions.scale(begin: 1, end: 3)
                    ]),
                ),
            };
        },
    )
    ],
),

Motions

Built-in

A set of motions is available from the motions.dart file.

Custom

A motion is just a widget builder from the current Animation<double> and the child Widget that should be animated.

Widget fadeIn(
  BuildContext context,
  MontageAnimation current,
  Animation<double> animation,
  Widget? child,
) {
    return FadeTransition(
        opacity: animation,
        child: child,
    );
}
You might also like...

Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Jan 4, 2023

A catalog of beautiful, reusable and elegant animations

A catalog of beautiful, reusable and elegant animations

Animations Catalog The goal of this project is to catalog and build multiple animation patterns with flutter. Budget App Animation Harley Swipe To Enl

Sep 6, 2021

🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

 🐱‍👤 Flutter-Animation 🔥 🔥 List Animated Staggered Animations

🐱‍👤 Staggered Animations made with algeria ❤

Nov 22, 2022

A Flutter Log In Page using Flare Animations

A Flutter Log In Page using Flare Animations

Bear_log_in An example built using JCToon's Flare File as a custom UI component. Bear will follow the cursor as you type or move it around. Overview T

Oct 19, 2022

A package to create nice and smooth animations for flutter

A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

Nov 28, 2022

Widgets for creating Hero-like animations between two widgets within the same screen.

Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Oct 21, 2022

A Flutter package with a selection of simple yet very customizable set of loading animations.

A Flutter package with a selection of simple yet very customizable set of loading animations.

Flutter Loading Animations A simple yet very customizable set of loading animations for Flutter projects. Installation Add the following to your pubsp

Sep 23, 2022

☀️ A Flutter package for some material design app intro screens with some cool animations.

☀️ A Flutter package for some material design app intro screens with some cool animations.

IntroViews is inspired by Paper Onboarding and developed with love from scratch. Checkout our fully responsive live example app. Table of contents Fea

Dec 30, 2022

Render After Effects animations natively on Flutter. This package is a pure Dart implementation of a Lottie player.

Lottie for Flutter Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with Bodymovin and rende

Jan 2, 2023
Owner
Aloïs Deniel
Flutter & Firebase Consultant
Aloïs Deniel
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

null 3 Dec 11, 2021
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 49 Nov 14, 2022
A collection of Animations that aims to improve the user experience for your next flutter project.

A collection of Animations that aims to improve the user experience for your next flutter project.

Ezaldeen Sahb 134 Dec 24, 2022
Orchestrate multiple animations with ease.

flutter_sequence_animation Features No need to use intervals and calculate percentages for your total animation time. Animate the same variable with m

Norbert Kozsir 381 Dec 27, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 879 Dec 31, 2022
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.

HeavenOSK 97 Jan 6, 2023
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022