평생 공부만 해야할듯

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

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

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

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

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

하나의 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코드로 작성해보았습니다.

Android와 iOS를 한번에 개발할 수 있는 플랫폼은 기존에도 있었습니다.

하지만 웹뷰 방식으로 제작되었다 보니 반응이 느리거나 디자인도 다르게 개발되기도 했습니다.

장점도 많고 단점도 있지만 네이티브와 비슷한 성능을 내는 Flutter 프로젝트를 진행해 보려고 합니다.

https://flutter-ko.dev/

Flutter 설치 페이지로 이동합니다.

https://flutter-ko.dev/docs/get-started/install

링크를 클릭해서 들어가면 아래와 같은 OS별 설치 버튼이 보여집니다.

저는 OS X 를 사용하고 있으니 "맥OS" 를 클릭해서 설치 페이지로 이동하겠습니다.

설치 페이지로 진입했다면 Flutter SDK 다운 순서대로 진행합니다.

압축까지 풀어주었다면 환경변수에 등록을 해주어야 합니다.

저는 /Users/gigas/Documents/flutter 위치에 설치하였습니다.

flutter 경로로 진입해 아래의 명령어로 PATH를 등록하였습니다.

export PATH="$PATH:`pwd`/bin"

터미널에서 flutter doctor 명령어를 입력하면 아래와 같은 문구들이 보여집니다.

Flutter 라는 항목이 체크되어있다면 정상적으로 설치가 된겁니다.

간단하게 설치까지 완료해봤습니다.

설치 진행에 어려움이 있다면 댓글로 문의 해주시면 도움을 드리겠습니다.