[Flutter] 09. AppBar 디자인

 

 

 

 

🚀title

---

title 속성을 이용하면 AppBar에 글자를 넣을 수 있습니다.

 

이렇게 Text 위젯의 style을 바꿔서 폰트 색, 사이즈 폰트 등등을 변경할 수 있습니다.

 

🚀centerTitle  +) 새로 추가

---

appBar에서 그냥 title 속성을 통해서 제목을 입력하면 왼쪽으로 치우쳐진 모습을 볼 수 있습니다.

 

 

centerTitle 속성을 이용하면 가운데 정렬을 할 수 있는데 값으로는 true, false만을 받고 true 입력 시 가운데 정렬이 됩니다.

 

 

🚀backgroundColor  +) 새로 추가

---

appBar의 배경색을 변경하고 싶다면 backgroundColor 속성을 이용해서 변경할 수 있습니다.

 

🚀elevation  +) 새로 추가

---

현재로는 appBar가 이렇게 떠 있는 것 처럼 그림자 효과가 적용되어있습니다. 이를 해제하려면

 

 

elevation 속성을 사용할 수 있습니다. 소수점 한 자리 수 까지 적용할 수 있고 없애는 것 뿐만 아니라 늘릴 수도 있습니다.

 

 

이런식으로 늘릴 수 있습니다.

 

 

 

 

 

🚀leading

---

 

leading 속성을 사용하면 맨 좌측에 아이콘을 넣을 수 있습니다.

코드에서 볼 수 있듯 title 보다 leading이 밑에 선언되어도 좌측에 붙어서 선언됩니다.

보통 앱 서랍버튼을 주로 사용합니다.

 

이런식으로 말이죠! (Icons.menu를 넣었습니다.)

 

 

 

 

🚀actions

---

actions를 이용하면 leading과 반대로 우측에 아이콘들을 배치하는데 여러개 할 수 있습니다.

 

 

 

영삼 참고 : https://www.youtube.com/watch?v=ShmXbPpmIMU&list=PLfLgtT94nNq1izG4R2WDN517iPX4WXH3C&index=5