Ripple 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.indigo,
      ),
      home: const FlutterRipple(),
    );
  }
}
class FlutterRipple extends StatefulWidget
{
  const FlutterRipple({super.key});

  @override
  State<FlutterRipple> createState()
  {
    return RippleState();
  }
}
class RippleState extends State<FlutterRipple> with SingleTickerProviderStateMixin
{
  //By adding "_"(underscore) before variable,variable becomes private
  late Animation _animation;
  late AnimationController _animationController;

  var listRadius = [150.0, 200.0, 250.0, 300.0, 350.0];

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

    //"vsync" requires the reference of "SingleTickerProviderStateMixin" class.
    //In AnimationController, by default, we can get the value from o to 1.so we can also perform the same ripple animation effect
    //without using "Tween"
    _animationController = AnimationController(vsync: this, duration: const Duration(seconds: 4), /*lowerBound: 0.5,*/);
    _animation = Tween(begin: 0.0, end: 1.0).animate(_animationController);

    _animationController.addListener((){
      setState((){});
    });

    _animationController.forward();

  }

  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text("Flutter Ripple Animation",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: listRadius.map((radius) {
            return Container(
              width: radius * _animation.value,
              height: radius * _animation.value,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.blue.withOpacity(1.0 - _animation.value),
              ),
            );
          },).toList(),
        ),
      ),
    );
  }
}