개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-07 ~ 2023-02-09
개발자 : Won Chi Hyeon
기능 : 사용자가 직접 원하는 날짜를 선택할 수 있다.
날짜 선택 시 실시간으로 화면의 D-Day 및 만난 날 업데이트
프로젝트에 필요한 이미지와 폰트를 다운로드하여 추가해줍니다.
pubspec.yaml을 다음과 같이 수정합니다.
Home Screen 화면 위젯 ui를 _DDay와 _CoupleImage stless 클래스 위젯을 생성하여 두 개로 나누고
Column을 사용해서 두 개를 화면의 양 끝으로 배치하였습니다.
Scaffold의 backgrounㅇ에서 배경색을 핑크색으로 변경하고
_CoupleImage 위젯에 asset/img/middle_image.png 커플 이미지를 Image.asset을 사용하여 추가해주었습니다.
MediaQuery로 MaterialApp의 화면 전체의 반의 크기를 차지하도록 설정하였습니다.
앱 상단에는 여러 Text 위젯과 하트 아이콘 위젯으로 이루어져 있습니다.
사귀기 시작한 날짜와 며칠이 지났는지 표시하는 글자는 날짜가 변경될 때마다
자동으로 바뀌게 코딩해야 하지만 일단은 임의의 글자들을 넣어두었습니다.
Text 위젯에 스타일을 Theme을 사용하여 지정할 수 있습니다.
fontFamily : 기본 글씨체를 지정
textTheme : Text 위젯 테마를 지정
headline1, bodyText1, bodyText2, headline2 임의의 스타일명을 지정해주고
각 스타일명에 따라 적용할 스타일을 지정해줍니다.
테마를 불러오고 각 Text위젯에 스타일을 적용해줍니다.
글자 크기를 변경하는 과정에서 화면의 반이상을 차지하게 되어 밑 공간의 이미지가
화면의 반 MediaQuery.of(context).size.height/2을 차지할 수 없게 되어 화면 밖으로 나가게 되는
overflow 오버플로 현상이 발생하였습니다. 텍스트나 이미지의 크기를 변경하거나 Expanded로 감싸서
문제를 해결할 수 있는 데 Expanded로 이미지의 Center 위젯을 감싸서 문제를 해결하였습니다.
setState()를 사용한 상태관리를 하기 위해 HomeScreen을 stless 위젯에서 stful 위젯으로 변환합니다.
하트를 눌렀을 때 날짜를 고를 수 있는 UI가 나오며 날짜가 변경될 때마다 firstDay를 변경하기 위해서
firstDay를 오늘 날짜로 초기화하고 하트 아이콘에 onPressedHeart 함수를 호출하는 데 이를 생성자로 받기 위해서
콜백 함수 형태로 만들었습니다. 하트를 눌렀을 때 클릭이 출력되도록 설정하고 테스트하였습니다.
만나기 시작한 날짜 firstDay를 생성자로 전달받아서 텍스트 위젯에 Datetime을 년.월.일 형태로 텍스트 바인딩을 사용해서
변경하였습니다.
현재 날짜에서 만난 날 날짜를 빼면 며칠 지났는 지가 나오고 그 기간 차이를 일수로 계산하고 (inDays) 1을 더해주었습니다.
현재 날짜를 now 변수에 저장하고 만난 날 날짜 firstDay의 차이(Difference)를 계산하여 출력하였습니다.
하트를 눌렀을 때(상태변화) setState() 함수가 호출되고 만난 날짜에서 하루가 감소되고
그 영향으로 D-Day가 하루씩 늘어나도록 기능을 추가하였습니다.
하트에 실제로 적용할 기능은 하트를 탭햇을 때 만난 날짜를 설정할 수 있는 다이얼로그를
보여주고 날짜를 탭하고 화면 밖을 탭했을 때 만난 날짜가 설정한 날짜로 수정되도록 하는 기능입니다.
따라서 onHeartPressed 함수에 날짜만 선택할 수 있는 쿠퍼티노 다이얼로그를 생성합니다.
하트를 탭햇을 때 상태 관리 setState()를 사용해서 만난 날짜를 선택한 날짜가 되도록 수정하였습니다.
쿠퍼티노 다이얼로그를 변경할 때마다 만난 날짜와 DDay가 새로 업데이트됩니다.
