How to use it?

Row & Column are two of the most basic widgets in Flutter used to design any UI. Motion Widget supports both these widgets and can be used as their replacement.

Motion<T>(

children:<Widget>[]

)

As shown above, T type can be Row or Column. children can have a list of Flutter widgets as its value.

Now the question is : How will they animate? This brings MotionElement into the picture. It is a custom widget which works hand-in-hand with the Motion Widget. It contains all the animation information for a child widget and tells the Motion Widget to animate it accordingly.

Motion<T>(

children:<Widget>[

MotionElement(

child: Text("Hi")

),

Text("How are you?")

]

)

The child widgets which are supposed to animate should be wrapped with MotionElement widget. In the above code, Text widget which is the child of MotionElement will animate while the other one won’t.

Basically, that’s pretty much it! No animation stuff to deal with and nothing to dispose for avoiding memory leaks. Motion widget takes care of that. You might be wondering : How this allows developers “run the show”? These widgets have a bunch of other parameters for this. Let’s explore!