[Flutter] (Project) MapleApp: 18. Equipment PetSymbol Page 제작

Equipment에서 Item/Cash와 달리 PetSymbol 파트를 따로 바라보는 이유는, Item/Cash는 공용 베이스를 기반으로 화면을 꾸려나갔으나, PetSymbol은 새롭게 구성해야 했다. 작업을 하다 보니, 어떻게 진행했을 때 가장 효과적으로 진행할 수 있는지 깨달았고 그 순서에 맞춰 내가 배운 내용을 정리해보려고 한다.

🐇 Expanded

Row/Column/Flex 같은 Widget과 함께 자주 사용하는 Expanded Widget이다. 가장 훌륭한 점이, 내 남은 화면의 공간을 전부 채울 수 있다는 장점이 있지만 Row/Column/Flex Widget 이외의 다른 Widget의 자식으로 사용될 경우 가장 많이 볼 수 있는 오류가 Incorrect use of ParentDataWidget.이다. 항상 부모/자식 간 계층 구조를 정확히 파악하자.

 

또한, 중첩 Column을 들어갔을 때 내 상위의 Column에 담기는 Conatiner속에 새로운 Column 자식을 꾸리고 그 곳에 Expanded를 작성하면서 hasSize Error를 자주 경험할 수 있다. 반드시 내 상위의 Column에서 정확히 height를, Row는 Width를 잡아 놓기를 권고한다.

 

또한 Expanded와 함께 비슷한 역할을 하는 Flexible Widget이 있다. 주요 속성인 flex와 fit을 잘 활용해서 원하는 배치를 만들어가도록 하자. Flexible Widget에 대한 활용과 설명은 간단하므로 reference를 첨부하겠다.

※ flexible reference : https://api.flutter.dev/flutter/widgets/Flexible-class.html

※ flexfit reference : https://api.flutter.dev/flutter/rendering/FlexFit.html

🐇 switch

switch구문을 dart의 공식 문서에서 AsyncValue를 학습할 때 함께 배웠다. 예제 속의 switch 구문은 표현식으로 작성되었고, case/break 문보다 편해 보였기에 자주 사용하였다.

나는 여러 개의 케이스가 한꺼번에 적용되길 원했고 그것을 공식 문서에서 찾을 수 있었다.

※ reference : https://dart.dev/language/branches#switch-expressions

 

사용법은 간단하다! 우리가 다중 or 조건문을 걸 때 처럼 or 논리 연산자를 사용해주면 된다!

switch(string) {
	'a'||'b'||'c' => 'alphabet',
	'1'||'2'||'3' => 'number',
	_ => 'special'
}

🐇 gradient borders

※ reference : https://pub.dev/packages/gradient_borders

 

테두리에 gradient를 적용 시킬 방법을 찾았으나, Widget은 없고 Library에 존재해서 가져왔다. 사용법은 LinearGradient와 동일해서 편하게 사용했다.

 

이후 앞에서 만들었던 내용들을 토대로 Widget의 자리를 잡아 논 곳에 데이터를 넣어주면서 마무리하였다.