[Flutter] TimerBuilder로 현재 시각 출력하기

디지털 시계처럼 현재시간을 보이고 싶었습니다.

이는 Timer Builder를 이용하여 간단하게 표현할 수 있습니다. periodic으로 주기를 설정하여 일정한 간격으로 빌드할 수 있습니다.

이는 timer_builder: pub.dev에 업로드 되어 있습니다. pubspec.yaml의 dependencies:에 추가하여 이용하면 됩니다.

예제

이를 활용하여 아주 간단한 디지털 시계를 만들었습니다.

이를 구현한 소스는 아래와 같습니다. 저는 date_format을 사용하여 쉽게 시간을 표시하였습니다.

import 'package:flutter/material.dart';
import 'package:date_format/date_format.dart';
import 'package:timer_builder/timer_builder.dart';

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

class AlarmApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TimerBuilder.periodic(
              const Duration(seconds: 1),
              builder: (context) {
                return Text(
                  formatDate(DateTime.now(), [hh, ':', nn, ':', ss, ' ', am]),
                  style: const TextStyle(
                    fontSize: 50,
                    fontWeight: FontWeight.w600,
                  ),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}