luojigou_battle/lib/page/view/count_down_dialog.dart

import 'dart:async';

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/material.dart';

Future<void> showCountDown(BuildContext context) {
  return Navigator.push(context, RawDialogRoute(
    pageBuilder: (_, __, ___) {
      return const _CountDownContent();
    },
  ));
}

class _CountDownContent extends StatefulWidget {
  const _CountDownContent({super.key});

  @override
  State<_CountDownContent> createState() => _CountDownContentState();
}

class _CountDownContentState extends State<_CountDownContent> {
  int _count = 4;

  Timer? _timer;

  late AudioPlayer _audioPlayer;

  @override
  void initState() {
    super.initState();
    _audioPlayer = AudioPlayer();
    _timer = Timer.periodic(const Duration(seconds: 1), (t) {
      if (t.tick < 4) {
        if (mounted) {
          setState(() {
            _count = 4 - t.tick;
          });
        }
        _audioPlayer.play(AssetSource('audios/counting${t.tick}.mp3'), mode: PlayerMode.lowLatency);
      } else {
        _audioPlayer.play(AssetSource('audios/counted.mp3'), mode: PlayerMode.lowLatency);
        _timer?.cancel();
        _timer = null;

        if (mounted) {
          Future.delayed(const Duration(milliseconds: 200), () => Navigator.pop(context));
        }
      }
    });
  }

  @override
  void dispose() {
    _timer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Center(
        child: Container(
          constraints: const BoxConstraints(maxWidth: 300),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: double.infinity,
                height: 300,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Text(
                  _count >= 4 ? 'Ready' : '$_count',
                  style: TextStyle(
                    fontSize: 33,
                    color: Theme.of(context).colorScheme.onPrimaryContainer,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}