lucyya99
commented
1 year ago 상태 변경이 불가능하지만, 디자인만 완성되도록 만들었습니다.
설명 전 알아둘 단축키
- 클래스 우클릭 -> Go To -> Declaration or Usages : 클래스로 분리하여 작업할 예정이라 이걸 알아두면 어떻게 만들었는지 빠르게 확인할 수 있습니다
StatelessWidget vs StatefulWidget
위젯은 수정이 불가능하고, 수정하기 위해서는 없앤 후 다시 생성해야 합니다. 위젯은 텍스트가 아니라 디자인을 의미합니다.
- StatelessWidget은 입력을 받지 않고 고정된 텍스트를 사용할 때 사용합니다. 한번 위젯을 생성하면 build 후 재생성이 불가능합니다.
- StatefulWidget는 Widget 부분과 State 부분을 따로 분리해서 관리합니다. Widget의 생성자 파라미터가 변경되면 위젯이 없어졌다가 재생성되지만, State가 따로 저장되어 있기 때문에 텍스트는 변경되지 않습니다. 반대로 State가 변경되면 위젯이 변경되지 않고 State만 수정됩니다.
현재는 텍스트가 변경되지 않는 StatelessWidget만 사용하여 UI대로 겉모습만 완성했습니다.
작업 내용 설명
제가 작업한 Stateless class는 총 4가지로 분리되어 있습니다.
_TopLogo(), _TopText, _MiddleLogin(), _BottomLink()
스크린 설명
*위치만 제대로 박혀있습니다. id, pw text도 input type으로 바꿀 예정입니다.
- Expanded : 안에 든 내용물과 관계없이 공간을 차지합니다. flex에 넣은 숫자 비율만큼 차지합니다. 이해하기 쉽게 검정색 테두리는 Expanded로 감싼 것, 빨간색은 내용물로 표시했습니다.
mainAxisAlignment: MainAxisAlignment.end: Row, Column에서 mainAxisAlignment 말그대로 가로, 세로로 어떻게 정렬할지 결정합니다. 공간을 Expanded를 사용해서 미리 차지해뒀기 때문에 Top에 있는 것들은 밑으로 정렬하고 Bottom에 있는 것들은 start로 정렬해두면 각자 맞는 위치에 들어갑니다.- spaceEvenly vs spaceAround vs spaceBetween spaceEvenly, spaceAround는 공간을 children 개수만큼 나누고, 가운데에 내용물을 배치합니다. spaceEvenly는 spaceAround와 방식은 똑같은데 양옆에 빈공간을 조금 더 둔다고 생각하면 됩니다. spaceBetween는 children 위젯들을 아예 같은 간격으로 정렬합니다. (링크 참조)
❗로고가 png로 저장되어 있는데 왜 배경색이 하얀색으로 들어갔는지 모르겠네요. ❗이미지나 버튼이 화면 크기에 맞게 flexible하게 만드는 방법도 있는데 나중에 수정하겠습니다
작업한 코드도 곧 올리겠습니다!
wynter122
우선 로그인 화면을 만들어두고, 자체 로그인을 구현할지 서드파티 api를 사용할지 결정하여 수정을 거쳐야 할 것 같습니다.