[flutter] 플러터 DatePicker의 배경색 설정하기

08 Dec 2023

flutter

플러터에서 기본 DatePicker 위젯은 플랫폼의 네이티브 DatePicker를 사용합니다. 그러나 플러터의 새로운 DatePicker 위젯을 사용하여 배경색을 설정하는 방법을 알아보겠습니다.

1. 커스텀 테마 사용

Theme(
  data: ThemeData(
    primarySwatch: Colors.purple,
    colorScheme: ColorScheme.light(primary: Colors.purple),
    accentColor: Colors.purple,
  ),
  child: Builder(
    builder: (context) => TextButton(
      onPressed: () {
        showDatePicker(
          context: context,
          initialDate: DateTime.now(),
          firstDate: DateTime(2000),
          lastDate: DateTime(2100),
        );
      },
      child: Text("Open DatePicker"),
    ),
  ),
)

위의 코드는 ThemeData를 사용하여 DatePicker의 배경색을 변경하는 방법을 보여줍니다. primarySwatch, colorScheme, 그리고 accentColor를 사용하여 테마를 설정할 수 있습니다.

2. 커스텀 다이얼로그 사용

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return Dialog(
          child: Container(
            height: 300,
            child: CalendarDatePicker(
              initialDate: DateTime.now(),
              firstDate: DateTime(2000),
              lastDate: DateTime(2100),
              onDateChanged: (DateTime dateTime) {
                print(dateTime);
              },
            ),
          ),
        );
      },
    );
  },
  child: Text("Open DatePicker"),
)

위의 코드는 커스텀 다이얼로그를 사용하여 DatePicker를 나타냅니다. Dialog 위젯 안에 CalendarDatePicker를 추가하여 배경색을 설정할 수 있습니다.

이제 플러터에서 DatePicker의 배경색을 설정하는 방법을 알게되었습니다. 커스텀 테마를 사용하거나 커스텀 다이얼로그를 생성하여 DatePicker를 커스터마이징할 수 있습니다.