[HUT] 7/16 개발일지

요즘 날씨가 장난 아니다. 날씨가 더워서 그런지 너무 피곤한 것 같다.

오늘은 홈화면 마무리를 할 거 같다. 적어도 시작할 거 같다.

개발

사실 이번 디자인의 핵심은 상단에 있는 출발지/도착지 구역과 아래에 있는 최근 이용 사이에 있는 그라데이션이다. 그라데이션을 추가함으로 구별감을 주는 것을 목표로 했다.

 

가장 먼저 해본 것은 피그마로 만들 때 처럼 Divider 을 사용하여 그라데이션을 주는 방식이었다. 되는 듯 했으나 디자인이 예쁘지 않아서 포기했다.

 

그 다음, 약간 직관적이게 접근하여 상단에 있는 톱메뉴를 컨테이너에 넣어 그림자를 두는 형식을 사용해봤다. 이게 훨신 좋아서 이 방법을 사용하기로 결정했다. 또한, 그분선을 확실하게 두기 위해서 디자인 한 것처럼 회색 선을 두었다.

 

처음 디자인 (좌) / 애플리케이션 (우

피그마 디자인을 오래 봐서 그런지 많이 어색하지만 나름 잘 나온 것 같아 기분이 좋았다.

 

그 다음은 아래 최근 이용 기록인데 처음 봤을 때는 많이 어려워 보였다.

 

하지만, Column/Row 을 사용하여 차근차근 코딩해본 결과 어렵지 않게 완성할 수 있었다.

 

사실 디자인이 살짝식 마음에 들지 않지만 그건 나중에 조절 하는 것으로 했다.

 

이번 기능에서 처음으로 클래스를 만들어 보았다.

 

오히려 이렇게 클라스 작업하고 보여주는 작업이 걱정했던 것과는 반대로 더 빠르고 수월했던 것 같다.

 

이번 작업을 하며 느낀점은, 저번에 가운데 정렬을 하면서 'GestureDetector' 를 사용했던 것이 생각이 난다. 해당 위젯은 클릭은 감지할 수 있지만, 눌렀을때 눌림을 표시해주는 효과는 보여지지 않는다. 이를 원했던 나는 조금 더 찾아본 결과 'InkWell' 라는 위젯을 볼 수 있었다. 이를 사용했을 때 원하는 효과가 잘 나왔다.

 

엄청 어려워 보이던 홈 화면에 마지막 기능이 완료가 되었다. 사실 백엔드랑 연결 하는 작업까지 할 까 고민을 해봤지만, 그것은 다음으로 미루는 것으로 하고, 다음에는 매칭 화면을 작업할 것 같다.

 

많이 어려워 보였지만 수월하게 끝난 것을 보고 자신감을 얻었던 하루였다. 아직까지 화면에 보여지는 방식이 생소하지만, 점점 익숙해 지는 기분이 들어 매우 좋았다.

 

참고자료

elevation 효과를 검색하다가 사용한 그림자 효과 - https://www.codegrepper.com/code-examples/whatever/how+to+add+elevation+to+container+flutter

Bottom infinite overflow 해결 - https://stackoverflow.com/questions/63638106/bottom-overflowed-by-infinity-pixels

enum 사용하기 위한 검색 - https://stackoverflow.com/questions/13899928/does-dart-support-enumerations

enum 에 값을 넣기 위한 검색 - https://stackoverflow.com/questions/38908285/add-methods-or-values-to-enum-in-dart, https://stackoverflow.com/questions/15854549/how-can-i-build-an-enum-with-dart/15854550#15854550

스크롤을 하기 위해 넣은 List View - https://stackoverflow.com/questions/52053850/flutter-how-to-make-a-column-screen-scrollable

추후 추가할 LazyLoading 이 궁금해서 조금 읽어봤어요 - https://stackoverflow.com/questions/49508322/flutter-listview-lazy-loading

Inkwell 기능대해서 읽었습니다 - https://stackoverflow.com/questions/58295509/flutter-how-to-make-an-entire-row-clickable

태핑 효과  - https://stackoverflow.com/questions/62320511/how-to-make-a-container-lighten-on-hold-on-tap-in-flutter

Datetime 관련 내용 조사 - https://api.flutter.dev/flutter/dart-core/DateTime-class.html

아이콘을 추가하기 위한 flutter_svg - https://pub.dev/packages/flutter_svg