Coaspe

(수정) 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..

현재 내 주변에 어떤 가게들이 있는지 확인하기 위해 Google map을 사용합니다. Google map위에 있는 Marker를 클릭하거나, sheet을 드래그하면 화면의 하단에서 sheet이 올라오게 구현 할 예정입니다. (Marker를 클릭하는 것은 간단하니 우선 드래그를 구현해봅니다) 우선 Google map이 있는 tab을 Stack으로 감싸줍니다. 그래야 Positioned를 사용해 bottom에 sheet를 위치 시킬 수 있습니다. 24 line이 우리가 구현 할 위젯입니다. MapBottomSheet은 StatefulWidget으로 설정합니다. BottomSheet을 AnimatedContainer로 구현 할 것이기 때문에 state가 필요합니다. 기본 동작은 다음과 같습니다. Bottom ..

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

Flutter에 대해 깊게 가장 정확한 정보를 얻고 싶다면, 사실 구글 만큼 중요한 게, 오른쪽 커서 => "Go to Definition" 라고 생각합니다. 구조 파악이 쉽고, 주석으로 유용한 정보가 많이 있습니다. 해석본 더보기 State 객체는 다음과 같은 생명주기를 가집니다: * Framework는 [StatefulWidget.createState]를 호출하며 [State] 객체를 생성합니다. * 새로 생성된 [State] 객체는 BuildContext와 연관이 있습니다. 이 연관성은 영구적입니다: [State] 객체는 절대 그 객체의 [BuildContext]를 바꾸지 않습니다. 그러나, [BuildContext]가 그것의 서브트리와 함께 트리를 움직일 수 있습니다. 그 시점에서, [State]..

https://stackoverflow.com/questions/21744677/how-does-the-const-constructor-actually-work#:~:text=In%20order%20to%20use%20a,a%20compile-time%20constant%20value. How does the const constructor actually work? I've noticed it's possible to create a const constructor in Dart. In the documentation, it says that const word is used to denote something a compile time constant. I was wondering what happe..

Flutter의 widgets은 React로 부터 영감을 받은 Modern framework로 부터 빌드 됩니다. 그것의 주된 아이디어는 UI를 widget 밖에서 빌드한다는 것 입니다. Widgets은 현재 주어진 설정과 state에 따라 view가 어떻게 보여져야하는 지를 나타냅니다. widget의 state가 변할 때 widget은 이것의 description을 rebuilds합니다. 그리고 그 변화는 기본 렌더 트리에서 한 상태에서 다른 상태로 전환하기 위해 필요한 최소한의 변경 사항을 결정하기 위한 framework diffs 입니다. Hello world 기본적인 Flutter app은 runApp() 함수를 widget과 함께 호출합니다. import 'package:flutter/mater..

Adaptation philosophy Platform adaptiveness는 일반적으로 2가지 케이스가 있습니다. OS 환경의 동작(텍스트 편집 및 스크롤 등)이며, 다른 동작이 발생하면 '잘못'이 됩니다. OEM의 SDK를 사용하는 앱에서 일반적으로 구현되는 것(iOS의 병렬 탭 사용또는 Android에서 android.app.AlertDialog를 표시하는 것) 이 페이지는 안드로이드와 iOS에서 Flutter가 case 1에서 제공하는 automatic adaptations(자동 적응)에 대해 주로 다롭니다. 케이스 2에서, Flutter는 플랫폼 convention(규약)의 적절한 효과를 내기 위한 수단을 묶지만 앱 디자인 선택이 필요할 때 자동으로 적응하지 않습니다. For a discuss..

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

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