[Flutter] (Project) MapleApp: 4. AppBar 개발

🐇 AppBar

앱바는 BottomNavigationBar처럼 ConsumerWidget을 상속받는 Class로 구현할 수 없었다. 그 이유는 Class로 구현되는 Widget은 무엇을 반환하던 PreferredSizeWidget를 상속받지 않기 때문에, appBar의 속성에 위배된다.

 

그래서 AppBar의 경우, BuildContext를 매개변수로 받아 AppBar Widget을 직접 반환하는 함수로 만들어야 정상적으로 appBar에 할당이 가능하다.

 

AppBar를 구현하려면, 내부의 모습을 이해하

고 있어야 한다. 공식문서에서 소개하는 AppBar의 형태는 다음과 같다.

leading은 주로 Icon이 배치된다. Menu Icon을 통해 좌측의 Drawer를 관리하거나, Application의 Main Icon을 사용하는 경우가 많다. 단, Widget 형식을 넣어주어야 하므로 주의하자. 만약 프로젝트 내 Image를 넣는 경우, Image Widget에 AssetImage Class를 활용하여 할당해주자.

 

title은 String으로 Application의 서비스 이름을 기재하는 경우가 대다수이다.

actions에는 검색, 알람 등의 아이콘 배치와 함께 추가적인 기능을 담당하는 곳이다. 알람의 경우 우측 Drawer를 활용해 주는 경우가 많다.

flexibleSpace는 top(title)/bottom 사이에 있는 여백 공간이다. 크기가 따로 지정되지 않는 이상 생기지 않는다.

bottom에는 Tab을 활용하여 bottom 아랫부분에 TabBarView Widget을 함께 사용하는 경우도 존재한다