Exploring Flutter Animation Package
By: Mukul Pathak
Tags: Animation, Flutterdev, Flutter Widget, Flutter, Dart

Basics of Flutter OpenContainer widget with minimal and straight forward Implementation

(you can directly skip the boring intro part and copy and use code it's pretty much straight forward)

A little bit of intro

Flutter has some awesome collection of animation widgets as well as animation capability to run in 60 fps which looks buttery smooth while running in release mode.

I am not gonna cover Animated Widgets as we already have lots of articles published on the internet.

On May 6 Flutter released an update v-1.17 with lots of improvement on Performance specifically to run and render flutter apps on ios devices with Metal Support along with Animation Package ^1.0.0+5

These are the key elements of flutter animation package.

This is four series article covers these topics

1. Container Transformation

2. Shared Axis Transformation (Article Comming soon)

3. Fade Through (Article Comming soon)

4. Fade (Article Comming soon)

Container Transformation

Container Transformation Example by Flutter.dev

Well I Have created mine a simple animation to cover basics

Here SignUp Button transformed to the full Register page.

Widget used: OpenContainer

Open Container needs these parameters

1. ContainerTransitionType:

How do you want the widget to be transformed and there are only two types of transition present :

Fade and FadeThrough.

2. Open builder: Final widget in my case it was a Register widget.

3. ClosedBuilder: First Widget.



4. Closed Shape: First Widget Shape

5. Closed Colors : Background color for first widget

First we need to define TransitionType

ContainerTransitionType _containerTransitionType =

ContainerTransitionType.fade;

Here I choose transitonType as fade, not fade-through. Basically it fits my requirement.

Here is the FullCode to achieve above Transition

OpenContainer(

transitionType: _containerTransitionType,

transitionDuration: Duration(seconds: 1),

openBuilder: (context, _) => SignUp(),

closedElevation: 0,

closedShape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(32),

side: BorderSide(color: Colors.white, width: 1)),

closedColor: Colors.blue,

closedBuilder: (context, _) => Container(

alignment: Alignment.center,

width: width * 0.8,

child: Padding(

padding: const EdgeInsets.all(8),

child: Text(

"Sign Up",

style: TextStyle(

color: Colors.white,

fontWeight: FontWeight.bold,

fontSize: 20),

),

),

),

)

Note: There is no need to give shape to closed widget or container as closed shape parameter gonna handle the transition as well as no need to give the background color to the closed shape.

As you can see there is no on tap method or on Pressed method as it does not require because under the hood it uses GestureDetector Widget and on tap it handles Navigation

Some Pros: With Open Container it's easy to build transition like these and these animations are fluid

Some Cons :

1. So Hero will not Work as if you want to share some widgets between Routes with Hero Transition. It will not work.

2. No onTap method or onPress Method.

Let say you want to have some functionality where you want to show some loader for some async functionality like API calling or file operation and you want to show some loader or call on tap to fetch data and then make the transition happen. This thing is achievable using open containers.

This is the first article under four article series to cover the basics of Animated Package.