aspe

(수정) Rendering and layout 이번 섹션에서 Flutter가 위젯의 계층을 화면에 그려진 실제 픽셀로 변환하기 위해 수행하는 일련의 단계들인 렌더링 파이프라인에 대해 설명합니다. Flutter의 Rendering model Flutter가 크로스 플랫폼 프레임워크라면, 싱글 플랫폼 프레임워크들과 비교적 좋은 성능을 어떻게 발휘할지 궁금할 것입니다. 전통적인 안드로이드 앱들이 어떻게 작동하는지 생각해보는 것부터 시작하는 게 좋습니다. 드로잉 할 때, 안드로이드 프레임워크의 Java 코드를 첫번째로 호출 합니다. 안드로이드 시스템 라이브러리들은 Skia로 안드로이드가 렌더하는 Canvas 객체에 스스로 드로잉 하는 컴포넌트를 제공합니다. Skia는 디바이스 위의 드로잉을 하기 위해 CPU나 ..

(Anatomy of an app가 추가되었습니다) flutter 앱은 모든 코드를 재컴파일 필요없이 변화에 대한 stateful 핫리로드를 제공하는 VM에 의해 작동합니다. 릴리즈를 할 때, Flutter 앱은 Intel x64, ARM instructions 명령어 머신코드로 바로 컴파일 되고, 타켓이 웹이라면 Javascript로 컴파일 됩니다. Flutter는 permissive BSD license와 코어 라이브러리의 기능을 보충하는 서드파티 패키지의 번영을 추구하는 생태계를 가지고 있습니다. 해당 overview는 여러개의 섹션으로 나뉩니다. Layer model: Flutter를 구성하는 조각들 Reactive 유저 인터페이스: Flutter 유저 인터페이스 개발의 중심이되는 개념 Widge..

Bloc에서 state를 정의 할 때 Equatable을 사용하게 됩니다. 왜 사용해야 할까요? 정답은 emit 함수를 사용하는 과정에 있습니다. 98 line을 보시면 기존의 state(_state)와 새로 들어온 state(argument)를 비교하여, 일치한다면 return 시킵니다. 그리고 Equtable 라이브러리에서는 다음과 같이 props를 사용하여 이전과 동일한 state인지 구분합니다. 가끔 State를 변화시킨 것 같은데, 예상되는 UI의 변경이 발생하지 않는다면, Equtable의 props를 다시 설정해주세요!

Aggressive composability Flutter의 가장 두드러지는 특징 중 하나는 aggressive composability 입니다. 위젯들은 더 기본 위젯으로 빌드 된 위젯들을 결합하면서 빌드됩니다. 예를 들면, Padding은 위젯의 특성이 아니라, 하나의 위젯입니다. 결과적으로, Flutter로 만들어진 유저 인터페이스는 매우 많은 위젯들로 구성됩니다. 위젯 빌딩을 수행하는 재귀작업은 내재된 렌더 트리에 노드를 생성하는 위젯인 RenderObjectWidgets에서 끝납니다. 렌더 트리는 layout 하는 동안 계산되고 painting, hit testing에서 사용되는 유저 인터페이스의 기하학적 정보를 저장하는 자료 구조입니다. 대부분의 Flutter 개발자들은 객체를 직접 렌더링하지..

Widgets Flutter의 위젯은 결합의 단위입니다. 위젯은 플러터 앱의 유저 인터페이스를 만드는 블럭들이고, 각 위젯은 유저 인터페이스의 부분의 불변한 선언입니다. 위젯은 결합을 기반으로 계층을 형성합니다. 각 위젯은 부모들과 중첩되고 그 부모로부터 context를 받습니다. 이런 구조는 루트 위젯까지 이어집니다.(주로 MaterialApp, CupertinoApp 같은 Flutter app을 호스트하는 컨테이너) 앱은 사용자 상호작용과 같은 이벤트에 대응하여 사용자 인터페이스를 업데이트하기 위해 프레임워크에게 위젯 계층 구조에서 하나의 위젯을 다른 위젯으로 대체하도록 지시합니다. 그 후 프레임워크는 이전의 위젯과 새로운 위젯을 비교하고, 효율적으로 유저 인터페이스를 업데이트합니다. Flutter는..

AnimationController는 불필요한 리소스를 아끼기 위해, vsync arguments와 Ticker 사용합니다. Ticker를 사용하기 위해서는 TickerProvider가 필요하고 vsync arguments로 StatefulWidget을 넘기고 싶다면 TickerProviderStateMixin and SingleTickerProviderStateMixin 을 사용하여 StatefulWidget을 구현해야 합니다. 이게 어떻게 가능한 것일까요? SingleTickerProviderStateMixin이 TickerProvider를 implement하기 때문에 가능 한 것 입니다.

Flutter가 위젯을 렌더링하는 방법을 알기 위해서는 widget, element, render object에 대해 알아야 합니다. Widget Widget: describes the configuration for an Element A widget is an immutable description of part of a user interface 위젯은 유저 인터페이스의 부분의 불변한 묘사,설명이고 element의 구성을 나타냅니다. Element Element: an instantiation of a Widget at a particualr location in the tree. Element는 트리의 특정 위치에서 위젯의 인스턴스화 입니다. mutable하며 UI를 업데이트하고 관리합니다. 위젯..