SliverPersistentHeaderDelegate

샤워실의 바보·2024년 2월 11일
0
post-thumbnail
post-custom-banner
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:tiktok_clone/constants/sizes.dart';

class PersistentTabBar extends SliverPersistentHeaderDelegate {
  
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.symmetric(
          horizontal: BorderSide(
            color: Colors.grey.shade200,
            width: 0.5,
          ),
        ),
      ),
      child: const TabBar(
        indicatorSize: TabBarIndicatorSize.label,
        indicatorColor: Colors.black,
        labelPadding: EdgeInsets.symmetric(vertical: Sizes.size10),
        labelColor: Colors.black,
        tabs: [
          Padding(
            padding: EdgeInsets.symmetric(horizontal: Sizes.size20),
            child: Icon(Icons.grid_4x4_rounded),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: Sizes.size20),
            child: FaIcon(FontAwesomeIcons.heart),
          ),
        ],
      ),
    );
  }

  
  double get maxExtent => 47;

  
  double get minExtent => 47;

  
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}

maxExtent와 minExtent

  1. maxExtent (최대 높이):

    • 이건 탭바가 가질 수 있는 가장 큰 높이예요. 여기서는 47픽셀로 설정되어 있어요. 픽셀은 화면을 이루는 아주 작은 점이에요. 47픽셀이면 그렇게 크지 않아요.
    • 쉽게 말하면, 이 탭바의 높이가 47픽셀보다 커지지 않는다는 거예요.
  2. minExtent (최소 높이):

    • 이건 탭바가 가질 수 있는 가장 작은 높이예요. 이것도 47픽셀로 설정되어 있어요.
    • 이것은 탭바의 높이가 47픽셀보다 작아지지 않는다는 것을 의미해요.

즉, 탭바의 높이는 항상 47픽셀로 동일하게 유지된다는 거예요. 크지도 작아지지도 않아요.

shouldRebuild

  1. shouldRebuild (다시 만들어야 할까?):
    • 이 메서드는 탭바를 새로 고칠 필요가 있는지 결정해요.
    • 여기서 return true;는 "네, 다시 만들어야 해요"라는 뜻이에요.
    • 이 말은 화면에 무언가 변화가 있을 때마다 탭바를 새로 고치겠다는 의미예요.

요약

  • maxExtentminExtent는 탭바의 높이를 언제나 47픽셀로 유지시켜줘요.
  • shouldRebuild는 탭바를 새로 고칠 필요가 있을 때마다 그렇게 하겠다는 걸 알려줘요.

이렇게 이 세 가지 메서드는 탭바가 항상 일정한 크기를 유지하며 필요할 때마다 새로 고쳐지도록 해준답니다!

profile
공부하는 개발자
post-custom-banner

0개의 댓글