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..

남음 금요일에 번화가를 가면 가게에 자리가 없어서 배회한 적이 많습니다. 그럴 때마다 이런 앱이 있으면 어떨까 생각해서 Flutter 연습겸 제작했습니다. 포잉, 캐치 테이블과 같이 비슷한 앱이 존재하지만 제가 원하는 것은 아직 없는듯 합니다. 원하는 가게에 자리가 있다면 예약 하고, 없다면 웨이팅을 겁니다. 이 앱은 고객이 이용하는 앱이고, 사장을 위한 앱도 제작해야합니다. 최대한 pub.dev의 라이브러리를 사용하지 않으려고 노력했습니다. Github Preview 주변 가게 검색 )) 예약 예약 취소 )) 커스텀 로컬 알람 |

현재 내 주변에 어떤 가게들이 있는지 확인하기 위해 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..

MaterialPageRoute 1. IOS, Android 각각의 플랫폼에 맞게 transition을 진행합니다. PageRouteBuilder 1. transitionBuilder를 사용해 transition을 정의 할 수 있습니다. Staggered animation 모든 animations들은 같은 하나의 AnimationController로 관리된다. 실제로 얼마나 애니매이션이 지속되는지와 상관없이, Controller의 값은 반드시 0.0과 1.0 사이어야한다. 각각의 animation은 0.0 ~ 1.0 사이의 Interval class를 가진다. Interval 안에서 animate 되는 각각의 프로퍼티는 Tween을 생성한다. Tween은 해당 프로퍼티의 시작과 끝 값을 정한다. Twee..

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..