Flutter 앱을 개발하다 보면 화면을 스크롤할 때 AppBar를 숨겨야 하는 경우가 있습니다. 이를 위해서는 SliverAppBar를 사용하여 스크롤에 따라 AppBar를 숨기거나 표시할 수 있습니다.

다음은 Scaffold에서 AppBar를 스크롤시 숨기고 다시 표시하는 방법입니다.

1. SliverAppBar 사용

SliverAppBar를 사용하여 AppBar를 구성합니다. SliverAppBar는 스크롤 가능한 영역에서 AppBar를 표시하는 데 사용됩니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('App Bar Title'),
      floating: true,
      snap: true,
    ),
    // 다른 sliver 위젯들을 추가합니다.
  ]
)

• floating: true : 스크롤 업 또는 다운 시에 스크롤 영역과 함께 AppBar가 표시됩니다.
• snap: true : 사용자가 스크롤을 멈추면 AppBar가 자리로 돌아갑니다.

2. SliverList와 SliverGrid의 사용

SliverAppBar와 함께 SliverList나 SliverGrid를 사용하여 스크롤 가능한 목록 또는 그리드를 구성할 수 있습니다. 이를 사용하면 스크롤시 AppBar를 표시 또는 숨길 수 있습니다.

CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('App Bar Title'),
      floating: true,
      snap: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
        childCount: 20,
      ),
    ),
  ],
)

위와 같이 코드를 작성하면 스크롤 가능한 리스트와 함께 AppBar를 숨기고 다시 표시할 수 있습니다.

Flutter에서 Scaffold와 AppBar를 사용하는 방법에 대해 자세히 알아보려면 Flutter 공식 문서를 참조하세요.