플러터(Flutter)에서 제공되는 TimePicker 위젯은 시간을 선택하는 기능을 제공합니다. 이 위젯은 테마(themes)를 사용하여 외관을 커스터마이징할 수 있습니다. 이 문서에서는 플러터 TimePicker의 테마를 설정하는 방법을 알아보겠습니다.

테마 설정하기

플러터의 TimePicker는 기본적으로 디바이스의 시스템 테마에 맞춰져 있습니다. 하지만 경우에 따라서는 앱의 특정한 테마로 TimePicker를 스타일링해야 할 수도 있습니다. 이를 위해 ThemeData 클래스를 사용하여 테마를 설정할 수 있습니다.

먼저, MaterialApp 위젯의 theme 속성을 사용하여 앱의 전체 테마를 설정합니다. 예를 들어, 다음과 같이 brightness, primaryColor 및 accentColor를 설정할 수 있습니다.

MaterialApp(
  theme: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    accentColor: Colors.green,
  ),
  ...
)

위와 같이 앱의 전체 테마를 설정하면 TimePicker 또한 해당 테마를 따르게 됩니다. 하지만 경우에 따라서 TimePicker만 따로 스타일링해야 할 수 있습니다. 이 경우, Theme 위젯을 사용하여 TimePicker에 대한 특정한 테마를 설정할 수 있습니다.

Theme(
  data: ThemeData(
    primarySwatch: Colors.purple,
    accentColor: Colors.orange,
    fontFamily: 'Roboto',
  ),
  child: TimePicker(...),
)

위의 예제에서는 primarySwatch, accentColor, fontFamily와 같은 속성을 사용하여 TimePicker에 대한 특정한 테마를 설정했습니다. 필요에 따라 다양한 테마 속성을 사용하여 TimePicker의 외관을 사용자 정의할 수 있습니다.

참고 자료

• Flutter API Documentation - ThemeData class
• Flutter Cookbook - Change the app’s theme

위의 참고 자료를 참고하여 더 자세한 내용과 다양한 테마 설정 방법을 알아보실 수 있습니다.