Flutter - CupertinoSliverNavigationBar

iOS-11 스타일의 큰 타이틀을 가진 iOS 스타일의 네비게이션 바 입니다.

 

CupertinoSliverNavigationBar는 CustonScrollView와 같은 sliver group에 속해야 합니다.

 

이 네비게이션바는 두개의 섹션으로 나누어져 있습니다. 고정된 상단의 섹션과 iOS-11 스타일의 큰 타이틀이 밑에 있는 슬라이딩 섹션으로 나누어져 있습니다.

 

이 위젯은 반드시 스크린의 상단에 있어야하고, 자동적으로 iOS 상태바를 차지합니다.

 

largeTitle 위젯은 sliver가 접히면 앱 바 중간에 나타나고, sliver가 확장되면 더 큰 글씨체로 아래 영역으로 전달된다.

 

좀 더 발전된 방법으로, 선택인자인 middle 위젯을 전달해서 sliver가 접힐 때 네비게이션 바의 중앙에 다른 위젯이 보이게 할 수 있습니다.

 

스크롤링 할 때 고정된 상단 영역에 남는 leading and trailing 위젯 또한 지원합니다. (leading은 왼쪽 trailing은 오른쪽)

leading, trailing

leading 위젯은 현재 라우트를 pop하기 위해, 위젯이 아무것도 주어지지 않고, automaticallyImplyLeading 속성이 true라면(default로 true) 자동적으로 back chevron icon button이 될 것입니다.(전체화면 다이얼로그라면 close button)

 

largeTitle 위젯은 아무것도 주어지지 않고 automaticallyImplyLeading 속성이 true라면, 현재 CupertinoPageRoute 의 타이틀 텍스트가 됩니다.

 

transitionBetweenRoutes 속성이 true 일 때, 해당 네비게이션 바는 트랜지션 되는 라우트가  CupertinoNavigationBar or 을 CupertinoSliverNavigationBar 를 가지고 있고, transitionBetweenRoutes 가 true로 설정되어 있다면, 라우트들의 안에서 트렌지션하는 대신 라우트의 맨 위에서 트렌지션을 수행합니다. 만약 transitionBetweenRoutes 가 true라면, 그 위젯들은 트리의 여러 곳에 동시에 존재하기 때문에 어떠한 위젯 파라미터도 GlobalKeys 키를 그들의 서브트리에 가질 수 없습니다. 

 

기본적으로, 기본 트랜지션을 지원하기 위해 오직 하나의 CupertinoNavigationBar or CupertinoSliverNavigationBar 만 각각의 PageRoute 에 있어야 합니다. 라우트당 다수의 네비게이션바를 사용하기 위해 트랜지션 동작을 커스터마이즈 하고 싶다면 transitionBetweenRoutes or heroTag 를 사용하세요.

 

CupertinoSliverNavigationBar 는 디폴트로 텍스트의 크기를 1.0으로 맞춥니다. 그리고 native iOS behavior에 맞추기 위해 OS의 폰트 크기 변화에 반응하지 않습니다. 이 behavior를 override하기 위해, 원하는 MediaQueryData.textScaleFactor 값을 설정한 MediaQuery 안에 CupertinoSliverNavigationBar의 컴포넌트들을 감싸세요. OS의 폰트 크기 값은 많은 방법으로 가져올 수 있습니다.

 

stretch 파라미터는 네비게이션바가 over-scroll 영역을 채울지 결정합니다. stretch가 false로 되어 있어도, 유저의 스크롤에 의해 확장 될 수 있지만, stretch가 true로 되어 있다면, over-scroll 할 때 stretch 할 수 있습니다. 디폴트로 false 값이 주어집니다.

 

See also:

• CupertinoNavigationBar, an iOS navigation bar for use on non-scrolling pages.
• CustomScrollView, a ScrollView that creates custom scroll effects using slivers.

상속 구조

Object > DiagnosticableTree > Widget > StatefulWidget > CupertinoSliverNavigationBar

생성자

CupertinoSliverNavigationBar({

Key? key, 

Widget? largeTitle, # navigation bar의 타이틀

Widget? leading,  # navigation bar의 시작 부분, 보통 back button, 전체화면은 닫기 버튼

bool automaticallyImplyLeading = true, # leading widget 결정

bool automaticallyImplyTitle = true,  # largeTitme widget 결정

String? previousPageTitle, 

Widget? middle, # largeTitle을 대신해 navigation bar의 중앙에 위치할 위젯

Widget? trailing, # navigation bar의 끝 부분

Border? border = _kDefaultNavBarBorder, 

Color? backgroundColor, 

Brightness? brightness, 

EdgeInsetsDirectional? padding, 

bool transitionBetweenRoutes = true, # Whether to transition between navigation bars

Object heroTag = _defaultHeroTag, 

bool stretch = false

})