Youtube like animation

main.dart

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        //
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  bool isRotated = false;

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

  @override
  void didChangeDependencies() {
    // TODO: implement didChangeDependencies
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final screenWidth = screenSize.width;
    final screenHeight = screenSize.height;


    final portraitSize = Size(screenWidth, screenWidth * 0.5);
    final landscapeSize = Size(99999, screenWidth);

    debugPrint("p: $portraitSize, l: $landscapeSize");

    final sizeTween = SizeTween(
      begin: portraitSize,
      end: landscapeSize,
    );

    final rotationTween = Tween(begin: 0.0, end: math.pi / 2);

    final yAlignmentTween = Tween(begin: -1.0, end: 0.0);

    return Scaffold(
      body: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return OverflowBox(
            maxWidth: screenHeight,
            maxHeight: screenHeight,
            alignment: Alignment(0, yAlignmentTween.evaluate(_controller)),
            child: Transform.rotate(
              angle: rotationTween.evaluate(_controller),
              child: SizedBox(
                width: (sizeTween.evaluate(_controller) as Size).width,
                height: (sizeTween.evaluate(_controller) as Size).height,
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    const VideoWidget(),
                    Align(
                      alignment: Alignment.bottomRight,
                      child: IconButton(
                        onPressed: () {
                          if (_controller.value == 0) {
                            _controller.forward();
                          } else {
                            _controller.reverse();
                          }
                        },
                        icon: const Icon(Icons.rectangle_outlined),
                      ),
                    )
                  ],
                ),
              ),
            ),
          );
        }
      ),
    );
  }
}

class VideoWidget extends StatelessWidget {
  const VideoWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          gradient: LinearGradient(
        colors: [
          Colors.green,
          Colors.cyan,
        ],
      )),
      child: const Center(
        child: Text(
          "This is a Video",
          style: TextStyle(
            fontSize: 40,
          ),
        ),
      ),
    );
  }
}

Dartpad link

Screen.Recording.2022-08-21.at.02.40.51.mov