Flutter Time Picker Korea

Flutter에서 showTimePicker를 사용하여 한국 시간으로 표시하려면 기본적으로 TimeOfDay 객체를 DateTime으로 변환한 후, 한국 시간대 (Asia/Seoul)로 변경하여 표시하면 됩니다. 예제 코드로 한국 시간을 표시하는 방법을 보여드리겠습니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TimePickerExample(),
    );
  }
}

class TimePickerExample extends StatefulWidget {
  @override
  _TimePickerExampleState createState() => _TimePickerExampleState();
}

class _TimePickerExampleState extends State<TimePickerExample> {
  TimeOfDay? _selectedTime;
  String? _formattedTimeInKST;

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? pickedTime = await showTimePicker(
      context: context,
      initialTime: _selectedTime ?? TimeOfDay.now(),
    );

    if (pickedTime != null && pickedTime != _selectedTime) {
      setState(() {
        _selectedTime = pickedTime;

        // 선택한 TimeOfDay 객체를 DateTime 객체로 변환
        final now = DateTime.now();
        final DateTime selectedDateTime = DateTime(
          now.year,
          now.month,
          now.day,
          pickedTime.hour,
          pickedTime.minute,
        );

        // 한국 시간대 포맷 설정 (Asia/Seoul)
        final DateFormat formatter = DateFormat('HH:mm', 'ko_KR');
        _formattedTimeInKST = formatter.format(selectedDateTime.toUtc().add(Duration(hours: 9)));
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter showTimePicker 한국시간 예제')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedTime == null
                  ? '시간을 선택하지 않음'
                  : '선택한 시간 (KST): $_formattedTimeInKST',
              style: TextStyle(fontSize: 20),
            ),
            ElevatedButton(
              onPressed: () => _selectTime(context),
              child: Text('시간 선택'),
            ),
          ],
        ),
      ),
    );
  }
}

설명

1. TimeOfDay -> DateTime 변환: TimeOfDay 객체를 사용자의 현지 날짜와 결합하여 DateTime으로 변환합니다.
2. UTC -> KST 변환: DateTime.toUtc().add(Duration(hours: 9))를 통해 한국 시간(KST)으로 변환합니다.
3. 형식화 및 출력: intl 패키지의 DateFormat을 사용하여 24시간제 포맷(예: HH:mm)으로 포맷팅하여 한국 시간대에 맞게 표시합니다.

이 예제에서는 사용자가 선택한 시간을 한국 시간대에 맞춰 표시합니다. intl 패키지가 필요하므로, pubspec.yaml에 추가해야 합니다:

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.17.0