[flutter] 플러터 TimePicker에서 시간 범위에 따른 스타일 변경하기

07 Dec 2023

flutter

Flutter에서 TimePicker를 사용할 때, 시간 범위에 따라 스타일을 변경하고 싶다면 어떻게 해야 할까요? 이 글에서는 플러터의 TimePicker에서 시간 범위에 따른 스타일 변경하는 방법을 소개하겠습니다.

1. TimePicker 사용하기

먼저, 플러터에서 TimePicker를 사용하려면 showTimePicker 메서드를 사용해야 합니다. 이 메서드는 BuildContext와 초기 시간 값을 인자로 받습니다. 아래는 예시 코드입니다.

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? selectedTime = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (selectedTime != null) {
    setState(() {
      // 선택한 시간 처리
    });
  }
}

2. 스타일 변경을 위한 TimePicker 래핑

스타일을 변경하기 위해서는 showTimePicker 메서드로 바로 TimePicker를 사용하는 것이 아니라, TimePicker를 래핑하는 커스텀 위젯을 만들어야 합니다. 이 커스텀 위젯에서 시간 범위를 확인하고 그에 따른 스타일을 적용할 수 있습니다.

아래는 TimePicker를 래핑한 커스텀 위젯의 예시입니다.

class CustomTimePicker extends StatelessWidget {
  final DateTime? initialDateTime;
  final DateTime? firstDateTime;
  final DateTime? lastDateTime;

  const CustomTimePicker({
    Key? key,
    this.initialDateTime,
    this.firstDateTime,
    this.lastDateTime,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _selectTime(context);
      },
      child: Container(
        // 스타일 적용
        decoration: BoxDecoration(
          color: Colors.grey,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: const EdgeInsets.all(16),
        child: Text(
          initialDateTime != null ? _formatDateTime(initialDateTime!) : 'Select Time',
          style: TextStyle(
            fontSize: 16,
            color: Colors.white,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    );
  }

  Future<void> _selectTime(BuildContext context) async {
    final TimeOfDay? selectedTime = await showTimePicker(
      context: context,
      initialTime: TimeOfDay.fromDateTime(initialDateTime ?? DateTime.now()),
      firstTime: TimeOfDay.fromDateTime(firstDateTime ?? DateTime(1900)),
      lastTime: TimeOfDay.fromDateTime(lastDateTime ?? DateTime(2100)),
    );
    if (selectedTime != null) {
      // 선택한 시간 처리
    }
  }

  String _formatDateTime(DateTime dateTime) {
    // DateTime을 원하는 형식으로 포맷팅
  }
}

3. 커스텀 TimePicker 사용하기

이제 위에서 만든 CustomTimePicker를 사용해서 시간 범위에 따라 스타일을 변경해보겠습니다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom TimePicker'),
      ),
      body: Center(
        child: CustomTimePicker(
          initialDateTime: DateTime.now(),
          firstDateTime: DateTime.now().subtract(Duration(hours: 2)),
          lastDateTime: DateTime.now().add(Duration(hours: 2)),
        ),
      ),
    );
  }
}

위 예시 코드에서는 CustomTimePicker를 사용하여 TimePicker를 생성하고, 초기 시간과 시간 범위를 설정하였습니다. CustomTimePicker 내에서 스타일을 설정하고, 선택한 시간은 _selectTime 메서드에서 처리할 수 있습니다.

이제 플러터에서 TimePicker에서 시간 범위에 따른 스타일 변경을 할 수 있게 되었습니다. 간편하게 TimePicker를 사용하면서 원하는 스타일을 적용할 수 있습니다.

플러터에서 TimePicker를 사용하면서 시간 범위에 따른 스타일 변경하는 방법을 알아보았습니다. CustomTimePicker를 사용하여 시간 범위를 확인하고 스타일을 적용할 수 있습니다. 이를 활용하여 사용자 친화적인 TimePicker를 구현할 수 있습니다.

참고: Flutter API 문서