search

SWM-15th-Dnight / flutter-client

android / ios client source code
0 stars 0 forks source link

공통 AppBar 만들어서 적용하기 #45

Open call-me-bammer opened 3 weeks ago

call-me-bammer commented 3 weeks ago

AppBar에 대한 코드 재사용성이 없어서, CustomAppBar 위젯을 만들어 로그인 스크린, 캘린더 뷰, 설정 페이지, 인풋 폼, 사이드 바 등에 적용합니다.

현재 /lib/common/component/에 해당 코드를 작성하여, LoginScreen에 해당 CustomAppBar를 적용한 상태이고, 스펙은 다음과 같습니다.

피그마에 작성한 그럴싸한 UI 그대로가 아니더라도, 개발 / 테스트 단에서 자연스럽고 오히려 억지로 반영하는 것 같다면 피그마 수정 없이 이슈로 쌓아서 공유하겠습니다.

아래 flutter inspector로 보고 코드 단계에서는 정확히 맞습니다.

Image

일단 로그인 스크린, 달력 뷰, 사이드바, 설정, 인풋 폼 등까지 적용하면 해당 이슈를 닫겠습니다.

call-me-bammer commented 3 weeks ago

ics import, logout 관련 우선순위가 더 높은 작업보다 먼저 한 이유는, 앱바라서 그렇습니다.(?)

다음으로 달력 뷰, 사이드 바에 적용하고 프로필/설정 뷰에서 적용하면서 위 이슈들 처리하겠습니다.

call-me-bammer commented 3 weeks ago

CustomAppBar가 MainCalendar, 달력 뷰에도 적용되었습니다.

하지만 LoginScreen에서는 String을 전달하고, 달력 뷰에서는 DateTime을 줘서 centerText를 표시하므로, CustomAppBar가 dynamic 타입으로 받아서 둘 다 처리 가능하도록 했습니다.

main_calendar.dart 내부에 존재하던 CustomHeader 관련 코드를 전부 삭제하고 대체했습니다.

기존 CustomHeader 보다 높이도 낮아지고 아이콘도 조금 작아져서 어색하지만, 나중에 수정해야하면 CustomAppBar 스펙만 바꿔서 수정하겠습니다.

call-me-bammer commented 3 weeks ago

MainCalendar에서 호출하는 CustomSidebarModal에서도 기존의 기본 AppBar에서 CustomAppBar로 교체했습니다.

이미지 타입 위젯도 잘 처리하는 것을 확인했고, 그 동안 String 타입의 한글만 처리했는데 (Pretendard font), Text 타입으로 직접 TextStyle을 지정하여 넘겨주어 서비스 명을 표시할 영문 Rockwell font도 처리합니다.

gutter 사이즈 8.0에서 20.0으로 전달하여 자연스럽게 표현했습니다.

call-me-bammer commented 3 weeks ago

PreferenceView, 프로필 및 설정 페이지에도 CustomAppBar를 적용했습니다.

따로 implements PreferredSizeWidget를 앱바에 구현해줘야, Scaffold 위젯 아래에 바로 appbar: 요소에 사용할 수 있어서 그대로 사용할 시, 다음과 같은 에러 메시지가 뜹니다.

lib/screens/preference/preference_view.dart:150:15: Error: The argument type 'CustomAppBar' can't be assigned to the parameter type 'PreferredSizeWidget?'.
 - 'CustomAppBar' is from 'package:mobile_client/common/component/custom_app_bar.dart' ('lib/common/component/custom_app_bar.dart').
 - 'PreferredSizeWidget' is from 'package:flutter/src/widgets/preferred_size.dart' ('../../../development/flutter/packages/flutter/lib/src/widgets/preferred_size.dart').
      appBar: CustomAppBar(),

SafeArea 처리도 안되어있어서 SingleChildScrollView 아래의 Column 상단에 넣는 구조로 바꾸면 그럴 필요가 없어서 그렇게 했습니다.

Icons.more_horiz 아이콘을 왼쪽에 넣어 놓기는 했지만, 누르면 로그아웃 옵션이 있는 팝업은 아직 없습니다. 로그아웃은 일단 중앙의 버튼으로만 가능합니다.

Image