SliverAppBar class
CustomScrollView 와 통합된 Material Design 앱 바입니다.
앱 바는 툴바와 TabBar, FlexibleSpaceBar 등의 다른 위젯으로 구성됩니다. 앱 바는 일반적으로 하나 이상의 일반적인 동작을 IconButton 으로 표시하며, 덜 일반적인 작업을 위해 PopupMenuButton 이 뒤에 올 수도 있습니다.
실버 앱 바는 일반적으로 CustomScrollView 의 첫 번째 자식으로 사용되며 , 이를 통해 앱 바가 스크롤 뷰와 통합되어 스크롤 오프셋에 따라 높이가 변경되거나 스크롤 뷰의 다른 콘텐츠 위에 떠 있을 수 있습니다. 화면 상단의 고정 높이 앱 바는 Scaffold.appBar 슬롯 에서 사용되는 AppBar 를 참조하세요.
AppBar는 툴바 위젯 (leading, title, actions) 을 bottom (있는 경우) 위에 표시합니다. flexibleSpace 위젯이 지정된 경우 툴바와 하단 위젯 뒤에 배치됩니다.
공식 문서 코드
SliverAppBar 는 우리가 CustomScrollView 안에서 AppBar 를 배치하고 싶을 때 AppBar 대신 사용하는 위젯이다.
예제가 상당히 복잡한 것과 반대로 사용은 꽤 쉬운 편이다.
CustomScrollView(
slivers: [
SliverAppBar(
title: Text('Hi'),
)
],
),
사용하는 위치는 이렇게 된다. CustomScrollView - silvers <Widget> - SilverAppBar
이제 이렇게 그냥 사용하면 되고 이 앱바가 플로팅 할지, 핀 되어 있을지, 스냅 될지 예제로 만들어 놓은 것이다.
한번 가볍게 알아보자.
하위 속성
| 속성명 | 타입 | 기본값 | 설명 |
| leading | Widget? | - | 앱바 왼쪽에 표시할 위젯 |
| automaticallyImplyLeading | bool | true | leading이 null일 경우 자동으로 설정할지 여부 |
| title | Widget? | - | 앱바 중앙에 표시할 제목 위젯 |
| actions | List<Widget>? | - | 앱바 오른쪽에 배치할 액션 위젯 리스트 |
| flexibleSpace | Widget? | - | 확장 영역에 표시할 위젯 |
| bottom | PreferredSizeWidget? | – | 앱바 하단에 고정될 위젯 (예: 탭바) |
| elevation | double? | - | 앱바의 그림자 깊이 |
| backgroundColor | Color? | - | 앱바의 배경색 |
| floating | bool | false | 스크롤 중간에도 앱바가 떠서 표시될지 여부 |
| pinned | bool | false | 스크롤 시 앱바를 상단에 고정할지 여부 |
| snap | bool | false | floating이 true일 때 앱바를 스냅할지 여부 |
| expandedHeight | double? | - | 앱바 확장 시 최대 높이 |
| collapsedHeight | double? | - | 앱바 축소 시 최소 높이 |
| stretch | bool | false | 오버스크롤 시 앱바가 늘어날 수 있도록 설정 |
| toolbarHeight | double | kToolbarHeight | 툴바 영역의 기본 높이 |
| stretchTriggerOffset | double | 100.0 | stretch 이벤트가 발생하는 오버스크롤 거리 |
| centerTitle | bool? | - | 제목을 가운데 정렬할지 여부 |
| clipBehavior | Clip? | - | 앱바의 클리핑 동작 방식 |
| systemOverlayStyle | SystemUiOverlayStyle? | - | 상태바 아이콘 색상 스타일 |
보면 알겠지만 그냥 AppBar 다. 근데 이제 CustomScrollView 에 들어갈 수 있다는 점만 추가된 그런 느낌이다.
공식 예제에 나온 floating, pinned, snap 의 값에 따른 동작들을 봐보자.
floating: false, pinned: false, snap: false:
floating: true, pinned: false, snap: false:
floating: ture, pinned: false, snap: true:
floating: ture, pinned: true, snap: false:
floating: true, pinned: true, snap: true:
floating: false, pinned: true, snap: false:
이렇게 SliverAppBar 에서 알아보았다. 솔직히 뭐 이번거는 AppBar 그 자체이기 때문에 별로 설명할게 없는것 같긴하지만 암튼 도움이 되었길 바라며 마치겠다.
