Flutter Digital Clock

main.dart

// Code Licensed under the Apache License, Version 2.0 - visit : https://github.com/akshatapp/flutter-gist/blob/master/LICENSE

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Digital Clock Demo - DigiClock',
      debugShowCheckedModeBanner: false,
      //showPerformanceOverlay: true,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime now;
  Timer _timer;
  bool openState = true;
  String hrs = '00';
  String min = '00';
  String sec = '00';
  Color centerBoxColor = Color(0xFFD50000);
  Color leftBoxColor = Colors.blue[700];
  Color rightBoxColor = Color(0xFFFFA726);
  Curve myCurve = Curves.easeInOutBack;

  @override
  void initState() {
    super.initState();
    _updateTime();
    _updateAnimation();
  }

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

  void _updateTime() {
    setState(
      () {
        now = DateTime.now();
        hrs = now.hour.toString().padLeft(2, '0');
        min = now.minute.toString().padLeft(2, '0');
        sec = now.second.toString().padLeft(2, '0');

        _timer = Timer(
          Duration(seconds: 1) - Duration(milliseconds: now.millisecond),
          _updateTime,
        );
      },
    );
  }

  void _updateAnimation() {
    Timer.periodic(
      Duration(milliseconds: 490),
      (v) {
        setState(
          () {
            openState = !openState;
          },
        );
      },
    );
  }

  Widget buildCenterBox(TextStyle txtStyle) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(15.0),
        color: centerBoxColor,
        boxShadow: [
          BoxShadow(
              color: Colors.black38,
              offset: Offset(0.0, 20.0),
              blurRadius: 10.0)
        ],
      ),
      height: getContainerSize(context),
      width: getContainerSize(context),
      child: Center(
        child: Text(
          min,
          style: txtStyle,
        ),
      ),
    );
  }

  Widget buildLeftBox(TextStyle txtStyle) {
    return Transform.rotate(
      angle: 0.0523, //3 degree rotation in radians
      child: AnimatedContainer(
        transform: openState == true
            ? Matrix4.translationValues(
                -getContainerSize(context) * 0.9, 0.0, 0.0)
            : Matrix4.translationValues(0.0, 0.0, 0.0),
        duration: Duration(milliseconds: 400),
        curve: myCurve,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          color: leftBoxColor,
        ),
        height: getContainerSize(context),
        width: getContainerSize(context),
        child: Center(
          child: Text(
            hrs,
            style: txtStyle,
          ),
        ),
      ),
    );
  }

  Widget buildRightBox(TextStyle txtStyle) {
    return Transform.rotate(
      angle: -0.0523, // - 3 degree rotation in radians
      child: AnimatedContainer(
        transform: openState == true
            ? Matrix4.translationValues(
                getContainerSize(context) * 0.9, 0.0, 0.0)
            : Matrix4.translationValues(0.0, 0.0, 0.0),
        duration: Duration(milliseconds: 400),
        curve: myCurve,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15.0),
          color: rightBoxColor,
        ),
        height: getContainerSize(context),
        width: getContainerSize(context),
        child: Center(
          child: Text(
            sec,
            style: txtStyle,
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final TextStyle txtStyle = TextStyle(
        fontSize: getContainerSize(context) * 0.5, color: Colors.white);

    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            buildLeftBox(txtStyle),
            buildRightBox(txtStyle),
            buildCenterBox(txtStyle)
          ],
        ),
      ),
    );
  }
}

double getContainerSize(context) {
  final shortSide = MediaQuery.of(context).size.shortestSide;
  return (shortSide * 0.245).floorToDouble();
}