Animated Play/Pause Button

main.dart

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

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: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorSchemeSeed: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

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

class _MyHomePageState extends State<MyHomePage> {
  bool _showIcon = false;
  bool _isPlaying = true;
  double _iconSize = 25;

  _changePlayState() {
    setState(() {
      _isPlaying = !_isPlaying;
      _showIcon = true;
//       _iconSize = 40;
    });
    Future.delayed(Duration(milliseconds: 10), () {
      setState((){
        _iconSize = 40;
      });
    });

    Future.delayed(Duration(milliseconds: 2000), () {
      setState(() {
        _showIcon = false;
        _iconSize = 25;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
          height: 300,
          width: 300,
          child: Stack(
            children: [
              GestureDetector(
                onTap: () {
                  _changePlayState();
                },
                child: Container(
                  height: 300,
                  width: 300,
                  color: Colors.lightGreen,
                ),
              ),
              if (_showIcon)
                Align(
                  alignment: Alignment.center,
                  child: AnimatedContainer(
                    duration: Duration(
                      milliseconds: 500,
                    ),
                    curve: Curves.easeInOut,
                    height: _iconSize,
                    width: _iconSize,
                    child: FittedBox(
                      child: Icon(
                        _isPlaying
                            ? Icons.pause_circle_filled
                            : Icons.play_circle_fill,
                      ),
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}