Как сделать анимированную кнопку play/pouse для плеера без фона со скруглёнными углами?

Для создания анимированной кнопки play/pause без фона со скругленными углами в Flutter, можно использовать анимации и кастомный виджет.

Шаг 1: Создайте класс виджета AnimatedPlayPauseButton, который будет наследоваться от StatefulWidget. Внутри класса определите класс состояния AnimatedPlayPauseButtonState, который будет наследоваться от State<AnimatedPlayPauseButton>.

class AnimatedPlayPauseButton extends StatefulWidget {
  @override
  _AnimatedPlayPauseButtonState createState() => _AnimatedPlayPauseButtonState();
}

class _AnimatedPlayPauseButtonState extends State<AnimatedPlayPauseButton>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<double> _animation;
  bool _isPlaying = false;

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

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );

    _animation = Tween<double>(begin: 0, end: 1).animate(_animationController);

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

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

  void _togglePlayPause() {
    if (_isPlaying) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }

    _isPlaying = !_isPlaying;
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _togglePlayPause,
      child: Stack(
        children: [
          // Вместо этого можно использовать ваш собственный виджет иконки
          Icon(Icons.play_arrow, color: Colors.white),

          Opacity(
            opacity: _animation.value,
            child: Icon(Icons.pause, color: Colors.white),
          ),
        ],
      ),
    );
  }
}

Шаг 2: Используйте класс AnimatedPlayPauseButton в своем плеере. Например:

class PlayerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.black,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Center(
        child: AnimatedPlayPauseButton(),
      ),
    );
  }
}

В результате вы получите кнопку play/pause без фона со скругленными углами, анимация будет менять иконку с play на pause и обратно при нажатии на кнопку.