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

  @override
  State<MyMobileBody> createState() => _MyMobileBodyState();
}

class _MyMobileBodyState extends State<MyMobileBody> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: Center(
          child: SizedBox(
            width: 300,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                WaveWidget(index: 20, color: Colors.amber,),
                WaveWidget(index: 18, color: Colors.redAccent,),
                WaveWidget(index: 16, color: Colors.black,),
                WaveWidget(index: 14, color: Colors.blue,),
                WaveWidget(index: 12, color: Colors.redAccent,),
                WaveWidget(index: 10, color: Colors.amber,),
                WaveWidget(index: 8, color: Colors.redAccent,),
                WaveWidget(index: 6, color: Colors.black,),
                WaveWidget(index: 4, color: Colors.blue,),
                WaveWidget(index: 2, color: Colors.redAccent,),
                WaveWidget(index: 2, color: Colors.amber,),
                WaveWidget(index: 4, color: Colors.redAccent,),
                WaveWidget(index: 6, color: Colors.black,),
                WaveWidget(index: 8, color: Colors.redAccent,),
                WaveWidget(index: 10, color: Colors.amber,),
                WaveWidget(index: 12, color: Colors.redAccent,),
                WaveWidget(index: 14, color: Colors.black,),
                WaveWidget(index: 16, color: Colors.blue,),
                WaveWidget(index: 18, color: Colors.redAccent,),
                WaveWidget(index: 20, color: Colors.redAccent,),
              ],
            ),
          )
      ),
    );
  }
}

class WaveWidget extends StatefulWidget {
  final int index;
  final Color color;

  const WaveWidget({Key? key, required this.index, required this.color})
      : super(key: key);

  @override
  State<WaveWidget> createState() => _WaveWidgetState();
}

class _WaveWidgetState extends State<WaveWidget>
    with SingleTickerProviderStateMixin {
  late AnimationController animatedContainer;
  late Animation<double> _scaleAnimation;

  @override
  void initState() {
    animatedContainer =
        AnimationController(vsync: this, duration: const Duration(
          milliseconds: 800,
        ));
    _scaleAnimation =
        Tween<double>(begin: 2.0, end: 50.0).
        animate(
            CurvedAnimation(parent: animatedContainer, curve: Curves.easeInOut));
    super.initState();
    Future.delayed(Duration(milliseconds: widget.index * 80), () {
      animatedContainer.forward();
    });

    animatedContainer.addListener(() {
      if (animatedContainer.isCompleted) {
        animatedContainer.reverse();
      } else if (animatedContainer.isDismissed) {
        animatedContainer.forward();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: AnimatedBuilder(
        animation: _scaleAnimation,
        builder: (context, child) {
        return Container(
          height: _scaleAnimation.value,
          width: 8.0,
          decoration: BoxDecoration(
              color: widget.color,
              borderRadius: BorderRadius.circular(5.0)
          ),
        );
      },),
    );
  }
}