수유산장

플러터에서 date picker를 기본 제공해 주고 있다.

정확히 말하면 flutter/material.dart에 showDatePicker함수가 

datepicker를 구현한다.

아래는 플러터사이트의 튜터리얼에 있는 사용법이다.

Future<DateTime> selectedDate = showDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(2018),
  lastDate: DateTime(2030),
  builder: (BuildContext context, Widget child) {
    return Theme(
      data: ThemeData.dark(),
      child: child,
    );
  },
);

이를 조금더 사용하기 쉽게 사용자 함수로 아래와 같이 만들었다.

return 값을 받는게 목적이다.

  Future selectDate() async {
    DateTime picked = await showDatePicker(
        context: context,
        locale: const Locale('ko', 'KO'),
        initialDate: DateTime.now(),
        firstDate: DateTime(2015),
        lastDate: DateTime(2030),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: ThemeData.dark(),
            child: child,
          );
        },
    );
    if(picked != null) {
      return picked.toString().substring(0, 10 );
    } else {
      return null;
    }
  }

버튼에 이벤트를 달아 실행하니

아래와 같은 에러가 발생했다.

에러 문구

The following NoSuchMethodError was thrown building Directionality(textDirection: ltr):
The method 'formatFullDate' was called on null.
Receiver: null
Tried calling: formatFullDate(Instance of 'DateTime')

formatFullDate라는 함수를 호출하면서 null 에러가 발생한것이다.

구글링 결과

국제 지역화 정보를 사용한다는 것을 셋팅하여야 한다는 것이다.

첫번째는 pubspec.yaml에서 페키지를 dependency 하고

main.dart에서 MateralApp에 localizationsDelegates 와 supportedLocales를 설정해 주면된다.

pubspec.yaml

  # lcalizations package
  flutter_localizations:
    sdk: flutter

main.dart

      child: MaterialApp(
          title: 'TEST APP',
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            const Locale('en', 'US'),
            const Locale('ko', 'KO'),
          ],

에뮬레이터 재시작을 하니 아주 예쁘게 달력이 출력된다.

테스트 결과 supportedLocales는 설정하지 않아도 달력이 정상적으로 출력된다.

한가지 아쉬운것은 달만 선택가능하는 기능을 제공하지 않는것이다.