[ 1. Scaffold ] 화면의 기본 뼈대를 소환해봅시다!

1. Scaffold

" 화면의 기본 뼈대를 소환해봅시다! "

 

---

Flutter에서 화면을 이루는 종합적 뼈대를 Scaffold라고 합니다.

 

종합적 뼈대가 무슨 뜻인지에 대해서,

 

우리가 메인 화면을 만들 때 "빈 공간에 글자 몇 글자"만 띄워도 상관은 없지만

 

다른 앱에서는 흔히 < 상단바, 가운데 컨텐츠, 하단바 >로 이루어진 구성을 알 수 있습니다.

 

이런 구성이 들어있는 종합적인 뼈대가 바로 Scaffold입니다.

 

꼭 Scaffold를 사용할 필요는 없지만, 기본적인 레이아웃 틀을 제공함으로써 화면 출력할 때 잘 쓰이는 위젯입니다.

 

(아래에서 언급하겠지만 Scaffold가 없으면 drawer를 사용하기 어려운 경우가 있습니다. 왼팔이 잘린 느낌일까요?)

 

---

Scaffold의 내부 속성들

조금 더 구체적으로 어떤 구성을 가지고 있는지 알면 좋을 내부 속성들만 알아보자면

appBar : 상단바를 의미합니다. 보통 AppBar 위젯을 사용합니다.
body : 가운데 컨텐츠를 담을 몸통입니다. 이곳에 컨텐츠가 들어간 위젯을 넣으면 됩니다.
bottomNavigationBar : 하단바를 의미합니다. 보통 BottomAppBar / BottomNavigationBar 위젯을 사용합니다.

drawer : 왼쪽에서 나오는 "서랍"입니다. 보통 Drawer 위젯을 사용합니다. 화면 좌측에서 튀어나오는 위젯입니다.
endDrawer: 화면 우측에서 나오는 drawer입니다.

floatingActionButton : 기본적으로는 화면 우측 하단에 뜬금없이 버튼이 하나 나옵니다.
보통 FloatingActionButton 위젯을 사용합니다.

bottomSheet : 바닥으로부터 일정 높이의 크기로 등장하는 화면입니다. 보통 영구적인 화면 연출로 유지하기보다 알람이나 광고 등과 같이 임시로 등장하는 용도로 자주 사용합니다.

 

이 모든 속성을 이용하지 않아도 되며, 보통은 appBar + body (+ bottomNavigationBar) 조합을 사용합니다.

drawer를 사용하면 좌우측에서 화면이 나오니까 프로필이나 카테고리를 띄우는 화면으로 사용하면 더 좋겠지요?

 

---

 

Flutter - material.dart - Scaffold class 예제 사진 1

 

위의 그림에서 Sample Code라고 적혀있는 부분이 상단바(appBar)이고,

가운데 버튼이 몇 번 눌렀는지 글이 적혀있는 부분이 body이고,

제일 아래 회색빛의 영역이 하단바(bottomNavigationBar)이고,

가운데 버튼은 위치를 가운데에 지정시킨 floatingActionButton입니다.

 

body에 Center 위젯(아주 간단하게 가운데 정렬된 빈 위젯)이 들어간 것처럼

appBar 속성이라고 해서 반드시 AppBar 위젯을 사용할 필요는 없습니다. 다만 통상적으로 사용될 뿐입니다.

 

Scaffold 위젯이 화면을 구성하는 종합적 뼈대를 제공한다면,

AppBar나 BottomAppBar 같은 위젯은 상단바를 구성하는 종합적 뼈대를 제공한다고 생각하면 좋습니다.

구현의 편의를 위해 제공되는 위젯인 겁니다.

 

---

[ AppBar 예시 - Drawer 이용 ]

 

AppBar는 하나의 툴바 레이아웃으로 Leading / Title / Actions 그리고 하단의 bottom 속성으로 구성됩니다.

 

보통 leading은 맨 앞에 등장하는 버튼 / title은 앱바의 제목 / actions는 후미에 오는 버튼들이 옵니다.

(여기서 leading에 위치한 버튼이 Scaffold의 drawer를 열고닫는 버튼이 될 수도 있는 겁니다!)

 

bottom은 보통 body의 컨텐츠(페이지)를 바꾸기 위해 TabBar 위젯을 사용하지만 꼭 사용하지 않을 수 있습니다.

(AppBar의 bottom 영역은 Scaffold의 body 영역보다 위에 위치합니다.)

Flutter - material.dart - Drawer class 예제 사진 1

 

Drawer Example 제목의 왼쪽에 카테고리 아이콘이 있습니다.

이 아이콘이 바로 leading 영역에 위치한 아이콘 버튼입니다.

이것을 누르면 왼쪽에서 Drawer 위젯이 등장합니다.

 

*** AppBar 위젯의 구성을 보세요.

leading을 지정하지 않았는데 Scaffold에서 drawer를 지정했다고

카테고리 아이콘이 자동으로 AppBar leading에 적용된 특징이 있습니다!