[flutter] 플러터 TimePicker에서 선택한 시간을 다른 위젯과 연동하기

07 Dec 2023

flutter

소개

플러터는 사용자에게 시간을 선택할 수 있는 TimePicker 위젯을 제공합니다. 선택한 시간을 다른 위젯과 연동하는 방법에 대해 알아보겠습니다.

TimePicker 위젯 사용하기

TimePicker 위젯을 사용하기 위해서는 showTimePicker 함수를 호출해야 합니다. 아래는 간단한 예제입니다.

import 'package:flutter/material.dart';

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  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 GestureDetector(
      onTap: () {
        _selectTime(context);
      },
      child: Text(
        _selectedTime != null
            ? '선택한 시간: ${_selectedTime.format(context)}'
            : '시간 선택',
      ),
    );
  }
}

위의 코드에서 _MyTimePickerState 클래스는 State<MyTimePicker> 클래스를 상속받는 것을 볼 수 있습니다. 이 클래스에서 showTimePicker 함수를 사용하여 시간을 선택하고, 선택한 시간을 _selectedTime 변수에 저장합니다. 선택한 시간이 변경될 때마다 setState 함수를 호출하여 위젯을 다시 그리도록 합니다.

선택한 시간을 다른 위젯과 연동하기

_MyTimePickerState 클래스에서 선택한 시간을 다른 위젯과 연동하기 위해서는 InheritedWidget을 사용할 수 있습니다. 아래는 선택한 시간을 나타내는 위젯과 연결된 _MyTimePickerState 클래스입니다.

class TimeProvider extends InheritedWidget {
  const TimeProvider({
    Key key,
    @required Widget child,
    this.selectedTime,
  }) : super(key: key, child: child);

  final TimeOfDay selectedTime;

  static TimeProvider of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<TimeProvider>();
  }

  @override
  bool updateShouldNotify(TimeProvider oldWidget) {
    return selectedTime != oldWidget.selectedTime;
  }
}

class MyTimePicker extends StatefulWidget {
  @override
  _MyTimePickerState createState() => _MyTimePickerState();
}

class _MyTimePickerState extends State<MyTimePicker> {
  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 TimeProvider(
      selectedTime: _selectedTime,
      child: GestureDetector(
        onTap: () {
          _selectTime(context);
        },
        child: Text(
          _selectedTime != null
              ? '선택한 시간: ${_selectedTime.format(context)}'
              : '시간 선택',
        ),
      ),
    );
  }
}

위의 코드에서 TimeProvider 클래스는 선택한 시간을 selectedTime 변수를 통해 받아오고, updateShouldNotify 함수를 오버라이드하여 선택한 시간이 변경될 때마다 위젯을 다시 그리도록 합니다.

다른 위젯에서 선택한 시간을 사용하려면 TimeProvider의 of 함수를 사용하여 selectedTime 변수를 사용할 수 있습니다. 예를 들어, 다른 위젯에서 선택한 시간을 출력하는 경우:

class OtherWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final selectedTime = TimeProvider.of(context).selectedTime;
    return Text('선택한 시간: ${selectedTime.format(context)}');
  }
}

결론

플러터의 TimePicker 위젯을 사용하여 사용자에게 시간 선택 기능을 제공할 수 있습니다. 선택한 시간을 다른 위젯과 연동하기 위해서는 InheritedWidget을 사용하여 선택한 시간을 공유하는 방법을 사용할 수 있습니다. 이를 통해 시간 선택에 따라 다른 기능을 구현하는 등 다양한 활용이 가능합니다.