Digits

Large numerals for clocks, timers, and counters, each character drawn five rows tall. text can contain the digits 0 to 9, :, ., -, and spaces.

Import: package:fleury/fleury.dart, or package:fleury/fleury_core.dart in browser code.

Usage

Digits('12:34', color: theme.colorScheme.primary)

Details

Any other character in text throws an ArgumentError when the widget is laid out.

Constructors

Digits()

Parameter	Type	Default	Description
text	String	required	The characters to show: the digits 0 to 9, :, ., -, and spaces.
style:	CellStyle?	—	Complete cell style override for lit digit segments.
color:	Color?	—	Foreground color used when style is null.
offGlyph:	String?	—	When set, “off” segments are painted with this dim glyph (e.g. · or ░) for the two-tone calculator / flip-clock look, and so the digit shape reads on bright backgrounds. Default null leaves them blank.
semanticLabel:	String	'Digits'	Label exposed through the semantic app graph.

Source

Digits is defined in packages/fleury/lib/src/catalog/digits.dart.

Category: Charts & meters · All widgets

Live demo

digits_example.dart

Restart Run Expand

Example · editable Revert Format

class _WorldClockState extends State<_WorldClock>
    with SingleTickerProviderStateMixin {
  // (label, UTC offset in hours). Fixed offsets — a demo, not a DST authority.
  static const List<(String, int)> _zones = <(String, int)>[
    ('UTC', 0),
    ('EST', -5),
    ('PST', -8),
    ('CET', 1),
    ('JST', 9),
  ];

  Ticker? _ticker;
  int _lastSecond = -1;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    if (_ticker == null && TuiBinding.maybeOf(context) != null) {
      _ticker = createTicker(_onTick)..start();
    }
  }

  void _onTick(Duration _) {
    final second = DateTime.now().second;
    if (second == _lastSecond)
      return; // rebuild ~once a second, not every frame
    _lastSecond = second;
    setState(() {});
  }

  String _timeFor(int offsetHours) {
    final t = DateTime.now().toUtc().add(Duration(hours: offsetHours));
    String two(int n) => n.toString().padLeft(2, '0');
    return '${two(t.hour)}:${two(t.minute)}:${two(t.second)}';
  }

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

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Tabs(
      tabs: <TabItem>[
        for (final zone in _zones)
          TabItem(
            label: zone.$1,
            content: Padding(
              padding: const EdgeInsets.only(top: 1),
              child: Digits(
                _timeFor(zone.$2),
                color: theme.colorScheme.primary,
              ),
            ),
          ),
      ],
    );
  }
}

Live preview

Live · interactive

click & type to interact ⓘ how this demo runs ⛶ Expand