Flutterexperts

Whenever building an app animation plays a vital role in designing the experience of the user. People tend to like an app that has a smooth flow and a slick design. The Flutter Package provides a variety of methods to create and use animation in our app. We will be discussing the inbuilt Flutter widgets to handle animation.

In this article, we will explore the Positioned Transition Widget. We will see how to implement a demo program to create a sample app that shows an animation in your flutter applications.

Animated version of Positioned which takes a specific Animation<RelativeRect> to transition the child’s position from a start position to an end position over the lifetime of the animation. Only works if it’s the child of a Stack. These are the simplest widget provided by flutter. These widgets can be implemented without much work from the developer. These are very basic animation techniques, so they don’t have many options available to be changed. They have the properties to control the repetition and movement of the widget. These widgets require a Controller for the granular control they provide.

---

Table Of Contents::

Introduction

Properties

Use of Positioned Transition

Conclusion

GitHub Link

---

Introduction:

Hello everyone, This is my first ever article on Flutter. Positioned Transition is a very powerful widget if we look deep into it. It provides us with an interface using the Positioned Transition so that we can do various types of animations. We change the position of a widget with animation by using Positioned Transition widget. You’ll see that using widgets and animating them can make your app more visually appealing.

Positioned Transition widget allows for a child to move from one position to another in an animation.

The Default Constructor of it will look like below:

PositionedTransition({
Key key,
@required Animation<RelativeRect> rect,
@required Widget child,
});

---

Properties:

• > child: The widget below this widget is in the tree. This widget can only have one child. To layout multiple children, let this widget’s child be a widget such as Row, Column, or Stack, which have a children property, and then provide the children to that widget.

Implementation:

final Widget child;

• > key: It’s controls how one widget replaces another widget in the tree. Using a GlobalKey as the widget’s key allows the element to be moved around the tree (changing parent) without losing state. When a new widget is found (its key and type do not match a previous widget in the same location), but there was a widget with that same global key elsewhere in the tree in the previous frame, then that widget’s element is moved to the new location. Generally, a widget that is the only child of another widget does not need an explicit key.

Implementation:

final Key key;

• > Animation<RelativeRect> rect: An immutable 2D, axis-aligned, floating-point rectangle whose coordinates are given relative to another rectangle’s edges, known as the container. This parameter is used to define the animation that controls the child’s size and position. It determines the width or height of the rectangle, converts it to a Rect using toRect() (passing the container’s own Rect), and then examines that object. The fields left, right, bottom, and top must not be null.

Implementation:

RelativeRect.fromLTRB(0.0, 0.0, 0.0, 0.0)

• > Constructors of Animation<RelativeRect> rect: RelativeRect.fromLTRB(double left, double top, double right, double bottom) Creates a RelativeRect with the given values. The arguments must not be null.

Implementation:

const RelativeRect.fromLTRB(
this.left, 
this.top, 
this.right, 
this.bottom)
  : assert(
left != null && top != null && right != null && bottom != null);

RelativeRect.fromRect(Rect rect, Rect container) Creates a RelativeRect from two Rects. The second Rect provides the container, the first provides the rectangle, in the same coordinate space, that is to be converted to a RelativeRect. The output will be in the container’s coordinate space.

Implementation:

factory RelativeRect.fromRect(Rect rect, Rect container) {
return RelativeRect.fromLTRB(
rect.left – container.left,
rect.top – container.top,
container.right – rect.right,
container.bottom – rect.bottom
); }

RelativeRect.fromSize(Rect rect, Size container). Creates a RelativeRect from a Rect and a Size. The Rect (first argument) and the RelativeRect (the output) are in the coordinate space of the rectangle described by the Size, with 0,0 being at the top left.

Implementation:

factory RelativeRect.fromSize(Rect rect, Size container) {
return RelativeRect.fromLTRB(
rect.left,
rect.top,
container.width - rect.right,
container.height - rect.bottom);
}

---

• > listenable: The listeners are typically used to notify clients that the object has been updated.

Use of Positioned Transition:

For the “Positioned Transition” first we need to create an AnimatedController() in which we pass the duration for the animation. and create a dispose of () for dispose of the controller. After that we create a method that returns the Container() and returns the GestureDetector() as a child of the container, In the onTap() we pass a condition that if the controller has completed so it revers the image otherwise foreword the image. and pass image as a child of GestureDetector().

In BuildContext() we pass the variable smallSize and largeSize and also pass the screenSize. In the body of the class, we pass stack because in this we have to take stack as a child, and pass PositionedTransition() as a child and in the properties of positionedTransition we use rect, In this, we use RelativeRectTween() for set the begin and end. And use animate(), we pass controller as a parent of CurvedAnimation() and pass curve. After that, we return the method which returns the container.

When we run the application, we ought to get the screen’s output like the underneath screen capture.

---

Conclusion:

In this article, we have been through What is Positioned Transition Widget in Flutter along with how to implement it in a Flutter. You can use the package according to your requirement.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.

GitHub Link:

find the source code of the Positioned Transition Widget:

GitHub – flutter-devs/PositionedTransition
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com

---

Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.

---