[Flutter] AppBar에 대해서 알아보자.

 

안녕하세요. 뿔테 안경 개발자입니다. 오늘은 앱의 꽃이라고 생각되는 AppBar에 대해서 알아보려고 합니다.

 

 

우선 기본적으로 제공되는 AppBar입니다. 일반적으로 AppBar는 Scaffold 안에서 생성이 가능합니다. 이제 AppBar의 타이틀을 변경해보고 중앙으로 옮겨도 보겠습니다.

 

타이틀을 중앙으로 위치시키려면 centerTitle에 값을 true로 주시면 됩니다. false를 주게 된다면 원상태로 복구가 됩니다.

 

타이틀과 타이틀 위치가 바뀌었다!

다음으로는 AppBar의 색상과 높이를 변경해보도록 하겠습니다. 저는 grey 색상으로 변경하고 높이는 0으로 지정해보겠습니다.

 

높이는 elevation을 사용해서 조절이 가능합니다. elevation은 기본적으로 double(소수) 값을 받기 때문에 0.0으로 지정해줬습니다.

 

 

제법 그럴싸한 AppBar가 완성되가고 있네요. 그래도 조금 밋밋한 느낌이 있으니 AppBar의 아이콘을 추가해보겠습니다.

AppBar의 오른쪽에 Search 아이콘을 만들어보겠습니다. 

 

 

우선 AppBar 우측 상단에 아이콘 버튼을 생성하려면 actions을 사용해서 생성할 수 있습니다. 리스트(대괄호) 자료구조형식으로 되어있어서 아이콘 버튼을 여러 개 생성할 수 있습니다.

 

 

축하드립니다. 이쁜 AppBar가 탄생했습니다! 

도움이 되셨다면 하트 한 번씩만 눌러주시면 감사하겠습니다. 저에겐 큰 도움이 됩니다!