[Flutter] SliverList

SliverList를 사용하는 이유는 스크롤을 했을때 다른 위젯을 자연스럽게 disable하는 역할이다.

메인 이미지가 있었고, 스크롤을 하면 자연스럽게 메인이미지가 사용자에게 보이지 않도록 하고 싶었다.

 

Sliver에 더 깊게 알 필요 없다. 단 두 가지만 알면 아마 원하는 동작을 만들 수 있을 것이다.

사용법은 간단하다.(문서가 읽기 힘든 사람이면 지금 이 포스트를 잘 찾은것)

 

 

SliverList를 사용하기 위해서 먼저 'CustomScrollView'를 부모뷰로 사용한다.

 

그리고 slivers 파라메터에 가리고 싶은 위젯을 SliverAppBar로 사용하고, 그 하위 스크롤 하고 싶은 위젯들을 SliverList에 선언한다.

CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 250.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('title', style: TextStyle(color: Colors.black),),
                centerTitle: true,
                background: Container(
                  color: Colors.orangeAccent,
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => Column(
                  children: [
                    Container(
                      height: 150,
                      color: Colors.green,
                    ),
                    Container(
                      height: 150,
                      color: Colors.red,
                    ),
                    Container(
                      height: 150,
                      color: Colors.blue,
                    ),
                    Container(
                      height: 150,
                      color: Colors.yellow,
                    ),
                    Container(
                      height: 150,
                      color: Colors.purple,
                    ),
                  ],
                ),
                childCount: 1
              ),
            )
          ],
        ),

not scroll	scrolled

 

 

SliverAppBar가 자연스럽게 사라진다

 

 

CustomScrollView(
  controller: scrollController,
  physics: const BouncingScrollPhysics(),
  slivers: [
    const SliverAppBar(
      expandedHeight: 250.0,
      flexibleSpace: FlexibleSpaceBar(
        background: HomeGallerySection(),
      ),
    ),

    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => const HomeBoardSection(),
        childCount: 1
      ),
    ),
  ],
),

 

 

Sliver에서 SizedBox를 사용하고 싶은 경우

SliverToBoxAdpater를 사용해서 감싼다.

SliverToBoxAdapter(child: SizedBox(height: 50,),),

 

 

return CustomScrollView(
  slivers: [
    SliverAppBar(
      title: Text('Weather App'),
    ),
    SliverToBoxAdapter(
      child: WeatherStateComponent(weatherData: weatherData,),
    ),
    SliverFillRemaining(
      child: WeatherMemoComponent(),
    ),
  ],
);

 

 

Scaffold내에 AppBar, TabBar, TableView가 있는 경우

@override
Widget build(BuildContext context) {
return Scaffold(
  body: SafeArea(
    child: NestedScrollView(
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return [
          SliverAppBar(
            title: Text("Sliver Widget"),
            centerTitle: true,
            pinned: false, // Keep the app bar fixed during scroll
            bottom: TabBar(
              tabs: tabs,
              isScrollable: true,
              tabAlignment: TabAlignment.center,
            ),
          ),
        ];
      },
      body: TabBarView(
        physics: NeverScrollableScrollPhysics(),
        children: [
          WifiPage(),
          IdPwPage(),
          ToiletPage(),
          MemoPage(),
          SettingPage(),
        ],
      ),
    ),
  ),
);
}

 

 

 

• CustomScrollView: CustomScrollView는 여러 슬리버(스크롤 가능한 위젯들)를 자식으로 가질 수 있는 위젯입니다.
• SliverAppBar: 이 위젯은 스크롤 시 축소 및 확장이 가능한 앱 바를 제공합니다. expandedHeight 속성으로 확장된 높이를 설정하고, pinned 속성을 true로 설정하여 스크롤 시 상단에 고정되도록 합니다.
• FlexibleSpaceBar: SliverAppBar의 flexibleSpace로 설정되어 확장 및 축소 시 변화를 주는 공간을 제공합니다. 여기서는 타이틀과 배경 이미지를 설정하였습니다.
• SliverList: 스크롤 가능한 리스트를 생성합니다. SliverChildBuilderDelegate를 사용하여 리스트 항목들을 동적으로 생성합니다.