[flutter] 플러터 TimePicker에서 선택된 시간 저장하는 방법

07 Dec 2023

flutter

플러터(Flutter) 앱에서 TimePicker를 사용해 시간을 선택하고, 선택된 시간을 저장하는 방법에 대해 알아보겠습니다.

1. TimePicker 위젯 사용하기

먼저, 플러터의 showTimePicker 함수를 사용해 TimePicker를 나타낼 수 있습니다. 아래는 간단한 예제입니다.

import 'package:flutter/material.dart';

class TimePickerDemo extends StatefulWidget {
  @override
  _TimePickerDemoState createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay _selectedTime;

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedTime != null
                  ? 'Selected Time: ${_selectedTime.format(context)}'
                  : 'No Time Selected',
            ),
            RaisedButton(
              onPressed: () => _selectTime(context),
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(TimePickerDemo());
}

이 예제에서는 TimePickerDemo라는 StatefulWidget을 만들고, _selectedTime 변수를 사용해 선택된 시간을 유지합니다. _selectTime 함수는 showTimePicker를 호출하여 TimePicker를 나타낸 후 선택된 시간을 _selectedTime 변수에 저장합니다.

2. 선택된 시간 저장하기

TimePicker에서 선택된 시간을 앱 전역에서 사용하려면, 일반적으로 shared_preferences 패키지를 사용합니다. shared_preferences는 플러터 앱에서 간단한 데이터를 영구 저장하기 위한 기능을 제공합니다.

아래는 shared_preferences 패키지를 사용하여 선택된 시간을 저장하는 예제입니다.

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

class TimePickerDemo extends StatefulWidget {
  @override
  _TimePickerDemoState createState() => _TimePickerDemoState();
}

class _TimePickerDemoState extends State<TimePickerDemo> {
  TimeOfDay _selectedTime;

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay picked = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.now(),
    );
    if (picked != null && picked != _selectedTime) {
      setState(() {
        _selectedTime = picked;
      });
      // 선택된 시간을 저장
      final SharedPreferences prefs = await SharedPreferences.getInstance();
      await prefs.setInt('selectedHour', picked.hour);
      await prefs.setInt('selectedMinute', picked.minute);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('TimePicker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              _selectedTime != null
                  ? 'Selected Time: ${_selectedTime.format(context)}'
                  : 'No Time Selected',
            ),
            RaisedButton(
              onPressed: () => _selectTime(context),
              child: Text('Select Time'),
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(TimePickerDemo());
}

이 예제에서는 _selectTime 함수 내부에서 선택된 시간을 shared_preferences를 사용해 저장하고 있습니다. SharedPreferences.getInstance()는 앱 전체에서 동일한 인스턴스를 반환하여 선택된 시간을 저장하기 위해 사용됩니다.

결론

플러터에서 TimePicker를 사용하여 시간을 선택하고, 선택된 시간을 저장하는 방법을 알아보았습니다. shared_preferences를 사용하면 선택된 시간을 앱 전역에서 사용할 수 있습니다. 이를 통해 사용자가 선택한 시간을 추적하거나 알람, 예약 등 다양한 기능을 구현할 수 있습니다.

더 많은 정보를 원하시면, official Flutter documentation을 참고하시기 바랍니다.