[flutter]자취의 정석 -5 NestedScrollView를 이용한 스크롤 화면

게시글 상세페이지에 들어가면

 

작성자와 게시글을 볼수있고 밑에 댓글리스트들이 나오는 구성을 만들어야했다

 

게시글 영역까지는 평범하게 구성해주고 댓글들을 Listview로 나타냈는데

 

문제는 Listview로 구성된 댓글 리스트들만 스크롤이 되어 이상한 화면이 되어버린다.

 

나는 댓글들을 List로 뿌려주고 body 영역 전체를 스크롤 하여 댓글까지 보게 하고 싶었다.

 

간단하게 위젯을 반복 생성하여 만들순 있겠지만 50개가 넘어가면 오버플로우가 일어날 가능성이있어 다른 방법을 찾아야했고

 

NestedScrollView를 사용하여 화면을 완성했다

 

NestedScrollView는 스크롤이 따로되는 위젯들을 묶어서 제어하고싶을때 사용한다.

 

다른예시들을 보니 나처럼 TabBarview를 사용할때 자주사용되는것 같다.

 

내가 사용한 NestedScrollView의 위젯은 두가지다

하나는 SliverToBoxAdapter,

나머지는 SliverPersistentHeader.

 

앞으로도 이 두가지를 가장 많이 사용할것같다.

 

구성형태는 간단하다.

 

return NestedScrollView(
  headerSliverBuilder: (context, innerBoxIsScrolled) => [
    SliverToBoxAdapter(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text("제목"),
          Divider(),
          _HeaderRow(), // 작성자, 날짜
          Divider(),
          _PostBody(),  // 본문
          Divider(thickness: 10),
        ],
      ),
    ),
    SliverPersistentHeader(
      pinned: true,
      delegate: _TabBarDelegate(
        TabBar(
          tabs: [Tab(text: '최신순'), Tab(text: '추천순')],
        ),
      ),
    ),
  ],
  body: TabBarView(
    children: [
      CommentCard(itemCount: 20),
      CommentCard(itemCount: 20),
    ],
  ),
);

이렇게하는게 최선인것같아

NestedSliverBuider로 구성하여 그 안에 위젯들을 사용하여 넣는다

 

SliverToBoxAdapter는 해더 아래의 정보들을 표시하며 나는 공통 앱바가 있기에 사용하지 않았다.

여기에는 보통의 위젯들이 들어간다

 

중요한건 SliverPersistentHeader다.

 

pinned속성으로 스크롤할때 고정하여 보여줄수 있으며 별도의 어댑터인 Delegate가 사용된다

 

Delegate가 없으면 오류가 나는것 같다.

 

//SliverPersistentHeader 델리게이트 ---
//SliverPersistentHeader는 스크롤했을때 TabBar부분이 고정되게 해주는 어댑터
//SliverPersistentHeader를 쓰기위해 delegate로 정의하는 부분
class _TabBarDelegate extends SliverPersistentHeaderDelegate {
  _TabBarDelegate(this.tabBar);
  final TabBar tabBar;

  //header의 최소높이와 최대높이를 지정하는 부분
  @override
  double get minExtent => tabBar.preferredSize.height; //48px
  @override
  double get maxExtent => tabBar.preferredSize.height;

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    return Container(color: Colors.white, child: tabBar);
  }

  //델리게이트 리빌드 여부 결정, 탭바는 겨의 안바뀌니까 false
  @override
  bool shouldRebuild(covariant _TabBarDelegate old) => false;
}

스크롤 전 화면

스크롤 후 화면, PersistentHeader가 고정되어 보여진다