240808~240809 TIL

① 배운 것
1. SliverSafeArea가 있어서 전체를 safeArea로 감싸지 않고 특정 sliver widget만 safeare를 적용할 수 있다.
2. sliverappbar을 쓰려면 확장했을때의 크기가 고정일때만 사용가능하다. 왜냐면 expandHeight를 적어야하기 때문이다. 유동적일때는 사용하기 어려움 intrinsic_size_builder 라이브러리가 있지만 정확하지 x
3. listview의 스크롤 비활성 시키려면 primary false를 하면된다.
4. nestedScrollView + TabbarView + 상단바에 이미지가 들어가야하기때문에 safeArea 적용 + 그런데 탭바가 최상단에 붙고 바디가 스크롤 될 때는 safeArea를 적용하지 않아야 하는 뷰 를 구현했어야했다.
이렇게저렇게 해보다가 결국 extended_nested_scroll_view를 사용해서 해결했다.
extended_nested_scroll_view는 nestedScrollView + tabbar 사용 시 여러개의 탭뷰 사이에서 스크롤이 공유되는 플러터 고유의 문제를 해결한 라이브러리이다. pinnedHeaderSliverHeightBuilder 이런 속성도 있어서 평소에는 safeArea가 false이고 SliverPersistentHeader가 최상단에 붙고 바디가 스크롤 될 때 safeArea를 true로 변경하는 이런 식이 아니라 그냥 SliverPersistentHeader가 최상단에 붙으면 pinnedHeaderSliverHeightBuilder 이 영역 아래부터 바디가 스크롤 되는 방식으로 구현 할 수 있었다. 휴😮‍💨 자세한 코드는 노션에 있음

 return Scaffold(
      backgroundColor: const Color(0xffFFF6EE),
      SafeArea(
      top:false,
      bottom:false,
        body: Stack(
          children: [
            DefaultTabController(
              length: 2,
              child: ExtendedNestedScrollView(
                headerSliverBuilder: //스크롤이 가능한 헤더 부분 
                    (BuildContext context, bool innerBoxIsScrolled) {
                  return [
                    SliverToBoxAdapter(
                      child: //항상 스크롤이 될 뷰,
                    SliverPersistentHeader( 
                      pinned: true, // 이부분이 최상단에 도달하면 더이상 헤더는 스크롤 되지 않고 바디만 스크롤 된다.
                      delegate: TabPersistentHeaderDelegate(tabController),
                    ),
                  ];
                },
                pinnedHeaderSliverHeightBuilder: () {
                  return 98; // 이만큼의 스크롤 되지 않는 최상단 공간을 차지하고 그 밑(98 밑)에서부터 바디가 스크롤 된다.
                  //나같은 경우는 safeArea 영역+탭바 영역으로 고정했다.
                },
                onlyOneScrollInBody: true,
                body: //헤더가 최상단에 도달한 이후 스크롤 될 바디 부분 
              ),
            ),
          ),
          

class TabPersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final TabController _tabController;

  TabPersistentHeaderDelegate(this._tabController);

  @override
  double get minExtent => 54; //탭바 height

  @override
  double get maxExtent => 54; //탭바 height

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return TabBarView(
      tabController: _tabController,
    );
  }

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}          

② 회고 (restropective)
한 뷰를 위하여 제대로 된 커밋만 4번 정도했고 그냥 구조를 이렇게 저렇게 변경해 본건 10번이 넘는거같다.
정말 어려운 뷰였다 하지만 포기하지않고 결국 해낸 내가 넘 대단하다 굿굿 ✌️

③ 개선을 위한 방법