PositionedTransition Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
PositionedTransition Widget - Flutter Widget Guide By Flutter Agency
PositionedTransition Widget - Flutter Widget Guide By Flutter Agency

In this series of Animated Widgets, we have been through animated widgets like AnimatedListState Widget, AnimatedCrossFade WidgetAnimatedModalBarrier WidgetAnimatedBuilder Widget so now this time we will learn about PositionedTransition Widget with a detailed article on it.

What is PositionedTransition Widget?

PositionedTransition Widget is an Animated version of Positioned Widget 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.

It will work only works if it’s the child of a Stack Widget.

The Default Constructor of it will look like below:

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

In the Above constructor, all fields marked with @required must not be empty so in the above constructor rect and child must not be empty.

Let go through its Properties now.

Properties:

  • Key key: This attribute key controls how one widget replaces another widget in the tree.
  • Animation<RelativeRect> rect: This parameter is used to define the animation that controls the child’s size and position.
  • Widget child: This attribute is used to define the widget below this widget 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 Widget, Column Widget, or Stack Widget, which have a children’s property, and then provide the children to that widget.
  • Listenable listenable: This attribute specifies the Listenable to which this widget is listening.

How to use PositionedTransition Widget in Flutter?

The following code snippet tells us how to implement PositionedTransition Widget in Flutter.

import 'package:flutter/material.dart';

class PositionedTransitionWidget extends StatefulWidget {
  @override
  _PositionedTransitionWidgetState createState() =>
      _PositionedTransitionWidgetState();
}

class _PositionedTransitionWidgetState extends State<PositionedTransitionWidget>
    with TickerProviderStateMixin {
  AnimationController _controller;

  bool _first = true;

  initState() {
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          color: Colors.blue[50],
          height: 300,
          child: Stack(
            children: <Widget>[
              PositionedTransition(
                rect: relativeRectTween.animate(_controller),
                child: Container(
                  child: Container(
                    width: 200,
                    height: 200,
                    padding: EdgeInsets.all(20),
                    child: FlutterLogo(),
                  ),
                ),
              ),
            ],
          ),
        ),
        SizedBox(
          height: 20,
        ),
        FlatButton(
          onPressed: () {
            if (_first) {
              _controller.forward();
            } else {
              _controller.reverse();
            }
            _first = !_first;
          },
          child: Text(
            "CLICK ME!",
          ),
        )
      ],
    );
  }
}

final RelativeRectTween relativeRectTween = RelativeRectTween(
  begin: RelativeRect.fromLTRB(40, 40, 0, 0),
  end: RelativeRect.fromLTRB(0, 0, 40, 40),
);

We will get output like below:

PositionedTransition Widget - Flutter Widget Guide By Flutter Agency

PositionedTransition Widget

Thanks for being with us on a Flutter Journey!!!

Conclusion:

In this article, we have been through What is PositionedTransition Widget in Flutter along with how to implement it in a Flutter.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply