[Flutter] Sliver app bar 배우기

https://docs.flutter.dev/cookbook/lists/floating-app-bar

Place a floating app bar above a list

 

 

1. SliverAppBar란?

 

앱의 스크롤에따라 모양이 변하는 app bar를 말한다.

 

SliverAppBar를 만드는 방법은 다음 세줄로 요약된다

 

• CustomScrollView를 만든다.
• SliverAppBar를 만든다
• SliverList를 만든다

 

여기서 Sliver란 CustomScrollView를 만들때 CustomScrollView의 하위항목으로 제공되는 scrollable한 위젯들을 Sliver라고 한다.

 

Sliver의 종류는 SliverList, SliverGridList, SliverAppBar 등이 있다.

 

Silver가 아니고 Sliver임을 기억하자

 

 

 

2. CustomScrollView

SliverAppBar를 만들기 위해서는 먼저 CustomScrollView를 만들어야 한다.

 

 

여기서 먼저 CustomScrollView가 뭐하는놈인지 부터 짚고 넘어가자

 

A ScrollView that creates custom scroll effects using slivers.

sliver에 여러가지 스크롤 이펙트를 주고싶을때 쓰는 스크롤 뷰 라고 한다.

 

 

 

대충 이것만 봐서 감이 안잡힌다. 여러 인터넷을 뒤져봐도 다 저리 흐리멍텅하게 적어놨다.

하지만 하기 두가지는 확실하다. 구글의 대표적인 예제이기 때문.

 

• SliverAppBar를 만들 수 있다
• ListView, GridView는 하나의 스크롤에 놓을 수있다. 원래는 둘다 스크롤 속성을 가지고 있어서  스크롤이 따로 논다.

 

 

아마 대부분 사람들이 원하는건 SliverAppBar만 만들고 몸통은 일반적인 SingleChildScrollView처럼 쓰고싶을 것이다.

아래 예제에 적어놨으니 도움이 됐으면 한다.

 

 

 

먼저 Scaffold를 만든 뒤 body에 CustomScrollView를 달아준다

Scaffold(
  body: CustomScrollView(
    slivers: <Widget>[]
  ),
);

 

 

 

3. SliverAppBar

다음으로 SliverAppBar를 slivers에 넣어준다

CustomScrollView(
  slivers: [
    const SliverAppBar(
      title: Text(title),
      floating: true,
      flexibleSpace: Placeholder(),
      expandedHeight: 200,
    ),
  ],
)

여기서 파라미터 항목들을 설명하면 다음과 같다

 

title: appBar의 내용을 담을 위젯을 여기가다 넣어준다.

floating : 스크롤을 아래로 내리다가 윗방향으로 다시 스크롤하면 appBar가 뜨도록 해 준다

expandedHeight : SliverAppBar의 높이를 조절한다

 

flexibleSpace : 조금 이해하기 힘든 프로퍼티였는데 이해하면 상당히 쉽다. SliverAppBar의 뒷배경에 깔리는 위젯을 말한다. 스크롤다운 하면 사라져 버린다.

 

AppBar에 배경을 넣고 스크롤을하면 없어지게 만들고 싶다? 그러면 flexibleSpace에 Image 위젯을 넣으면 된다!

 

 

여기서 주목할 부분은 title이다.

title은 pined 속성을 true 주면 SliverAppBar 사이즈가 줄어도 title 위젯은 살아남는다.

 

 

4. SliverList and SliverGrid

AppBar를 만들었으니 이제 몸통부분을 만들 차례이다.

 

이때 SliverList와 SliverGrid를 이용한다.

둘다 각각 ListView와 GridView에 대응된다고 생각하면 된다.

 

아래 예제는 SliverList를 사용하는 예제이다.

 

SliverList는 child 목록을 생성하기 위해 SliverChildBuilderDelegate 위젯을 이용한다.

이 빌더위젯은 child widget을 lazily하게 build 함을 기억하자.

 

앞서 말한것 처럼 보통 개발을 할 때 AppBar만 Sliver하게 만들고 몸통은 일반적으로 쓰고 싶다 하면

아래처럼 sliver 아이템을 하나만 만들고 안에다가 Column을 쓰던지 하면 된다.

 

            SliverList(
              delegate: SliverChildBuilderDelegate(
                  (context, index) => Container(
                        child: Column(
                          children: [],
                        ),
                      ),
                  childCount: 1),
            ),