[Flutter] SilverAppBar Widget (Material UI)

페이지 전환을 위해 Scaffold의 AppBar는 많이 사용해봤을 것이다.

Flutter에서 Material widget으로 기본 제공하는 SilverAppBar는 이미지를 보여주고 스크롤으로 이미지에 대한 설명으로 하기에 좋은 widget이다.

 

다음은 예제 코드를 작성해서 SilverAppBar를 구현한 내용이다.

이와 같이 이미지를 보여주고 스크롤하여 내용이 보이게 할 수 있다.

 

예제 코드는 다음과 같다.

class SilverAppBarScreen extends StatelessWidget {
  const SilverAppBarScreen({super.key});

  @override
  Widget build(BuildContext context) {
    double height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: height,
            floating: false,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: const Text(
                "SliverAppBar",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 30,
                  fontWeight: FontWeight.w700,
                ),
              ),
              background: Image.network(
                "https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg",
                fit: BoxFit.cover,
              ),
              collapseMode: CollapseMode.parallax,
            ),
          ),
          SliverToBoxAdapter(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(
                      color: Colors.black,
                    ),
                    borderRadius: BorderRadius.circular(10)),
                child: const Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text(
                    silverAppBarDescription,
                    style: TextStyle(fontSize: 16),
                  ),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (BuildContext context, int index) {
                return ListTile(
                  title: Text('Item #$index'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

CustomScrollView에서 silvers로 크게 3등분으로 widget을 사용했다.

1. SilverAppBar로 이미지를 적용

2. SilverToBoxAdapter로 Text 추가

3. SilverList로 List를 추가

 

SilverAppBar의 내용을 살펴보면 몇 가지 생소한 parameter가 있다.

floating, pin, collapseMode인데 각각 어떤 설정을 하는지 확인해보자.

 

floatring: scroll을 올렸다가 다시 내리기 시작할 때, AppBar가 나타나게 하는 여부를 선택한다.

true 인 경우: https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_floating.mp4

false 인 경우: https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.mp4

 

pin: scroll 시 AppBar가 항상 맨 위에 고정되어 보이게 할지를 선택한다.

true 인 경우: https://flutter.github.io/assets-for-api-docs/assets/material/app_bar_pinned.mp4

false 인 경우: https://flutter.github.io/assets-for-api-docs/assets/material/app_bar.mp4

 

collapseMode는 parallax, pin, none 3가지가 enum으로 설정할 수 있다.

위의 예제 영상이 parallax 이고, pin은 이미지를 다시 스크롤 해서 올렸을 때 위에부터 없어져 스크롤 되는 듯 한 모습이고, none은 이미지가 고정된 채 아래 widget이 따라 올라오게 된다.

 

개인적으로는 parallax가 가장 이쁘게 보이는 듯 하여 다른 옵션은 사용하지 않을 것 같다.