RelativePositionedTransition in Flutter

The RelativePositionedTransition widget in Flutter animates the position of a child widget relative to its parent. It is a specialized widget for animating the movement of a child widget within a Stack, offering more fine-grained control over positioning.

Key Properties:

1. rect: This is the key property, which takes an Animation<RelativeRect>. It defines the animation that drives the transition of the widget’s position relative to the boundaries of its parent.
2. size: This is the size of the parent Stack. The child will be positioned relative to this size during the animation.
3. child: The widget to be animated. This child will move within the Stack based on the animated position.

How It Works:

• RelativePositionedTransition works inside a Stack widget, allowing the child widget to move relative to the parent’s boundaries.
• The rect property uses a RelativeRect to define the child’s position within the stack at the start and end of the animation. The widget transitions smoothly between these defined positions as the animation progresses.
• The Tween<RelativeRect> interpolates the start and end positions, which are relative to the parent widget’s size.

Use Cases:

• Animating a widget within a Stack, such as sliding elements in or out of view.
• Creating animated overlays or floating buttons that change their position based on user interaction.
• Implementing complex UI transitions where relative positioning within a parent widget is crucial.

Advantages:

• Provides precise control over the positioning of a widget relative to its parent.
• Ideal for use in layouts where stacking and layering of UI elements is necessary.
• Works well for complex transitions within Stack widgets, combining with other animations for rich visual effects.

Example

import 'package:flutter/material.dart';

class RelativePositionedTransitionScreen extends StatefulWidget {
  const RelativePositionedTransitionScreen({Key? key, required BoxDecoration decoration}) : super(key: key);

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

class _RelativePositionedTransitionScreenState extends State<RelativePositionedTransitionScreen> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<RelativeRect> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);
    _animation = RelativeRectTween(
      begin: RelativeRect.fromLTRB(0, 0, 200, 200),
      end: RelativeRect.fromLTRB(200, 200, 0, 0),
    ).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RelativePositionedTransition Example"),
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.deepPurple, Colors.orangeAccent],
              begin: Alignment.topLeft,
              end: Alignment.topRight,
            ),
          ),
        ),
      ),
      body: Stack(
        children: [
          PositionedTransition(
            rect: _animation,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}