내가 보려고 쓰는 Flutter 일기
출처 : https://api.flutter.dev/flutter/material/SliverAppBar-class.html

SliverAppBar

오늘 배워볼 건 SliverAppBar.
주로 CustomScrollView의 첫번째 자식 요소로 쓰이며, 스크롤 내릴 때와 올릴 때 AppBar의 높이가 변하거나, 사라지거나, 올리면 다시 나타나는 등의 효과를 줄 수 있다.

이것저것 뜯어보고 돌려보...려고 했는데 설정 가능한 속성이 이렇게나 많다.

const SliverAppBar({
  Key? key,
  this.leading,
  this.automaticallyImplyLeading = true,
  this.title,
  this.actions,
  this.flexibleSpace,
  this.bottom,
  this.elevation,
  this.shadowColor,
  this.forceElevated = false,
  this.backgroundColor,
  this.foregroundColor,
  this.brightness,
  this.iconTheme,
  this.actionsIconTheme,
  this.textTheme,
  this.primary = true,
  this.centerTitle,
  this.excludeHeaderSemantics = false,
  this.titleSpacing,
  this.collapsedHeight,
  this.expandedHeight,
  this.floating = false,
  this.pinned = false,
  this.snap = false,
  this.stretch = false,
  this.stretchTriggerOffset = 100.0,
  this.onStretchTrigger,
  this.shape,
  this.toolbarHeight = kToolbarHeight,
  this.leadingWidth,
  this.backwardsCompatibility,
  this.toolbarTextStyle,
  this.titleTextStyle,
  this.systemOverlayStyle,
})

?????????????????

앱바가 중요한건 알겠는데 이렇게까지 설정이 많을 일인가...?
이래봐야 모르겠으니 코드를 보자

코드 예시로 알아보자

우선 저번 시간에 돌려본 코드를 가져와서 돌려보겠다.
코드가 너무 길어서, SliverGrid는 빼고 돌려보자.

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test CustomScrollView'),
      ),
      body: CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: true,
            expandedHeight: 250.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('SliverAppBar'),
              background: FlutterLogo(),
            ),
          ),
          SliverFixedExtentList(
            itemExtent: 50.0,
            delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.purple[100 * (index % 10)],
                  child: Text('List Item $index',style: TextStyle(fontSize: 20),),
                );
              },
            ),
          ),
        ],
      )
    );
  }
}

저번 코드에다 추가로 leading 속성을 넣었다. 내가 좋아하는 안드로이드 아이콘으로! ListTile때 봤던 leading 속성과 같았다. title문구 앞쪽에 생긴다. 그리고 appbar 배경으로 플러터 로고를 넣고, 리스트 색깔도 다르게 바꿔보았다.

flexibleSpace

우선 앱바에 표시되는 문구를 감싼 flexibleSpace 부터 살펴보자.
사실 SliverAppBar에는 title 속성이 있어서, 여기다가 바로 문구를 지정해도 되긴 한다. 그런데 이렇게 하면 스크롤 내려도 크기가 안변한다. 그냥 Scaffold에 앱바 지정한거나 다름없는것! 공식 페이지에서도 대체로 flexibleSpace를 사용했다.

해당 속성은 expandedHeight와 같이 쓰는데, 앱바를 최대로 늘렸을 때(스크롤을 내리기 전)의 높이를 지정한다.

expandedHeight: 100,
            flexibleSpace: FlexibleSpaceBar(
              title: Text('SliverAppBar'),
              background: FlutterLogo(),
            ),

그냥 한 덩어리처럼 써주면 될 것 같다.

expandedHeight: 100	expandedHeight: 300

공식페이지에서는 pinned, floating, snap 이 세가지 속성에 초점을 맞춰 설명하고 있었다. 그럼 나도...

pinned

true, false 둘 중에 하나로 설정하면 된다.
위의 코드와 똑같이 한 채로 pinned 설정만 왔다갔다 해보자.

pinned: true	pinned: false

보이는 것처럼 pin이 되었냐 안되었냐로 구분하면 되겠다. false면 스크롤 내릴 때 앱바가 완전히 사라져버린다.

floating

처음 봤을 때 도무지 뭔지 몰랐는데, floating property 요기 설명을 보고 알았다.

floating: false	floating: true

false 일 때는 화면 맨 위로 올라가야 AppBar가 최대 크기만큼 보이는데, true 일 때는 스크롤을 올리기만 해도 AppBar가 스르륵 나온다.

앱바가 보고 싶을때 당장 봐야한다! true
맨 위로 갔을때만 보면 된다! false
로 정리할 수 있겠다.

snap

snap 은 floating 속성과 함께 써야 한다. 왜냐구? 공식페이지가 그렇대
는 실행화면을 보면 알 수 있다.

이번에도 설명을 참고한 곳은 snap property 요기

snap은 true로 지정해주고 싶으면 반드시 floating 도 true로 지정해주어야 한다. floating이 false인데 snap에 true를 지정하려 한다면? 플러터 코드가 빨간 줄 그어준다.



floating이 false면 snap은 true로 지정못하니까 floating: false 만 적어준 것과 같다. floating이 true, snap이 false인 경우는 snap을 지정하지 않은 것과 같아서, floating:true 이다.

따라서 snap, floating 둘다 true인 경우와, floating만 true인 경우를 비교해보자.

floating: true, snap: false	floating: true, snap: true

snap이 true일때는 스크롤 위로 조금만 올려도 앱바가 몽땅 다 나온다.

floating이 true일 때, 아래로 스크롤을 많이 한 상태에서 위로 조금만 가려고 해도 앱바가 스르르 나왔었다. 이것 때문에 floating을 같이 true로 설정해주어야 한다. snap은 조금만 올려도 앱바가 몽땅 튀어나오는 기능이니까!
근데 snap은 별로 안편할 거 같은데... 아무튼 이런 기능도 있네





동영상 캡처떠서 GIF로 변형하느라 일기 쓰는데 3시간 걸렸네ㅠㅠ
오늘의 일기는 여기까지!