Flutter 1일 차 - Flutter for iOS devs (1/8), Views

Dart Language Tour 를 마치고 이제 본격적으로 flutter 를 알아보려고 한다.

iOS 개발자이니 빠르게 적응하기 위해 Flutter for iOS devs 문서 위주로 보려고 한다.

문서 위주로 직역, 의역, 상상(?) 등을 공부하면서 머리에 넣기 위해 기록을 할 예정이다.

 

주의) 작성자 외에는 제대로 보기 힘들 수 있음.

 

https://flutter.dev/docs/get-started/flutter-for/ios-devs

Flutter for iOS developers

 

이 문서는 flutter 모바일앱 빌드를 하려고 하는 iOS 지식이 있는 개발자들을 위한 것이다.

만약 iOS framework 의 기본을 이해하고 있다면 flutter 개발을 시작하는 방법으로 이 문서를 이용할 수 있다.

 

당신의 iOS 지식과 기술셋은 flutter 앱을 개발하는데 매우 가치가 있다. 왜냐하면 flutter 는 많은 설정을 모바일 운영체제에 의존하고 있기 때문이다.

flutter 는 모바일 UI 빌드를 위한 새로운 방법이다.

그러나 non-UI 작업을 위한 iOS/Android 통신을 위한 플러그인 시스템이 있다.

만약 iOS 개발 전문가라면 Flutter 를 위해 모든 것을 다시 배울 필요가 없다.

 

flutter 는 iOS 에서 실행할 때 이미 많은 부분에서 플랫폼에 맞도록 만들어져 있다.

 

이문서는 필요에 의해서 찾아볼 수 있는 cookbook 으로 사용된다.

Views

Flutter 에서 UIView 에 해당하는 것은 무엇인가?

iOS 에서는 UI를 만들 때 UIView 의 인스턴스인 view objects 를 사용하면서 완성된다.

이 것은 layout 을 구성하는 다른 UIView 클래스들의 컨테이너이기도 한다.

 

Flutter 에서는 UIView 는 Widget 과 유사하다.

Widget 은 iOS view 와 정확히 같지 않다. 그러나 Flutter 에 익숙해지다 보면 "UI 구성과 선언 방식"이라고 생각할 수 있다.

 

UIView 와 차이점 조금 있다.

widget 은 다른 lifecycle(lifespan) 을 가진다. widget 은 immutable 이고 변경이 필요할 때까지 존재한다.

widget 이나 widget 의 상태가 변경될 때면 flutter 의 framework 는 widget 인스턴스의 새로운 트리를 만든다.

대조적으로 iOS 는 변경될 때 재생성되지 않는다. 그렇지만 ios view 는 setNeedsDisplay() 으로 inavlidated 되기 전까지는 한번 그리고 다시 그리지 않는 mutable entity 이다.

 

UIView 와 다르게 Flutter 의 widget 은 불변성(immutability) 때문에 가볍다. 

widget 은 view 자체가 아니고 직접 그리지 않기 때문이다. Widget 은 UI 와 실제 view object 에 "inflated" 를 얻기 위한 의미(semantics) 에 대한 설명(description) 이다.

 

Flutter 는 Material 컴포넌츠 라이브러리를 포함한다. 이것은 Material Design guidelines 를 구현한 Widget 들이다.

Material Design 은 iOS 를 포함한 모든 플랫폼에 최적화되어 있는 유연한 디자인 시스템이다.

 

그러나 Flutter 는 모든 언어로 구현될 수 있을 만큼 유연하고 표현력이 좋다.

iOS 에서는 Apple's iOS design language 처럼 보이는 UI를 만들기 위해 Cupertino Wdigets 를 사용할 수 있다.

How do I update widgets?

https://flutter.dev/docs/get-started/flutter-for/ios-devs#how-do-i-update-widgets

 

iOS 에서 뷰들을 업데이트하려면 직접 변경해라.

flutter 에서 widget 은 불변(immutable)이고 바로 업데이트되지 않는다.  대신 widget 의 state 를 조작해야 한다.

 

Stateful vs Stateless Widgets 개념이 어디서 온 것이지 보자.

StatelessWidget 은 state 가 없는 widget 처럼 들린다.

StatelessWidget 은 초기 설정 정보 외 다른 것은 의존하지 않는 UI 를 만들 때 유용하다.

예를 들어 iOS 에서 비슷한 것은 UIImage 에 logo image 를 설정한 것과 비슷하다. 실행 중에 logo가 변경되지 않으면 flutter 에서는 StatelessWidget 을 사용해라.

 

HTTP 통신 이후 받은 데이터 기반으로 UI 가 동적으로 변경되어야 한다면 StatefulWidget 을 사용해라.

HTTP 통신 이 완료된 후 flutter framework 에 widget 의 state 가 변경되었다고 알리면 UI 업데이트를 할 수 있다.

 

stateless, stateful widget 차이의 중요한 점은 StatefulWidget 은 state data 를 저장하고 트리 재생성(rebuild) 전체에 걸져 전달 가능한 State 객체를 가지고 있다는 것이다.

 

만약 의혹이 있다면 이것을 기억하라. 만약 widget 이 build 메서드 밖에서 변경되는 경우(예를 들면 실행 중 유저 동작으로 발생) stateful 이다. 만약 widget 이 한번 생성된 후 절대 변하지 않는다면 stateless 이다.

그러나 widget 이 stateful 일지라도 포함하고 있는 부모 widget 은 변경에 반응하지 않는다면 여전히 stateless 일 수 있다.

 

StatelessWidget 을 어떻게 사용하는지 예제를 보여준다. 흔한 StatelessWidget 은 Text widget 이다. 만약 Text Widget 의 구현을 본다면 StatelessWidget 의 하위 클래스인 것을 찾을 수 있을 것이다.

Text(
  'I like Flutter!',
  style: TextStyle(fontWeight: FontWeight.bold),
);

만약 위 코드를 본다면 Text widget 에 명시적인 상태가 없다는 것을 알 수 있다. Text widget 은 생성할 때 넘긴 것을 랜더링 하고 더 이상 랜더링 하는 것이 없다.

 

만약 예처럼 FloatingActionButton 을 클릭할 때동적으로 text 를 변경하기 원한다면 어떻게 해야 할까?

StatefulWidget 으로 Text widget 을 감싸고 유저가 버튼을 클릭하면 업데이트하면 된다.