1: Cross Animation - Effect

This animation is made with 3 diffrent widget "Stack","Positioned","AnimatedContainer" , where the Positioned() widget is used to position them in the right place and in a right direction.(The secret benefit of using positioned() widget is ,The animation begin in the direction of thier alignment and end towards the alignement side.), and AnimatedContainer() is used to make the implicit animation and all the element is wrapped inside a Stack to fix the Position of every widget.

2: Horizontal Origin - Effect

Here we only changed the Positioned() widget with Align() widget to make it align exactly to the center of the Top and the Bottom.

3: All side Line Origin - Effect

Here we have to align the each line in Top-left , Top-right , Bottom-left , Bottom-right and change the line length.You can understand the mechanism in the code below.

4: Line Cross - Effect

Just alter the Position from Left-Right and Top-Bottom and vice versa which can be done changing the left, right, top, bottom values of the Positioned() widget.

5: Fill In Upwards -Effect

Just alter the bottom line height with the value same as container height.

6: Pulse In - Effect

I have changed all the line height of bottom and top, line width of left and right to total Container height, width respectively whenever the container is being hovered, While Mouse is not inside the container the height and the width must be equal to the thickness of the line.

7: Slide InRight - Effect

As same as the "Fill In Upwards", just change the width of left side rather then increasing the height of bottom as i did in the 5th animation.

8: Advanced Hover Animation

This animation is made with four widgets "AnimatedOpacity()", "AnimatedPositioned()", "AnimatedContainer()", "AnimatedPadding()", "Stack()" where the AnimatedContainer widget is used to make the black rounded rectangle to grow horizontally when hover for the given width, AnimatedPadding is used to move the Icon(arrow_forward_ios_rounded) from left to right to a certain distance, The AnimatedOpacity is used to make the arrow line visible whenever hovered and it is positioned with the help of Stack().

Now you can select which style to get placed in your project.Have a Good Day.... :) Buddy.

Note:
Run Theme in release mode for perfect output.