Flutter basic animations simplified

Flutter is made of widgets, right? So adding a simple fade in or slide animation shouldn't be that hard. In fact, it should be as simple as adding a widget on top of your current widget.

This is exactly what this package is trying to help you with.

Features

Basic Animations:

• Fade
• Slide
• Scale

Route Aware Animation

Combining Fade and Slide animations with navigation events

• same page push / pop animation
• next page push / pop animation

Requires setup. (below)

Route Aware Widget

Run functions based on navigation events. (push, pop, pushNext, popNext)

It is used within CnRouteAwareAnimation. Requires setup. (below)

Getting started

If you only want to use basic animations, you're good to go!

If you want to use RouteAwareWidget or CnRouteAwareAnimation you need to setup routeObserver.

Setup: Add routeObserver in material app (main)

MaterialApp(
  navigatorObservers: [routeObserver],
) 

Usage

Basic Animations

Simply add these widgets above target widget.

CnFade(
  child: child,
) 

CnSlide(
  begin: const Offset(-0.2, 0),
  duration: const Duration(milliseconds: 500),
  // Delay before starting the animation
  delay: const Duration(milliseconds: 100), 
  curve: Curves.easeIn,
  child: child,
) 

If you want you can pass the animation controller to the widget. But the duration is not overriden.

CnScale(
  begin: 0.5,
  controller: _controller,
  child: child,
) 

Route Aware Animation

If you simply add it on top of your widget, it will do a basic fade and slide upon all navigation events.

CnRouteAwareAnimation(
  child: child,
) 

You can differentiate between Same page and Next page animations by changing input values.

With the values below, the child widget comes in to the page from left and goes out towards right.

CnRouteAwareAnimation(
  // Where slide begins for Same Page animation 
  beginSamePage: const Offset(-0.5, 0),
  // Where slide ends for Next Page animation 
  endNextPage: const Offset(0.5, 0),
  // Cancel fade animations for all navigation events
  showFadeAnimation: false,
  child: child,
)