티스토리 뷰

728x90

121 ~ 123일 차 코딩 일기입니다.

4일 ~ 8일인데 작업 못하는 날이 있어서 3일 치 일기입니다.

우선 첫날은 상세화면 전체 디자인 작업을 완료 하였습니다.

Flutter로 만든 메모장 앱 포스팅을 진행하려고 하였으나 아직 부족함이 많은 코드이고

디자인 외 큰 기능이 있는 앱은 아니어서 디자인 외에는 쓸 내용이 없어서 우선 제외하였습니다.

둘째 날은 디자인에 맞게 기능을 추가하였습니다.

오른쪽의 피카츄처럼 안 잡은 포켓몬을 어둡게 처리하는 효과를 하고 싶었습니다.

처음에는 내부적으로 필터 기능이 구현되어있나 검색을 해보았지만 제가 원하는 효과는 못 찾았습니다.

상세화면 전체적인 디자인과 기능을 넣어 주었습니다.

val normalState by animateColorAsState(
    targetValue = if (pokemonInfo.normal) Color(0x0) else Color(0xBF000000)
)

...
modifier = Modifier
    .graphicsLayer(alpha = 0.99f)
    .drawWithCache {
        onDrawWithContent {
            drawContent()
            drawRect(
                normalState,
                blendMode = BlendMode.SrcAtop
            )
        }
    }

예전에 디자인 연습할 때 텍스트에 그러데이션 효과를 줄 때 봤었던 drawWithCache를 이용해서 구현을 하게 되었습니다.

 

마지막으로 오늘은 포켓몬 정보에서 텝 영역과 스크롤 영역에 싱크를 맞추는 기능을 구현하였습니다.

이것과 관련해서는 일기에 작성하기엔 길어지므로 포스팅에 추가를 할 예정입니다.

결과 영상입니다.

 

내일부터는 스타벅스 클론 앱을 만들면서 포스팅을 진행해볼까 합니다.

https://wwit.design/2021/03/04/starbucks/

 

Lifeplus

한국의 UI/UX 모바일 패턴을 수집합니다.

wwit.design

 

전체 디자인은 wwit에서 참조하여서 제작을 할 예정입니다.

기능의 경우 어디까지 할지는 아직은 미정인데 우선 남은 시간 동안 계획을 세워보려고 합니다.

728x90
댓글