토스 내 소비 페이지 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