Flutter CustomScrollView FlexibleSpace 사용하기 : Toss클론코딩

토스 내 소비 페이지 AppBar를 동작을 따라해본 예제입니다.

SliverAppBar의 property인 flexibleSpace 라는 요소로 구현할 수 있습니다.

flexibleSpace는 expaded되었을 경우, 설정된 expadedHeight만큼 늘어났다가,
collapsed되었을 때, title을 간소화하여 표시합니다. (collapsedHeight도 있음)

CustomScrollView(
    slivers: <Widget>[
    SliverAppBar(
        pinned: true,
        expandedHeight: 100,
        backgroundColor: colorBackGround,
        flexibleSpace: Container(
        child: FlexibleSpaceBar(
            title: Text(
            '0월 내 소비',
            style: textThemePrimary.bodyText1,
            ),
            titlePadding: EdgeInsetsDirectional.only(
            start: 32,
            bottom: 16,
            ),
        )),
. . .

titlePadding은 title에 적용된 기본 padding 값으로, 0이 아닌 임의의 값이 정의되어 있습니다. titlePadding에 EdgeInsets.zero를 적용해 간격을 없앨 수도 있습니다.

child: FlexibleSpaceBar(
    title: Text(
    '0월 내 소비',
    style: textThemePrimary.bodyText1,
    ),
    titlePadding: EdgeInsetsDirectional.zero(
    start: 32,
    bottom: 16,
    ),
)),

마지막으로 이전에 업로드한 AppBar에 Opacity적용하기를 이용해,
border와 background에 Opcity를 적용시키면 완성입니다.

전체 소스는 git페이지에서 조회할 수 있습니다.

Page 소스코드: Git: ISHNN032/toss_clone/ . . . /consumepage.dart
전체 소스코드: Git: ISHNN032/toss_clone