캘린더 일정관리 앱 #1

calendar.dart

https://pub.dev/packages/table_calendar

table_calendar | Flutter Package

table calendar 패키지를 사용해주었다

 

 

 

locale은 영문이 아닌 다른 언어로 번역해 보여주고자 할 때 사용하는데, 한국어로 설정해주었다

그냥 이렇게만 써준다고 되는 것은 아니고, 아래 패키지를 main.dart에 import 해주어야 한다

https://pub.dev/packages/intl

intl | Dart Package

main.dart

WidgetsFlutterBinding.ensureInitialized();

flutter framework가 준비되었는지 확인해주는 위 코드는 원래 runApp() 실행하면 같이 동작되는 부분이지만

여기서는 runApp()이 실행되기 전에 intl 패키지의 함수를 실행하기 위한 코드가 실행되기 때문에 그 위에 작성해준다

 

 

 

TableCalendar() 사용 시아래 세 매개변수는 꼭 넣어주어야 한다

focusedDay: 지정한 날

firstDay: 캘린더 표기 언제부터 할 건지

lastDay: 캘린더 표기 언제까지 할 건지

 

 

 

headerStyle은 아래 이미지 부분을 말하는 건데,

원래 디폴트로 format button이 있었는데 visible false로 설정해주었다

그 외 타이틀 설정도 가능하다

 

 

 

 

calendar.dart

calendar 스타일을 입맛에 맞게 변경해준다

원래 오늘 날짜가 하이라이트되어 있는데, isTodayHighlighted를 false로 두면 오늘 날짜 하이라이트가 보이지 않는다

defaultDecoration: 선택한 날도, 주말도 아닌 날들

weekendDecoration: 주말

selectedDecoration: 선택한 날

각각 꾸며주면 된다

colors.dart

나는 primaryColor 변수를 이렇게 colors.dart에 따로 정의해주고 필요할 때마다 변수로 가져와 쓸 수 있게 했는데

사실 Colors.어쩌구는 쉽게 쓸 수 있는 거라 약간은 굳이 싶지만.. 보기엔 편하니까 😀

나중에 헥사코드로 가져올 때는 용이하게 쓰일 것 같다

그리고 색상지정 시 이전 버전에서는 blueAccent[100] 이렇게 쓰였는데 이제는 blueAccent.shade100으로 쓰라는 것 같다

 

 

 

calendar.dart

선택된 날짜를 표시하는 것과

예를 들어 8월인데 7월의 31일을 선택했을때 7월 달력으로 자동 이동하는 것을 구현했다

 앞서 지정해 준 focusedDay 변수를 selectedDay로 해주면 매번 그에 맞춰 달도 변한다