[flutter] 플러터에서 useTimeOfDay 훅(hook)을 이용한 시간에 따른 UI 변경

14 Dec 2023

flutter

플러터(Flutter)에서는 시간에 따라 화면의 UI를 변경하는 기능을 구현할 수 있습니다. useTimeOfDay 훅(hook)을 사용하여 현재 시간을 감지하고 이를 기반으로 UI를 동적으로 업데이트할 수 있습니다.

useTimeOfDay 훅(hook)이란?

useTimeOfDay 훅은 시간 변화를 감지하고 이를 통해 UI를 업데이트하기 위한 기능입니다. 이를 사용하여 실시간으로 현재 시간에 따라 화면을 동적으로 변경할 수 있습니다.

아래는 useTimeOfDay 훅을 플러터에서 사용하는 간단한 예제 코드입니다.

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

Widget timeBasedUI() {
  TimeOfDay currentTime = useTimeOfDay();

  // 현재 시간에 따라 UI를 변경하는 로직
  String greeting = '';
  if (currentTime.hour < 12) {
    greeting = 'Good Morning';
  } else if (currentTime.hour < 18) {
    greeting = 'Good Afternoon';
  } else {
    greeting = 'Good Evening';
  }

  return Scaffold(
    appBar: AppBar(
      title: Text('Time-based UI'),
    ),
    body: Center(
      child: Text(greeting, style: TextStyle(fontSize: 24)),
    ),
  );
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: timeBasedUI(),
    ),
  ));
}

위 예제 코드에서 useTimeOfDay 훅을 사용하여 현재 시간을 감지하고, 시간에 따라 다른 환영 메시지를 표시하는 간단한 UI를 구성했습니다.

결론

플러터의 useTimeOfDay 훅을 활용하면 간단하게 시간에 따라 UI를 동적으로 변경할 수 있습니다. 이를 활용하여 실시간으로 변화하는 화면을 구현할 수 있습니다.