[Documentation] Add AlignTransition interactive example (#87021)

packages/flutter/lib/src/widgets/transitions.dart

@@ -1208,6 +1208,48 @@ class DecoratedBoxTransition extends AnimatedWidget {
 ///
 /// {@animation 300 378 https://flutter.github.io/assets-for-api-docs/assets/widgets/align_transition.mp4}
 ///
+/// {@tool dartpad --template=stateful_widget_material_ticker}
+/// The following code implements the [AlignTransition] as seen in the video
+/// above:
+///
+/// ```dart
+/// // Using `late final` for [lazy initialization](https://dart.dev/null-safety/understanding-null-safety#lazy-initialization).
+/// late final AnimationController _controller = AnimationController(
+///   duration: const Duration(seconds: 2),
+///   vsync: this,
+/// )..repeat(reverse: true);
+/// late final Animation<AlignmentGeometry> _animation = Tween<AlignmentGeometry>(
+///   begin: Alignment.bottomLeft,
+///   end: Alignment.center,
+/// ).animate(
+///  CurvedAnimation(
+///    parent: _controller,
+///    curve: Curves.decelerate,
+///  ),
+/// );
+///
+/// @override
+/// void dispose() {
+///   _controller.dispose();
+///   super.dispose();
+/// }
+///
+/// @override
+/// Widget build(BuildContext context) {
+///    return Container(
+///      color: Colors.white,
+///      child: AlignTransition(
+///        alignment: _animation,
+///        child: const Padding(
+///          padding: EdgeInsets.all(8),
+///          child: FlutterLogo(size: 150.0),
+///        ),
+///      ),
+///    );
+/// }
+/// ```
+/// {@end-tool}
+///
 /// See also:
 ///
 ///  * [AnimatedAlign], which animates changes to the [alignment] without