import 'package:flutter/material.dart';

void main() {
  runApp(const UseAnimation());
}

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

  @override
  State<UseAnimation> createState() => _UseAnimationState();
}

class _UseAnimationState extends State<UseAnimation>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _tween;

  @override
  void initState() {
    _controller = AnimationController(vsync: this);
    _tween = Tween<double>(begin: 0, end: 1).animate(_controller)
      ..addStatusListener((status) {
        // print(status);
      })
      ..addListener(() {
        setState(() {});
      });
    // _controller.forward();
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Use Animation',
      home: Scaffold(
        appBar: AppBar(title: const Text('use animation')),
        body: Center(
          child: SizedBox(
            height: 300,
            width: 200,
            child: Stack(
              alignment: Alignment.center,
              children: [
                Image.asset('assets/images/user_2.png'),
                Positioned.fill(
                  child: Container(
                    color: _tween.value == 1.0
                        ? null
                        : const Color.fromARGB(255, 36, 36, 36)
                            .withOpacity(0.3),
                    child: Center(
                      child: Text(
                        (_tween.value * 100).toStringAsFixed(1),
                        style: const TextStyle(
                          color: Colors.green,
                          fontSize: 24,
                        ),
                      ),
                    ),
                  ),
                ),
                CircularProgressIndicator(
                  value: _tween.value,
                ),
              ],
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            if (_tween.value == 1.0) {
              _controller.reset();
            }
            print(_tween.value);
            // print(_controller.value);
            _controller.animateTo(_tween.value + 0.1,
                duration: const Duration(milliseconds: 200));
            print(_tween.value);
          },
          child: const Icon(Icons.plus_one),
        ),
      ),
    );
  }
}