[플러터(Flutter)] - SliverAppBar, SliverList, SliverToBoxAdapter

흔히 넷플릭스처럼, 맨 위 상단에는 영상에 대한 이미지가 나와있고, 스크롤을 내리면 해당 이미지는 사라지게 된다.

이것을 구현하기 위해 플러터에서 SliverAppBar를 사용해보기로 했다.

 

가장 먼저 살펴 볼 공식문서

https://api.flutter.dev/flutter/material/SliverAppBar-class.html

SliverAppBar class - material library - Dart API

공식문서에서 느 다양한 SliverAppBar의 속성들과 간단한 예시를 통해 이해를 돕고 있다 

예제에서는 StatelseeWidget 이 아닌 StatefullWidget을 만들어 붙여 사용하고 있는데, 

사용해보니 꼭 따로 만들 필요는 없고, 바로 StatelessWidget에서 만들어도 잘 작동했다.

 

여기서 눈에 띄는 것은 SliverAppBar를 만들 때는 CustomScrollView 안에다 만들어 주는 것을 볼 수 있다. 

CustomScrollView 안에 Sliver 가 있고 그 안에 SliverAppBar, SliverList, SliverGrid 가 존재한다.

 

다음은 간단한 SliverAppBar 예시이다

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: false, // appbar 완전히 사라지게
          expandedHeight: 250.0, // appbar 크기
          flexibleSpace: FlexibleSpaceBar(
            title: Text(
              '타이틀',
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
            centerTitle: true,
            background: FlutterLogo(),
          ),
        ),
      ],
    ));
  }
}

SliverAppBar

다음은 SliverList를 추가한 예시이다

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: false, // appbar 완전히 사라지게
          expandedHeight: 250.0, // appbar 크기
          flexibleSpace: FlexibleSpaceBar(
            title: Text(
              '타이틀',
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
            centerTitle: true,
            background: FlutterLogo(),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                    title: Text('Item #$index'),
                  ),
              childCount: 100),
        ),
      ],
    ));
  }
}

SliverAppBar & SliverList

여기서 내가 더 원하는 건, 리스트를 두 개를 만들어서 하나는 좌우로, 하나는 상하로 움직이게 만들고 싶었다.

단순히 SliverList를 두개를 만들어서 사용하는 것으로는 한계가 있었고, 다음과 같은 방법을 찾았다

바로 SliverToBoxAdapter를 사용하는 것이다.

 

SliverToBoxAdapter 사용

import 'package:app/src/view/pages/first_page.dart';
import 'package:app/src/view/pages/second_page.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class Home extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          pinned: false, // appbar 완전히 사라지게
          expandedHeight: 250.0, // appbar 크기
          flexibleSpace: FlexibleSpaceBar(
            title: Text(
              '타이틀',
              style: TextStyle(color: Colors.black, fontSize: 20),
            ),
            centerTitle: true,
            background: FlutterLogo(),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            height: 100.0,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 10,
                itemBuilder: (context, index) {
                  return Container(
                    width: 100.0,
                    child: Card(
                      child: Text('data'),
                    ),
                  );
                }),
          ),
        ),
        SliverList(
          delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                    title: Text('Item #$index'),
                  ),
              childCount: 100),
        ),
      ],
    ));
  }
}

SliverToBoxAdapter

 

임시로 card를 넣어서 동작시켰지만, 다른 것으로 응용도 가능하다

마찬가지로 만약 SliverAppBar와 SliverList 사이에 Text를 넣고 싶을 때도 SliverToBoxAdapter 를이용하여 넣을 수도 있다.

 

참고 :

https://stackoverflow.com/questions/52738034/flutter-sliver-layout-horizontal-scroll-inside-sliver-list

Flutter - Sliver Layout horizontal scroll inside Sliver List