플러터 시작하기 02. Appbar 꾸미기

지난 포스트에서 Scaffold에 대해서 알아보았습니다. 앱 디자인에 사용되는 가장 기본적인 디자인 레이아웃이죠. 이번에는 scaffold에서 사용되는 여러 속성 중 앱 상단에 위치하는 AppBar에 대해서 알아보도록 하겠습니다. 앱의 제목과 뒤로 가기, 메뉴 등의 버튼들이 위치하는 부분이죠. 

---

플러터 시작하기 01 : Scaffold

---

Appbar 만들기

Scaffold(
    appBar: AppBar(title: const Text('Appbar Example')),
    body: const Center(child: Text('Hello World!')),
);

우선은 기본적인 AppBar를 만들어 보겠습니다. Title 속성은 앱의 제목 등을 표시하는 속성입니다. Text 위젯을 입력해서 문구를 출력할 수도 있고, Icon, 이미지 등도 입력할 수 있습니다. 

버튼 추가하기

AppBar(
    ...
    leading: IconButton(
        icon: const Icon(Icons.arrow_back_ios_new),
        onPressed: () {},
    ),
)

Leading 속성을 활용하면 타이틀 왼쪽에 버튼과 같은 요소들을 추가할 수 있습니다. 위 예제 코드를 참조해서 간단한 뒤로 가기 버튼을 만들어 보겠습니다.

AppBar(
    ...
    actions: [
        IconButton(
            icon: const Icon(Icons.search),
            onPressed: () {},
        ),
        IconButton(
            icon: const Icon(Icons.add),
            onPressed: () {},
        ),
    ],
)

Actions 속성을 사용하면 타이틀의 오른쪽에 버튼들을 추가할 수 있습니다.  Actions는 leading과 달리 위젯의 리스트를 입력으로 받기 때문에 한 개 이상의 버튼을 추가할 수 있습니다. 

타이틀 중앙 정렬하기

AppBar(
    ...
    centerTitle: true,
)

Actions 속성에 여러 위젯을 입력하면 타이틀이 왼쪽으로 쏠리는 현상이 발생합니다. 이럴 때는 centerTile 속성을 참으로 설정하면 간단하게 문제를 해결할 수 있습니다. 

그림자 효과 추가하기

AppBar(
    ...
    elevation: 10,
    shadowColor: Colors.grey,
)

Elevation과 shadowColor 속성을 사용하면 앱바 하단에 그림자 효과를 줄 수 있습니다. 이 효과를 사용해서 앱바가 화면보다 더 위에 떠있는 느낌을 줄 수 있죠. 

이렇게 간단하게 AppBar를 꾸미는 여러 속성들에 대해서 알아보았습니다. 더 많은 기능들이 숨어있지만 자주 쓰이는 기능은 아니기 때문에 다른 포스트에서 더욱 심화적인 내용들을 다뤄보도록 하겠습니다. 

---

플러터 시작하기 03. BottomNavigationBar을 사용해 탭 만들기