Animated Transitions

A Flutter package providing a collection of beautiful and smooth transitions for page navigation

Features

A set of high-quality page transitions.
Simple, controller-based animation management.
Customizable transition duration and behavior.
Works with the standard Flutter Navigator.

Showcase

Horizontal Growing Bars Vertical Growing Bars Horizontal Random Finish Vertical Random Finish Random Pixelated Vertical Pixels Horizontal Pixels Vertical Wave Cross Top Cross Left Expanding Circles Brush Top Brush Left White Noise Sunburst CRT Shutoff Hexagon Left Hexagon Random

Usage

To use the page transitions, you can wrap your page route with the TransitionPageRoute and provide a transition type.

import 'package:flutter/material.dart';
import 'package:animated_transitions/animated_transitions.dart';

// ...

Navigator.of(context).push(
  TransitionPageRoute(
    builder: (context) => const NextScreen(),
    transitionAnimation: GrowingBarsTransition(),
  ),
);

Available Transitions

GrowingBarsTransition - Animated bars that grow from the specified direction
CrossingBarsTransition - Bars that expand from opposite sides, creating a criss-cross effect
WaveBarsTransition - Wave-like animation with bars moving in a wave pattern
RandomFinishBarsTransition - Bars that finish in random positions
ExpandingCirclesTransition - Circles that expand from the center
DirectionalPixelatedTransition - Pixelated effect that moves in a specific direction
RandomPixelatedTransition - Random pixelated transition effect
BrushStrokeTransition - Brush stroke animation effect
ClockSweepTransition - Clock-like sweeping animation
WhiteNoiseTransition - White noise/static effect transition
SunburstTransition - Radial rays expanding from the center like a sunburst
CrtShutoffTransition - Old CRT monitor shutoff effect
HexagonGridTransition - Hexagonal grid pattern transition
SpiralTransition - Spiral animation effect
DirectionalHexagonGridTransition - Hexagonal grid moving in a specific direction
RandomHexagonGridTransition - Random hexagonal grid pattern

Create your own

Create your own transition by subclassing Transition widget