[Flutter] LargeTitle NavigationBar

 

iOS 에서 NavigationViewController 를 사용하면 다양한 옵션들이 있습니다.

 

기본 옵션이지만 상당히 부드럽고 깔끔하죠.

 

Flutter로 개발을 하는 이유는 Android에도 iOS처럼 부드러운 애니메이션 작업이 가능하다는 겁니다.

 

iOS스러운 앱을 만들기 위해 작은 예제를 정리하도록 하겠습니다.

 

 

 

 

 

첫번째로는 iOS 에서 지원하는 LargeTitle NavigationBar 기능을 Flutter로 구현해 보겠습니다.

Navigation Bar Title

 

Scroll시 Large Title에 NavigationBar 에 올려진다

 

 

하나의 StatelessWidget 클래스를 상속하는 Page 클래스를 만들어 줍니다.

 

Scaffold를 리턴해줘야 흰색 배경이 나옵니다.

class ExmaplePage extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
  		return Scaffold();
  	}
}

 

 

 

 

Scaffold의 속성중 body에 NestedScrollView를 넣어줍니다.

 

NestedScrollView 속성에는 headerSliverBuilder가 있는데 이부분에서 CupertinoSliverNavigationBar 위젯을 사용하면 됩니다.

 

NestedScrollView를 감싼다음 body에는 기존에 사용하던 코드를 넣어주면 iOS처럼 멋진 디자인이 보여집니다.

class ExamplePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return [
            CupertinoSliverNavigationBar(
              largeTitle: Text('Example'),
            ),
          ];
        },
        body: Center(
          child: Text("ExamplePage"),
        ),
      ),
    );
  }
}

 

 

 

 

NestedScrollView 또한 physics 속성이 있으니 BouncingScrollPhysics()코드를 넣어 효과를 넣을수도 있습니다.

 

이렇게 기존 iOS 네이티브 디자인을 Flutter코드로 작성해보았습니다.