[flutter] 플러터 DatePicker에서 오늘 날짜 강조하기

08 Dec 2023

flutter

개요

플러터 앱에서 DatePicker를 사용하여 날짜를 선택할 때, 현재 날짜를 강조하고자 할 때가 있을 것입니다. 해당 기능을 구현하는 방법을 알아보겠습니다.

필요한 패키지

우선, flutter_datetime_picker 패키지를 사용하여 DatePicker를 구현하는 예제를 살펴보겠습니다. 필요한 패키지는 다음과 같습니다.

dependencies:
  flutter_datetime_picker: ^1.4.0

오늘 날짜 강조하기

DatePicker에서 오늘 날짜를 강조하려면, style 속성을 사용하여 오늘 날짜에 대한 스타일을 변경해야 합니다.

다음은 DatePicker에서 오늘 날짜를 강조하는 예제 코드입니다.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('DatePicker Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              DatePicker.showDatePicker(
                context,
                showTitleActions: true,
                minTime: DateTime(2020, 1, 1),
                maxTime: DateTime(2030, 12, 31),
                onChanged: (date) {
                  print('change $date');
                },
                onConfirm: (date) {
                  print('confirm $date');
                },
                currentTime: DateTime.now(),
                locale: LocaleType.ko,
                theme: DatePickerTheme(
                  backgroundColor: Colors.white,
                  itemStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 18),
                  doneStyle: TextStyle(color: Colors.blue, fontSize: 16),
                  cancelStyle: TextStyle(color: Colors.red, fontSize: 16),
                  hasTodayButton: true, // 오늘 버튼 표시
                  todayStyle: TextStyle(
                    fontWeight: FontWeight.w500,
                    fontSize: 16,
                    color: Colors.orange, // 오늘 날짜 색상 변경
                  ),
                ),
              );
            },
            child: Text('Show DatePicker'),
          ),
        ),
      ),
    );
  }
}

위의 코드에서 todayStyle을 사용하여 오늘 날짜의 글자색을 변경하고, hasTodayButton을 통해 오늘 버튼을 표시할 수 있습니다.

결론

DatePicker에서 오늘 날짜를 강조하는 방법을 알아보았습니다. 이를 통해 사용자가 현재 날짜를 쉽게 확인할 수 있게 됩니다.