Tween Animation

 import "package:flutter/material.dart";

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: "hello flutter",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: const FlutterTween(),
    );
  }
}
class FlutterTween extends StatefulWidget
{
  const FlutterTween({super.key});

  @override
  State<FlutterTween> createState()
  {
    return TweenState();
  }
}
class TweenState extends State<FlutterTween> with SingleTickerProviderStateMixin//keyword "with" is used while mixin class including
{
  late Animation animation;
  late Animation colorAnimation;
  late AnimationController animationController;

  @override
  void initState()
  {
    super.initState();

    //calling AnimationController class."vsync" requires the reference of "SingleTickerProviderStateMixin" class

    animationController = AnimationController(vsync: this, duration: const Duration(seconds: 4));
    animation = Tween(begin: 0.0, end: 200.0).animate(animationController);
    colorAnimation = ColorTween(begin: Colors.blue, end: Colors.orange).animate(animationController);

    //Tween animation takes positional arguments.here are positional parameters so that "begin" & "end" keys are necessary
    //here,"begin" & "end" are keys and "0" & "200" are its values.orders are not necessary because keys are present

    animationController.addListener((){
      print(animation.value);
      setState((){});
    });

    animationController.forward();  //for starting animation
  }

  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text("Flutter Tween Animation",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Container(
          width: animation.value,
          height: animation.value,
          color: colorAnimation.value,
        ),
      ),
    );
  }
}