nimoseel / schedule_mate Goto Github PK

플러터를 학습하며 만든 '스케줄 메이트'입니다.
table_calendar 패키지를 사용하여 달력을 구현했으며
캘린더의 날짜를 선택하여 해당 날짜의 스케줄을 입력하고, 수정하고, 삭제할 수 있습니다.
확인 버튼을 누르거나 텍스트 필드 아웃포커스를 통해 스케줄을 저장하고, 수정할 수 있습니다.
앱의 스플래쉬 화면의 경우 flutter_native_splash 패키지를 활용하여 구현했습니다.

1. 스플래쉬 화면	2. 주요 기능 - 일정 추가, 수정, 삭제

• table_calendar: ^3.0.9

• intl: ^0.18.1

• drift: ^2.10.0

• get_it: ^7.6.0

• flutter_native_splash: ^2.3.2

  drift 추가시
  https://drift.simonbinder.eu/docs/getting-started/

BoxShape가 circle인 경우에는 borderRadius가 null이 아니어야 한다는 조건을 만족하지 않을 때 발생

• CalendarStyle에 다음 코드를 추가하여 해결

outsideDecoration: BoxDecoration(
          shape: BoxShape.rectangle,
        );

https://api.flutter.dev/flutter/widgets/WidgetsFlutterBinding/ensureInitialized.html

• 바인딩이 초기화되지 않았다면, WidgetsFlutterBinding 클래스를 사용하여 새로운 바인딩 인스턴스를 생성하고 초기화
• runApp을 호출하기 전에 바인딩이 초기화되어야 하는 경우에만 이 메서드를 호출
• Flutter 애플리케이션에서 비동기 작업을 수행하기 전에 초기화 작업을 수행하기 위해 사용
• 왜 비동기 작업 전에 초기화를 진행해야할까?
  • 앱의 안정성을 높이고 일관된 상태를 보장하기 위해서. 만약 초기화 진행하지 않고 비동기 작업을 수행하면 오류가 발생할 수 있음
  • 나의 경우 main함수내에서 intl 작업을 비동기적으로 진행하고 있기 때문에 해당 작업 전에 초기화 작업을 수행.

• textFormField 아웃포커싱 되면 저장
• 키보드 내 done 버튼 누르면 저장

• onFieldSubmitted, onTapOutside에 _handleSubmitted 함수를 실행하는 방법을 사용
• onTapOutside가 AlertDialog와 상호작용 할 때 잘못된 동작을 일으키는 문제가 있었음
  (취소, 확인 버튼을 눌러도 정상 작동하지 않고 다이얼로그 외부가 어두워짐)

• _focusNode.addListener(_handleFocusChange); 하는 방법으로 변경
• 포커스를 잃었을 때 _handleSubmitted 함수 실행한다는 것은 곧 textFormField 외부를 터치하여 저장할 수 있다는 것
• textFormField 외부를 터치하면 포커스를 잃기 때문에 _handleSubmitted 실행
• 키보드 내 done 버튼 눌렀을 때도 포커스가 해제되기 때문에 _handleSubmitted 실행

@override
void initState() {
  super.initState();
  // 기존 코드
  
  _focusNode.addListener(_handleFocusChange); // 코드 추가 
}

void _handleFocusChange() {
  if (!_focusNode.hasFocus) { // 포커스를 잃었을 때 _handleSubmitted 실행 
    _handleSubmitted();
  }
}

스케줄 카드의 수정하기 버튼을 처음 누른 경우 해당 필드로 포커스 되지 않고,
다시 한번 수정하기 버튼을 눌러야 해당 필드로 포커스가 되었다.

  void onPressedEdit() {
    Navigator.pop(context);
    setState(() {
      editable = true;
    });
    _focusNode.requestFocus();
  }

onPressedEdit함수 내에서 _focusNode 값을 print해보니
첫번째 클릭시 flutter: FocusNode#e072f(context: Focus, NOT FOCUSABLE)
두번째 클릭시 flutter: FocusNode#e072f(context: Focus)

이는 FocusNode가 렌더링 된 이후에 포커스를 요청해야한다는 것.
위 코드에서 onPressedEdit 함수가 호출되었을 때 setState를 통해 위젯이 다시 렌더링되면서 _focusNode.requestFocus()를 호출하기 때문에 문제가 발생하는 것.

WidgetsBinding.instance?.addPostFrameCallback은 위젯이 렌더링된 후에 특정 작업을 실행시킨다.
때문에 WidgetsBinding.instance?.addPostFrameCallback을 사용하여 위젯이 다시 렌더링된 후에 포커스를 요청하도록 한다.

    WidgetsBinding.instance?.addPostFrameCallback((_){
      FocusScope.of(context).requestFocus(_focusNode);
    });

• 변수 선언시 초기값을 주지 않지만 생성자 내에서 초기값을 할당하여 사용하는 것.
• late 키워드 사용시 컴파일러가 해당 변수가 나중에 초기화 될 것이라는 것을 인지하고 에러 발생시키지 않음.

late ScrollController _scrollController;

스크롤 컨트롤러의 경우 위젯 트리가 렌더링되기 전에 컨트롤러를 초기화할 경우 원치 않는 동작이 발생할 수 있다.
(ex. 위젯 렌더링 전 컨트롤러가 스크롤 이벤트 처리하려고하는 경우)
때문에 위젯 트리가 렌더링된 후에 초기화하는 것이 좋다.
late 키워드 사용으로 변수 선언시 초기값을 주지 않아도 되고, 위젯 트리 빌드 후 변수 초기화 가능하다.