[2024.03.27] 로그인 상태관리, 검색바 기능 추가함

- 홈 화면

(좌측)홈화면 / (우측) 내 Lottie 프로젝트에서 URL 생성

• Lottie 애니메이션을 홈화면의 Page마다 추가해주었음
• 무료만 사용하다보니 선택할 수 있는 애니메이션이 제한적임
• Flutter에서 LottieBuilder.network 위젯 사용을 위해 Lottie 애니메이션의 URL이 필요했는데 정확하게 얻는 방법을 알게 됨
  1. 원하는 애니메이션을 클릭,
  2. 해당 애니메이션을 나의 프로젝트로 이동시킴
  3. </> Enable Link 스위치 토글을 활성화 시켜 Lottie 애니메이션 링크를 얻음
      *주의사항: 
     무료버전을 사용하는 사람은 최대 10개까지 프로젝트로 이동할 수 있으며, 내 프로젝트에서 지우면 URL이 사라지기 때문에 더이상 불러올 수 없음

 

- 로그인 화면(로그인 상태관리 추가)

로그인 상태관리

• 앱 실행 시, 이전 로그인 상태를 알 수 있도록 로직을 추가함(SharedPreferences, Provider, Repository등 사용)
• 로그인 할때 정보를 기기에 저장하기 때문에 재실행되었을 때 이전 로그인 상태를 따라감
• 로그인화면은 TextFormField을 자식으로 갖는 Form 위젯을 사용함
• 입력된 Text에 따라 오류 메세지를 하단에 띄움
• animate 패키지를 사용하여 체인으로 화면전환 사이에 딜레이를 추가함
• GoRoute에서 로그인여부를 판단하고 이전에 로그인이 되었다면 /home 으로 이동하게 소스 작성함
  (로그인이 안되어있었다면 로그인화면으로 이동)
• 세팅화면에서 로그아웃가능

-  칵테일 검색 화면

검색바 추가

• 칵테일을 검색할 수 있는 Search Bar를 AppBar 부분에 추가함
• AppBar에 있는 돋보기 아이콘을 누르면 검색바가 나오는데 Animation 효과를 추가하였음
• 검색바 로직으로 TextEditController, onChanged() TextEdit에 입력받은 문자가 변할 때마다 호출되게 함
• 전체 칵테일이 들어있는 List에서 조건문을 통해 조회된 아이템들을 새로운 List에 추가하는 방식을 사용함

 

- 회고:

• Flutter 앱 개발에서 MVVM 디자인 패턴을 Repository와 함께 쓸때 main.dart에서 일부 처리해줄 수 있다는 것을 다시 한번 알게 되었음
• 익숙한 UX/UI를 찾고 애니메이션 효과를 적용하는 것에 시간을 많이 써야함
• 모바일 쪽 레퍼런스를 볼 수 있는 사이트가 있어서 1인개발자에게는 다행이고 다른 앱의 결과물이 경이로움

참고중인 모바일 레퍼런스 사이트 링크: https://mobbin.com/browse/ios/apps

 

 

다음할일:

1. 로그인 User 정보 Firebase에 연동시키기

2. 위스키 퀴즈 화면 만들기(Yes or No) 카드 스윕