[ 1-1. AppBar & SliverAppBar ] 스크롤하면 숨는 AppBar, SliverAppBar!

 

1-1. AppBar & SliverAppBar

"스크롤하면 숨는 AppBar, SliverAppBar!"

---

고정형 AppBar와 스크롤 반응형 AppBar

우리가 보통 사용하는 AppBar는 (메인)화면에서 고정된 상단바로, 앱의 이름이나 각종 버튼이나 drawer를 열게 해줍니다.

고정된다는 뜻은 화면의 일정 영역을 지속적으로 차지한다는 뜻인데,

메인 컨텐츠를 볼 때는 이 상단바가 필요없을 때는 사라지게 하면 더 넓게 컨텐츠를 즐길 수 있지 않을까요??

(예를 들면 웹툰을 볼 때 처럼 말입니다!)

 

스크롤을 내릴 때만 AppBar가 축소되거나 사라지고, 다시 올리면 나타나는 스크롤 반응형(sliver) AppBar를

Flutter에서는 SliverAppBar라는 위젯으로 기본으로 제공하고 있습니다!

---

SliverAppBar 사용법

https://www.youtube.com/watch?v=G6qJkjt08k0

오늘의 내용과 관련하여 Flutter Mapp 유튜브 채널에서 SliverAppBar에 대한 사용을 설명하고 있습니다.

 

우선은 SliverAppBar는 주로 "Scaffold의 body"에서 사용됩니다.

왜냐하면 SliverAppBar는 Sliver 위젯 시리즈로 스크롤에 반응하는 위젯 중 하나이고,

스크롤 자체가 body에서 주로 일어나는 행위이기 때문에

다른 sliver 시리즈 위젯들과 함께 body에서 다같이 사용합니다. (Sliver 시리즈는 추후 다룰 예정)

 

SliverAppBar 코드 사용 예제 사진 1 by Flutter Mapp

 

Scaffold의 body : CustomScrollView 가 사용됩니다.

- 이는 body의 컨텐츠로 스크롤로 오르내릴 수 있는 컨텐츠를 띄울 거라는 뜻입니다.

  (일반 위젯을 넣으면 스크롤이 불가합니다! 보통은 body 영역 내에 고정된 크기의 위젯으로 출력되기 때문입니다.)

 

CustomScrollview로 스크롤할 수 있게 되었고(보통 스크롤은 미끄러지는 효과를 주므로 slivers라고 부릅니다)

그 내용물로는 slivers 프로퍼티에 <sliver시리즈 위젯 List> 컨텐츠를 담습니다.

 

예제에서는  SliverAppBar와 SliverList를 담고 있습니다.

SliverAppBar는 에뮬레이터에서 해변가 사진으로 되어있고,

SliverList는 아래에 Item #의 스크롤 리스트들이 주르륵 있는 것을 볼 수 있습니다.

 

SliverAppBar만 보았을 때

flexibleSpace에 내용이 담긴다는 것을 알 수 있고,

나머지 pinned하고 floating으로 어떻게 시각적 효과를 연출할 것인지 제어합니다.

 

여기서 아래로 스크롤을 하면 저 해변가 사진의 SliverAppBar가 축소되면서 사라집니다.

- pinned는 true면 축약된 AppBar로 상단에 남게 되고, false면 아예 사라집니다.

- floating은 true면 스크롤을 내리다가 잠깐 다시 올리면 SliverAppBar가 바로 확대가 시작되고,

                   false면 스크롤을 맨 위까지 올라가야 SliverAppBar가 다시 확대됩니다.

 

pinned와 floating은 원하는 목적에 따라서 적절히 설정하면 됩니다.

 

1) 화면에 화려한 배너로 처음에 시선을 끌다가 배너가 사라졌으면 좋겠다!

-> 중간에 보일 필요가 없는 배너 형식이라면 floating을 false로 하면 좋겠지요?

 

2) 쾌적한 컨텐츠 화면을 원한다!

-> pinned가 false면 상단바가 없는 아주 쾌적하고 넓은 화면이 될 겁니다.

---

상단바는 AppBar만 있는 것이 아니었다!

AppBar와 유사하면서도,스크롤에 반응하게 하여 시각적인 효과 (쾌감, 쾌적감)을 줄 수 있는 SliverAppBar를 활용한다면유저에게 재미난 효과를 줄 수 있을 것입니다.

 

Flutter Widget 중에는 이렇게 기본적인 위젯을 제공하면서 부가적인 기능이 추가된 위젯들도 있기에이러한 비슷한 종류의 위젯들을 묶어서 알면 크게 헤매지 않을 것입니다 :)