PositionedTransition Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

In this series of Animated Widgets, we have been through animated widgets like AnimatedListState Widget, AnimatedCrossFade Widget, AnimatedModalBarrier Widget, AnimatedBuilder 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:

PositionedTransition({
	Key? key,
	required Animation 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';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home:
          const PositionedTransitionWidget(), // Use your custom widget as the home
    );
  }
}

class PositionedTransitionWidget extends StatefulWidget {
  const PositionedTransitionWidget({super.key});

  @override
  _PositionedTransitionWidgetState createState() =>
      _PositionedTransitionWidgetState();
}

class _PositionedTransitionWidgetState extends State
    with TickerProviderStateMixin {
  AnimationController? _controller;
  bool _first = true;

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

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

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

We will get output like below:

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 Guide, Flutter Projects, Code 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.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.