Binary Clock

main.dart

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

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

class MainApplication extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: ClockScreen(),
    );
  }
}

class ClockScreen extends StatefulWidget {
  @override
  ClockScreenState createState() {
    return ClockScreenState();
  }
}

class ClockScreenState extends State<ClockScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(8),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              TimerWidget(),
              BinaryTimerWidget(),
            ],
            crossAxisAlignment: CrossAxisAlignment.center,
          ),
        ),
      ),
    );
  }
}

class TimerWidget extends StatefulWidget {
  @override
  _TimerWidgetState createState() {
    return _TimerWidgetState();
  }
}

class _TimerWidgetState extends State<TimerWidget> {
  String text = _parseDate();

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 1), (timer) {
      setState(() => text = _parseDate());
    });
  }

  @override
  Widget build(context) {
    return Text(
      '$text',
      textAlign: TextAlign.center,
      style: Theme.of(context).textTheme.display1.copyWith(color: Colors.blue),
    );
  }

  static String _parseHour() {
    String hour = DateTime.now().hour.toString();
    return '$hour'.padLeft(2, '0');
  }

  static String _parseMinute() {
    String minute = DateTime.now().minute.toString();
    return '$minute'.padLeft(2, '0');
  }

  static String _parseSecond() {
    String second = DateTime.now().second.toString();
    return '$second'.padLeft(2, '0');
  }

  static String _parseDate() {
    return '${_parseHour()}:${_parseMinute()}:${_parseSecond()}';
  }
}

class BinaryTimerWidget extends StatefulWidget {
  @override
  _BinaryTimerWidgetState createState() {
    return _BinaryTimerWidgetState();
  }
}

class _BinaryTimerWidgetState extends State<BinaryTimerWidget> {
  String hourString;
  String minuteString;
  String secondString;

  @override
  void initState() {
    super.initState();
    refreshData();
    Timer.periodic(Duration(seconds: 1), (timer) {
      refreshData();
    });
  }

  @override
  Widget build(context) {
    return Column(children: [
      BinaryLightBulb(binaryString: hourString.padLeft(6, '0')),
      BinaryLightBulb(binaryString: minuteString.padLeft(6, '0')),
      BinaryLightBulb(binaryString: secondString.padLeft(6, '0')),
    ]);
  }

  void refreshData() {
    setState(() {
      hourString = DateTime.now().hour.toRadixString(2);
      minuteString = DateTime.now().minute.toRadixString(2);
      secondString = DateTime.now().second.toRadixString(2);
    });
  }
}

class BinaryLightBulb extends StatelessWidget {
  final String binaryString;
  final List<int> _digitRow;

  BinaryLightBulb({
    @required this.binaryString,
  }) : this._digitRow = binaryString
            .split('')
            .map(
              (value) => int.parse(value),
            )
            .toList();

  @override
  Widget build(context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: _digitRow
              .map(
                (value) => LightBulb(isOn: value == 1),
              )
              .toList(),
        ),
      ),
    );
  }
}

class LightBulb extends StatelessWidget {
  final bool isOn;

  LightBulb({this.isOn = false});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: ShapeDecoration(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(13),
        ),
        color: this.isOn ? Colors.blue : Colors.white,
      ),
      margin: EdgeInsets.all(8),
      height: 26,
      width: 26,
    );
  }
}