[CupertinoNavigationBar] Flutter에서 NavigationBar 만들기

flutter에서 iOS Style의 네비게이션을 만들고 싶다면

https://flutter.dev/docs/development/ui/widgets/cupertino

https://flutter.dev/docs/development/ui/widgets/cupertino

 

이렇게 두개를 같이 쓰면 됩니다-!!

 

[1] CupertinoNavigationBar

 

우선 CupertinoNavigationBar 부터 살펴볼게요-!

말 그대로 navigationBar를 만들때 쓰는 위젯입니다. 

 

생성자는 이렇게 생겼어요

 

저는 이렇게 navigationBar를 만들어볼게요-!! 

var _navigationBar = CupertinoNavigationBar(
    leading: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    middle: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    trailing: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    backgroundColor: CupertinoColors.activeOrange
);

 

(CuperinoColors는 api.flutter.dev/flutter/cupertino/CupertinoColors-class.html 이 문서를 보시면 됩니다.)

 

 

[2] CupertinoPageScaffold

 

그 다음에 CupertinoPageScaffold 를 살펴볼게요-!

 

top에 navigation bar을 넣은 페이지를 만들고 싶으면 이 위젯을 쓰라고 적혀있습니다. 

생성자는 이렇게 생겼어요

 

 

 

위에서 만든 navigation bar를 넣어서 이렇게 만들어볼게요-! (위젯 안의 build함수를 구성해준 것-!)

  @override
  Widget build(BuildContext context) {

    var _navigationBar = CupertinoNavigationBar(
        leading: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        middle: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        trailing: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        backgroundColor: CupertinoColors.activeOrange
    );

    return CupertinoPageScaffold(
      navigationBar: _navigationBar,
      child: Center(child: Text("화면쓰")),
    );
  }

 

돌려보면 이렇게 나옵니다. 

 

leading이 위치가 안맞는데 혹시 버그일까요....?! ㅠㅠ

 

 

 

[3] Leading이 너무 높게 위치할때

 

github.com/flutter/flutter/issues/18536 여기 보고 

 

leading 코드를 이렇게 바꿔줬습니다.

var _navigationBar = CupertinoNavigationBar(
    leading: Align(
      widthFactor: 1.0,
      alignment: Alignment.center,
      child: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    ),
    middle: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    trailing: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
    backgroundColor: CupertinoColors.activeOrange
);

 

이제 잘 나오네요~

 

 

 

최종 코드!! 

 @override
  Widget build(BuildContext context) {

    var _navigationBar = CupertinoNavigationBar(
        leading: Align(
          widthFactor: 1.0,
          alignment: Alignment.center,
          child: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        ),
        middle: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        trailing: Text("안녕", style: TextStyle(color: CupertinoColors.white, fontFamily: 'GyeonggiMedium')),
        backgroundColor: CupertinoColors.activeOrange
    );

    return CupertinoPageScaffold(
      navigationBar: _navigationBar,
      child: Center(child: Text("화면쓰")),
    );
 }