Sliver widgets 알아보기

이번에 공부할 내용은 Sliver widgets이다.

sliver은 조각을 의미한다. 이런 slivers을 이용하기 위해서 scroll기능과 함께 잘 쓰인다.

1. CustomScrollView

위 이미지와 같은 형태로 작동이 된다. 각각의 아이템은 sliver이라고 할 수 있고 CustomScrollView는 위와 같이 스크롤 할 수 있게 만들어준다.

아래는 예제 코드이다.

CustomScrollView(
  slivers: <Widget>[
    const SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 200.0,
        mainAxisSpacing: 10.0,
        crossAxisSpacing: 10.0,
        childAspectRatio: 4.0,
      ),
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.teal[100 * (index % 9)],
            child: Text('Grid Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
    SliverFixedExtentList(
      itemExtent: 50.0,
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return Container(
            alignment: Alignment.center,
            color: Colors.lightBlue[100 * (index % 9)],
            child: Text('List Item $index'),
          );
        },
      ),
    ),
  ],
)

• SliverGrid가 grid item 부분이고 SliverFixed ExtentList가 list item 부분이다.
• sliver별 속성이나 slive사이의 공간 등을 설정해줄 수 있다.
• 각각의 sliver은 index값을 가질 수 있어 위 코드의 경우는 index를 이용해 색상을 구분해주었다.
• childCount로 개수를 설정해주지 않으면 출력할 수 있는 최대치로 개수가 늘어나니 주의하도록 하자.

2. CupertinoSliverNavigationBar

위의 bluegrey 색으로 된 부분이 CupertinoSliverNavigationBar이다. 아래는 코드이다. 앞선 코드에 slivers 안에 넣어주어 사용하였다.

CupertinoSliverNavigationBar(
              backgroundColor: Colors.blueGrey,
              leading: Material(
                  child: IconButton(
                    color: Colors.blueGrey,
                icon: const Icon(Icons.home,                
                ),
                onPressed: () {},
              )),
              middle: const Text('CupertinoSliverNavigationBar'),
              trailing: Material(
                  child: IconButton(
                color: Colors.blueGrey,

                icon: const Icon(Icons.add),
                onPressed: () {},
              )),
              largeTitle: const Text('여기에 Title도 넣을 수 있어요! 색상이 별로라고요? 저도 알아요! 왜 글씨가 작냐고요? 부끄럽거든요. ',       
              style: TextStyle(
                fontSize: 10,
              ),),
            ),

보통의 appBar와 큰 차이를 모르겠다 ㅎ. 다만 largeTitle 부분이 고정되지 않고 스크롤되어 넘어가진다.

3. SliverAppBar

몰랐겠지만 이미 SliverAppBar 위 코드에 포함되어있다.

SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        title: Text('Demo'),
      ),
    ),

첫 gif 이미지에서 보이는 Demo 부분이다. 기본 appBar와 다른 것은 크기가 유동적이고 고정 여부를 결정할 수 있다. 배경 이미지도 넣을 수 있으니 참고하면 된다. 심심하니까 아무거나 appBar의 배경화면을 넣어보겠다.

잘 들어간다. 위 이미지는 FlexibleSpaceBar에 background 속성으로 이미지를 추가하였다(링크 주소가 너무 길어 코드는 생략). expandedHeight속성을 이용하면 딱 설정한 길이까지만 펼쳐진다.

4. SliverGrid & SliverList & SliverFixedExtentList

여기가 SliverGrid로 구현된 부분이다. 속성들을 통해서 각각 타일의 가로 세로 크기와 타일간의 간격 등을 설정할 수 있다.

그리고 여기가 SliverList로 구현된 부분이다. Grid와 다르게 한 줄에 하나씩만 타일이 들어간다.

SliverFixedExtentList는 SliverList와 크게 다르지 않는데 extent, 그러니까 타일의 규모를 itemExtent 속성으로 정의할 수 있다.

위 widget들 모두 childCount 속성으로 항목의 개수를 정해주지 않으면 계속 타일을 생성하니 주의하도록 하자.

5. SliverChildBuilderDelegate & SliverChildListDelegate

위 두 class는 위의 4번 widget들 안에 item을 넣을 때 사용하는 class이다. 즉, slivers의 정보를 전달해주는 역할이라고 생각하면 된다.

두 widget은 정보를 builder로 전달하냐, 아니면 List 형태로 전달하냐의 차이이다.

6. SliverPadding

Sliver에 padding 값을 적용하려면 SliverPadding widget을 이용하면 된다. 위 사진과 같이 sliver 전체에 padding 값을 준다.

SliverPadding(
              padding: EdgeInsets.all(100), //패딩값을 부여한 부분
              sliver: SliverGrid(
                gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
                  maxCrossAxisExtent: 200.0, //sliver당 최대 가로 크기, 크기를 넘어가면 한 열이 추가된다.
                  mainAxisSpacing: 10.0, //sliver 사이 세로 공간
                  crossAxisSpacing: 10.0, //sliver 사이 가로 공간
                  childAspectRatio: 4.0, //sliver 비율 
                ),
                delegate: 
                // SliverChildListDelegate(),
                SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Container(
                      alignment: Alignment.center,
                      color: Colors.teal[100 * (index % 9)],
                      child: Text('Grid Item $index'),
                    );
                  },
                  childCount: 20,
                ),
              ),
            ),

7. SliverToBoxAdapter

Sliver가 하나일 때 사용한다. 여러개를 사용한다면 위의 4번 위젯 친구들을 사용하면 된다.

8. SliverPersistentHeader

SliverPersistentHeader(
      pinned: true,
      floating: false,
      delegate: Delegate(Colors.blue, 'headerTitle'),
    ),