플러터 시계 예제 – Flutter 실시간 표시 방법

by

플러터(Flutter)를 사용하면 다양한 모바일 앱을 효과적으로 개발할 수 있습니다. 사용자의 경험을 향상시키기 위해 많은 앱들이 현재 시간을 실시간으로 표시하는 기능을 포함하고 있습니다. 이 글에서는 플러터 시계를 만들어 시간을 실시간으로 표시하는 방법에 대해 자세히 알아보겠습니다.

초기 설정(initState)

먼저, `initState()` 함수에서 시작합니다. 이 함수는 위젯의 생명 주기 동안 한 번만 호출되며, 위젯 초기화에 이상적인 위치입니다.

  late String _timeString; // _timeString 변수 선언
  @override
  void initState() {
    super.initState();
    _timeString = _formatTime(DateTime.now());
    Timer.periodic(Duration(seconds: 1), (Timer t) => _getTime());
  }

`initState()` 내에서 현재 시간을 문자열로 포맷하여 `_timeString` 변수에 할당하고, `Timer.periodic`을 사용해서 1초마다 `_getTime()` 함수를 호출합니다. 이렇게 하면 시간이 갱신되는 것을 실시간으로 사용자에게 보여줄 수 있습니다.

시간 가져오기(_getTime)

`_getTime()` 함수내에서 현재 시간을 가져와서 포맷하는 로직이 포함됩니다.

  void _getTime() {
    final DateTime now = DateTime.now();
    final String formattedTime = _formatTime(now);
    setState(() {
      _timeString = formattedTime;
    });
  }

현재 시간을 `DateTime.now()`로 가져온 후, `_formatTime()` 함수를 통해 문자열로 포맷합니다. 그리고 `setState()`를 호출하여 `_timeString`을 업데이트함으로써 UI가 새로운 시간으로 갱신되게 합니다.

시간 포맷하기(_formatTime)

시간을 HH:MM:SS 형태로 포맷하기 위한 함수입니다.

  String _formatTime(DateTime dateTime) {
    return "${dateTime.hour.toString().padLeft(2, '0')}:"
        "${dateTime.minute.toString().padLeft(2, '0')}:"
        "${dateTime.second.toString().padLeft(2, '0')}";
  }

`padLeft(2, ‘0’)`를 사용하여 한 자리 숫자인 경우 앞에 0을 붙여 두 자리로 만듭니다. 이러한 포맷 방식은 사용자에게 익숙하며 가독성이 좋습니다.

위젯 생성

        children: [
          Text(
            _timeString,
            style: TextStyle(fontSize: 48),
          ),
플러터-시계

마무리

플러터에서 실시간으로 시간을 표시하는 방법을 알아보았습니다. `initState()`에서 타이머를 설정해 1초마다 `_getTime()`을 호출하고, 현재 시간을 가져와 포맷한 후 UI를 업데이트함으로써 사용자에게 실시간으로 시간을 표시할 수 있습니다. 이러한 기능은 다양한 애플리케이션에서 유용하게 활용될 수 있습니다.

Leave a Comment