[2021-04-09] 편지 페이지 컴포넌트 설계 숙제

[Ujaa]

목차

• 스크린 분류
• 주 컴포넌트 분류
  1. 타이틀
  2. 키워드
  3. 키워드 선택 완료 버튼
  4. 선택된 키워드
  5. 편지지 색상 선택 버튼
  6. 편지지
  7. 전송 및 확인 버튼
  8. 글자 수 카운트 텍스트
  9. 안내 팁
  10. 다시보지 않음 기능이 있는 경고창
  11. 전송 중 안내 창
  12. 프로세스 바
• 기타 참고
  1. 반응형
  2. 키보드 때문에 text 올라가면서 appbar text으로 바뀌는 애니메이션

스크린 분류

** 파란색 반응형, 빨간색 고정으로 하면 좋을 듯.

1. 키워드 선택 스크린
   
   고민 키워드를 선택해 주세요. 상단 반응형하고 밑에 하얀 부분 반응형. 비율 정해주서 하면 될듯. 안에 키워드는 짤리면 스크롤 되게 만들기

2. 편지 작성 스크린
   
   편지지 높이, 화면 padding, 팁 안내 창 추가 padding 반응형으로 하면 될듯.

3. 편지 전송 스크린
   

배경은 스택, 그 위에 타이틀은 상단 기준 정렬, 밑의 안내 문구 영역은 하단 기준 정렬

주 컴포넌트 분류

타이틀

기존의 하단 마진이나 패딩 없애고 제작하면 될 듯. 타이틀 컬러 변경해야 하니 constants파일에 있는 타이틀 텍스트 스타일에서 컬러 제외하고 켤러는 파라미터로 받기.
(근데 상단 부분 반응형으로 하게 되면 하..후...그냥 컴포넌트 없애야하나......하.....같이 얘기해보죠)

• 공동 컴포넌트
• 파라미터:
  타이틀 텍스트 내용
  서브 타이틀 텍스트 내용
  타이틀 컬러
• 기타:
  constant 값 수정

키워드

이미 구현하셨으니 패스.
(텍스트 밑 하이라이트만 bool값으로 isTextHighlight 이런걸로 받아서 하면 될 것 같은데! 하셨나여 )

키워드 선택 완료 버튼

구현되어 이미 공동 컴포넌트에 있음.
이름 변경 필요해 보임. rounded finish button이런걸로 바꾸는 거 좋을 듯.
(근데 이거 채연님께 appbar에 완료 버튼 있는 형태로 변경하는 거 어떠냐구 말씀 드리기로 했던 것 같은데 언제 말하죠? ㅋㅋㅋ)

• 기타:
  이름 변경

선택된 키워드

나중에 공동 컴포넌트로 빠질 것 같긴 한데 다른 페이지에서 쓰이지 않으니 우선은 letter안의 컴포넌트로 구현.

• letter 컴포넌트
• 파라미터:
  키워드 리스트
• 기타:
  키워드 텍스트 스타일 constant에 만들기

편지지 색상 선택 버튼

드롭다운 형식의 동그란 버튼을 구현해야 함. 버튼 클릭 시 편지지 색상 변경 기능.

• letter 컴포넌트
• 파라미터:
  onpress에 해당하는 function 리스트(버튼 개수만큼)
• 기타:
  편지지 색상 color 파일에 만들어 놓기(ex. lightBlueLetterPaperColor....이런식?, 그리고 밝은 블루 컬러는 어플 메인 밝은 색상과 같은 색상이지만 따로 변수로 만들어서 사용하는 게 좋을 듯)

구현 시 참고 자료

1. Flutter Speed Dial 패키지 사용

*** 우리 어플의 버튼은 아래방향으로 버튼들이 나열되는데 Flutter Speed Dial패키지에서 그게 가능한지 모르겠음
패키지 링크: https://pub.dev/packages/flutter_speed_dial
패키지 사용하는 영상: Speed Dial Fab with Flutter (Multiple Floating Action Buttons)

2. floatingActionButton에 애니메이션으로 구현

(이미지 클릭 시 gif 확인 가능)

사진이랑 코드 있는 글 출처: https://medium.com/@agungsurya/create-a-simple-animated-floatingactionbutton-in-flutter-2d24f37cfbcc
비슷한 거 구현하는 영상: Flutter Tutorial - Value Widgets #7 Floating Action Button

편지지

생각나는 방법

컨테이너
↓
column
↓ ↓
expand button
↓
textfield
(컴포넌트 분리 안하는 게 좋을 것 같기도...닉네임 하면서 textfield 컴포넌트로 어떻게 분리해야 하는지 감이 안오더라고요. 서영님 혹시 아시면 이것도 컴포넌트로 ㄱㄱ)

전송 및 확인 버튼

디자인 동일. 글자 수에 관계없이 같은 넓이.
아직 다른 페이지에서 사용되는지 모르니 우선은 letter폴더 안의 components폴더 안에 구현하면 될 듯.

• letter 컴포넌트
• 파라미터:
  onpress
  버튼 text

글자 수 카운트 텍스트

textfield 에 최대 글자를 설정하는 기능이 있지만 한글은 마지막 글자가 잘리는 버그 있음. 따로 구현 필요해짐. 회원가입 과정 중 닉네임 입력 스크린에서도 필요하기 때문에 공동 컴포넌트로 분리하면 좋을 것 같음. 상태에 따라 ui를 계속해서 업데이트 해줘야하는데 컴포넌트 분리했을 때 ui 업데이트 어려우면 닉네임 스크린, 편지 보내기 스크린에 각자 중복된 코드 작성하면 될 것 같음.

• 공동 컴포넌트
• 파라미터:
  현재 글자 수
  최대 글자 수

안내 팁

완전 고정 위젯이니 letter폴더 안의 components폴더 안에 구현하면 될 듯.

• letter 컴포넌트
• 파라미터: x

다시보지 않음 기능이 있는 경고창

• 공동 컴포넌트
• 파라미터:
  기존 + 다시보지 않음 넣을지 말지 여부 결정하는 bool

구현 시 참고 자료

전송 중 안내 창

(1) 전송 중

(2) 전송 완료 후

(1) 상황일 때를 기본 형태로 하고 전송 완료 되어있는지 안되었는지 bool 값으로 받아서 하면 되지 않을까요.

• letter 컴포넌트
• 파라미터:
  전송 완료되었는지 아닌지 판단하는 bool값

프로세스 바

: 디자인에 맞게 커스텀해야함.

나중에 또 사용되는 곳이 있을 것 같으니 공동 컴포넌트로 분리

• 공동 컴포넌트
• 파라미터: x

구현 방법과 관련된 자료

1. gif로 추가(이미지와 동일)

Image.asset(
  "images/loading.gif",
),

2. spinner 커스텀(애니메이션으로 자체 구현)

관련 영상:
Animated Loader In Flutter

기타 참고

반응형 만들 시 참고 내용

0. MediaQuery
   화면 방향 또는 (핸드폰)화면 크기 정보 알아낼 수 있음

1. LayoutBuilder class
   상위 부모의 사이즈를 알아낼 수 있음

• 사용법

//크기를 알고 싶은 위젯의 child에 사용
 child:LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints) {
                  final localWidgetSize=Size(constraints.maxWidth, constraints.maxHeight);
                  return Center(
                    child: Text('this is container: $localWidgetSize') //부모 위젯의 사이즈 출력됨
                  );

2. ScreenUtil package 사용
   글자 크기도 고정시켜줌

• 사용법

//앱 최상단 위젯을 아래와 같이 감싸줌. size에 기준이 되는 디바이스 크기 삽입
return ScreenUtilInit(
      designSize: Size(360, 690),
      allowFontScaling: false,
      child: MaterialApp(

//넓이와 높이 설정 시 두 방법 중 하나로.
//1.
width: ScreenUtil().setWidth(50),
height:ScreenUtil().setHeight(200),
fontsize:ScreenUtil().setSp(15),
 //2.
width: 50.w,
height: 200.h
fontsize: 15.sp

5. 해상도 별 이미지 저장
   공식문서: 기본 이미지 (1.0x)를 images 폴더에 넣고, 적합한 배율을 폴더 이름으로 지정하여 하위 폴더에 다른 변형 이미지들을 넣을 수 있습니다.

images/my_icon.png       // Base: 1.0x image
images/2.0x/my_icon.png  // 2.0x image
images/3.0x/my_icon.png  // 3.0x image

참고 글 출처:
http://murmurblog.com/flutter-responsive-ui/
https://muhly.tistory.com/59
https://flutter-ko.dev/docs/get-started/flutter-for/android-devs#%ED%95%B4%EC%83%81%EB%8F%84%EB%B3%84-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%8C%8C%EC%9D%BC%EC%9D%80-%EC%96%B4%EB%94%94%EC%97%90-%EC%A0%80%EC%9E%A5%ED%95%98%EB%82%98%EC%9A%94

키보드 때문에 text 올라가면서 appbar text으로 바뀌는 애니메이션

생각해낸 방법: 키보드가 올라갈때와 안올라갈때를 다른 화면으로 구현. 그리고 동일한 컴포넌트에 hero 에니메이션 적용 ^^

[cyleeeee]

갬동 실화

#include<stdio.h> //루룰ㄹ이게 되네

님들

• 저 감동 받아서 쓰러짐
• 흑흑

printf("열심히 할게요")

우리에겐 **"비일"**이 있다

• 비일 가서 파스타 먹기
  • 맛있겠다
  • 다음엔
  • 뭐먹지
• 고기먹기
• 아무거나먹기

---

1. 배고프ㅏㄷ
2. 서영님 시험 화이팅~!