animation_fundamentals_demo.dart

import 'dart:math';
import 'dart:ui';

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFF3DD69D),
        body: Center(
          child: ExamplePage(),
        ),
      ),
    );
  }
}

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

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

class _ExamplePageState extends State<ExamplePage>
    with TickerProviderStateMixin {
  late final controller = AnimationController(
    duration: const Duration(
      seconds: 2,
    ),
    vsync: this,
  );

  @override
  void initState() {
    controller.repeat(reverse: true);
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return Intro(
      animation: CurvedAnimation(
        parent: controller,
        curve: Curves.easeInOutQuint,
      ),
    );
  }
}

class Intro extends AnimatedWidget {
  const Intro({
    Key? key,
    required this.animation,
  }) : super(
          key: key,
          listenable: animation,
        );

  final Animation<double> animation;

  @override
  Widget build(BuildContext context) {
    final decorationTween = DecorationTween(
      begin: const BoxDecoration(
        color: Color(0xFFFFFFFF),
        borderRadius: BorderRadius.zero,
      ),
      end: const BoxDecoration(
        color: Color(0xFF163933),
        borderRadius: BorderRadius.all(Radius.circular(110)),
      ),
    );

    final transformTween = Matrix4Tween(
      begin: Matrix4.rotationZ(pi * -0.25),
      end: Matrix4.identity(),
    );

    final textStyleTween = TextStyleTween(
      begin: TextStyle(
        letterSpacing: -8,
        color: Colors.white.withOpacity(0),
      ),
      end: TextStyle(
        letterSpacing: 8,
        color: Colors.white,
      ),
    );

    return Container(
      width: lerpDouble(20, 220, animation.value),
      height: lerpDouble(20, 220, animation.value),
      decoration: decorationTween.evaluate(animation),
      transform: transformTween.evaluate(animation),
      transformAlignment: Alignment.center,
      child: Center(
        child: Text(
          "Hello",
          style: textStyleTween.evaluate(animation),
        ),
      ),
    );
  }
}