20220906 TIL #있는 위젯을 써야할까, 새로운 위젯을 만들어야 할까?

업무로 두 개의 페이지를 받았다.

일단 ui부터 그리기로!

 

한 페이지는 간단한 형태라서 처음에 딱 피그마에서 봤을 때는 금방 할 수 있을 줄 알았다.

그렇지만 역시나, ui는 내가 생각하는데로 모양이 나오지 않았다.

 

그리고 더 큰 고민은 기존에 만들어져 있는 위젯을 사용해야 하는지, 아니면 새로운 위젯을 만들어야 하는지였다.

두 페이지 작업하면서 모두 이런 고민이 생겼다.

 

1. 전체적인 디자인에서의 통일성, 코드 중복, 이후 수정이 필요한 경우 등을 고려할 때 이미 만들어진 위젯을 쓰는게 낫다고 1차적으로 판단했는데, 문제는 내가 원하는 모양과 완전히 일치하지 않다는 것!

이런 경우에 기존에 만들어진 Widget A의 변형인 A'를 새로 만들어서 쓰는게 나을지 고민이다.

(아니 padding이나 margin을 주고싶은데 기존 Widget에서는 크기가 고정.... 이런 경우에도 그냥 새로 만드는게 나을까??)

 

2. 다른 경우에는 위젯으로 분리되어 있지는 않은 상황인데, 다른 페이지와 완전히 동일하게 생긴 버튼들이라서 그대로 복붙해서 사용했다.

이런 경우에는 위젯을 분리해서 컴포넌트화해서 쓰는게 나을까??

 

---

피그마를 보고 작업하고 있는데 여기에 있는 디자인과 얼마만큼 일치해야하는지도 잘 모르겠다.

(예를 들면, 사이즈를 절대값이 아니라 전체화면 크기 대비 %로 하고 싶은데 그러면 그 값은 내가 눈대중으로 판단해도 되는 건가?)

 

또, 피그마에는 나타나지 않았는데 내가 판단하기에 뭔가 애니메이션이나 효과가 필요하다고 생각되면 이 경우에는 어떻게 작업해야 할까?

 

---

배경 이미지를 흐리게 표현하고 싶어서 이것저것 찾아보다가 BackdropFilter라는 위젯을 새로 알게 되었다.

https://api.flutter.dev/flutter/widgets/BackdropFilter-class.html

BackdropFilter class - widgets library - Dart API

그런데 해놓고 보니 내가 원한건 전체 블러 처리가 아니라 점점 흐리게 되는거였다.

 

그래서 찾은건 ShaderMask에 LinearGradient를 쓰는 방법이다.

https://api.flutter.dev/flutter/widgets/ShaderMask-class.html

ShaderMask class - widgets library - Dart API

 

근데 얘는 가장 좋은 방법인지 모르겠어서 좀 더 고민해봐야겠다.

 

그리고 Stack으로 필요한 위젯들을 겹쳐놨는데, 중간에 들어가야 하는 Colunm은 어떻게 해야할까?

Stack이라서 그냥 전체에서 size를 계산해서 위치를 조정하면 될 것 같은데 더 좋은 방법은 없을까??

 

 

내일 사수와 리뷰하면서 이 모든 궁금증을 풀고 올 수 있길!