Countdown animation blog

main.dart

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(DonutBlog());
}

class DonutBlog extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CountDown(),
    );
  }
}

class CountDown extends StatefulWidget {
  @override
  _CountDownState createState() => _CountDownState();
}

class _CountDownState extends State<CountDown> {
  final interval = const Duration(milliseconds: 25);
  final Stopwatch stopwatch = Stopwatch();
  final int seconds = 10;
  Timer timer;
  double percentage = 0;
  double currentSeconds = 0;

  void startTimeout() {
    stopwatch.reset();
    stopwatch.start();
    timer = Timer.periodic(interval, (timer) {
      setState(() {
        currentSeconds = stopwatch.elapsedMilliseconds / 1000;
        percentage = currentSeconds / seconds * 100;
        if (currentSeconds >= seconds) {
          stopTimeout();
        }
      });
    });
  }

  void stopTimeout() {
    setState(() {
      timer.cancel();
      stopwatch.stop();
      currentSeconds = 0;
      percentage = 0;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomPaint(
              painter: DonutPainter(percentage),
              child: Container(
                width: 400,
                padding: EdgeInsets.symmetric(horizontal: 100, vertical: 100),
                child: Center(
                  child: Text(
                    (seconds - currentSeconds + 0.499).round().toString(),
                    style: TextStyle(
                      color: Colors.black54,
                      fontSize: 90,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ),
            ),
            Visibility(
              visible: timer == null || !timer.isActive,
              child: RaisedButton(
                onPressed: startTimeout,
                color: Colors.green,
                child: Icon(Icons.play_arrow),
              ),
            ),
            Visibility(
              visible: timer != null && timer.isActive,
              child: RaisedButton(
                onPressed: stopTimeout,
                color: Colors.red,
                child: Icon(Icons.stop),
              ),
            )
          ],
        ),
      ),
    );
  }
}

class DonutPainter extends CustomPainter {
  double outerBorder = 32;
  double percentage = 0;

  DonutPainter(double percentage) {
    this.percentage = percentage;
  }

  @override
  bool shouldRepaint(DonutPainter oldDelegate) {
    return oldDelegate.percentage != percentage;
  }

  @override
  void paint(Canvas canvas, Size size) {
    double radius = min(size.height, size.width) / 2;
    Offset center = Offset(size.width / 2, size.height / 2);
    Rect outerRect =
        Rect.fromCircle(center: center, radius: radius - (outerBorder) / 2);
    canvas.drawArc(
        outerRect,
        0,
        2 * pi,
        false,
        Paint()
          ..color = Colors.black26
          ..strokeWidth = outerBorder
          ..style = PaintingStyle.stroke);
    canvas.drawArc(
        outerRect,
        1.5 * pi,
        2 * pi * (percentage / 100),
        false,
        Paint()
          ..color = Colors.black26
          ..strokeWidth = outerBorder
          ..style = PaintingStyle.stroke);
  }
}