[Flutter] (Proejct) MapleApp: 5. MainHome Page 제작

🐇 MainHome Page

MainHome Page에서는 TextFiled와 Custom 검색 버튼을 활용해서 캐릭터를 검색할 것이다.

 

TextEditingController를 사용해 TextFiled를 감시하고 TextField가 onSubmitted 되거나, 검색 버튼을 클릭할 시 TextEditingController의 Text로 캐릭터를 검색한다.

 

TextFiled는 decoration 속성에 InputDecoration Class를 사용해야 한다. Container 처럼 Box가 아니기 때문에 BoxDecoration은 사용할 수 없다.

 

서로 각기 다른 Widget을 만들 때 가장 오래 걸리는 일이 위치와 크기를 맞추어 주는 것이다. 시간을 줄이기 위해 가장 중요한 것은, Widget의 집합 최상단 Container를 찾는 것이다.

 

예를 들어, 내가 TextFiled와 Text가 포함된 Custom Button을 가로로 만든다고 할 때 다음과 같이 구상할 수 있다.

Container → Row → TextFiled + Custom Button

여기서 TextFiled는 꽉 차게 만들 것이므로 Expanded Widget으로 감싸주고, Custom Button은 Conatiner에 Text가 포함된 상태라고 한다면 다음과 같이 표현할 수 있다.

Container → Row → Expanded(→TextFiled) + Container(→Text)

이때 TextFiled는 기본 초기화 값에 따라 크기와 여백이 정해지고, Expanded Widget에 의해 가로로 길게 넓혀진다.

 

하지만, Text의 경우 Container가 Text Widget의 크기 만큼만 자리를 차지하므로 가로/세로 크기 모두 TextFiled보다 작은 공간을 가지게 된다.

 

이를 해결하는 방법은 padding과 margin을 부여하는 것인데, 4 방향으로 크기를 직접 조절한다는 것은 좋은 퍼포먼스가 될 수 없고 반응형 UI에 적합하지 않다. 그래서 우리는 세로를 최대한 늘려, 가로만을 padding과 margin을 활용해 넓히는 방법을 선택해보자.

 

세로로 넓히는 방법은 Text 상위 Container를 Column으로 감싸고, Container를 Expanded로 다시 한번 감싸는 것이다. 그러면 우리는 최상위 Container의 높이만큼 Text가 포함된 Container를 세로로 확장시킬 수 있다.

여기서 굳이 세로를 선택한 이유는, TextFiled가 Row Widget에서 가로로 Expanded Widget이 사용되었기 때문에, 똑같이 가로로 Expanded 속성을 부여하는 경우 가로를 1:1 분할하기 때문이다.

 

이 과정에서 결과적으로, Row로 특정 집합을 만들어가는 경우 최상위 Container의 높이를 지정해준다면 더 좋은 퍼포먼스를 보여줄 수 있다.

 

이런 모습으로 Widget을 쌓아 올리고 디자인하는 방법을 지속적으로 고안해 나간다면, 더 다양한 Widget과 퍼포먼스를 통해 간결하고 쉬운 코드를 찾아갈 수 있을 것이다.