240521 TIL

① 배운 것
1. Theme Widget을 알게됨
calendarDatePicker을 사용했는데 기본 Theme이 머테리얼 테마를 따라가서 보라색으로 나옴. 그래서 프로젝트 전체에 적용되는 Theme을 수정해야하는 줄 알았다. 그런데 Theme 위젯으로 calendarDatePicker를 감싸면 calendarDatePicker에만 적용되는 테마를 적용할 수 있다.

//calendarDatePicker에서 원하는 테마 적용하는 법
//근데 이 데이터피커는 월(month)을 유저가 직접 선택 할 수 없고 화살표로만 이동 할 수 있어서 사용하지 않기로 했다 
//결국 라이브러리로 가기로 ㅠㅠ 
var todayBg = primary01;
var todayFg = Colors.white;
SizedBox(
	width: MediaQuery.of(context).size.width * 0.8, 
    child: Theme(
	data: Theme.of(context).copyWith(
	colorScheme: const ColorScheme.light(
	primary: primary01,
	),
	datePickerTheme: DatePickerThemeData(
	todayForegroundColor:
	MaterialStateColor.resolveWith(
	(states) => todayFg,
	),
	todayBackgroundColor:
	MaterialStateColor.resolveWith(
	(states) => todayBg,
	),
	),
	),
	child: CalendarDatePicker(
	initialDate: DateTime.now(),
	firstDate: DateTime(DateTime.now().year - 100), lastDate: DateTime(DateTime.now().year + 100),
	onDisplayedMonthChanged: (month){},
	onDateChanged: (DateTime value) {
	setState(() {
	debugPrint('year: $year, date: $date');
	value.year == DateTime.now().year &&
	value.month ==
	DateTime.now().month &&
	value.day == DateTime.now().day
	? {
	todayBg = primary01,
	todayFg = Colors.white
	}
	: {
	todayBg = Colors.transparent,
	todayFg = Colors.black
	};
	});
	},
	),
	),);

② 회고 (restropective)
달력과 관련된 디자인은 항상 쉽게 넘어가는 법이 없다. 왜냐면 달력을 디자이너가 원하는 대로 만드려면 아예 달력을 첨부터 만들어야하는데 그건 너무 비효율적이고, 라이브러리를 쓰려면 디자이너가 딱 원하는 방식대로 커스텀 하기 어렵기 때문. 그 사이에서 조율을 잘 해야한다.

③ 개선을 위한 방법
없음.