aspe

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

Choosing an approach Flutter 애니메이션을 만드는 방법에는 많은 선택지들이 있습니다. 어떤 접근이 당신에게 더 알맞을까요? 당신의 선택을 돕기 위해, 다음 영상을 시청해보세요. How to choose which Flutter Animation Widget is right for you? (Also published as a companion article.) (선택 과정에 대해 더 자세하게 알고 싶다면, Animations in Flutter done right 영상을 참고하세요.) 위의 영상에서 나온것 처럼, 다음 선택 트리가 애니메이션을 구현할 때 도움이 될 것입니다. 만약 pre-packaged implicit 애니메이션이 필요하다면, Animation basics with ..

Flutter의 애니메이션 시스템은 Animation 타입 객체를 기반으로 이루어져있습니다. 위젯들은 현재 값을 읽고 상태 변화를 기다리며 build 함수에 이러한 애니메이션을 직접 통합하거나 다른 위젯에 전달하는 보다 정교한 애니메이션의 기반으로 다른 애니메이션들을 사용할 수 있습니다. (대충 기본 애니메이션을 그냥 사용할 수도있고, 애니메이션들을 통합해서 또 다른 애니메이션을 만들 수도 있다는 맥락) Animation 애니메이션 시스템의 기본 building block은 Animation 클래스입니다. 애니메이션은 애니메이션의 라이프타임 동안에 변경되는 특정한 타입의 값을 나타냅니다. 애니메이션을 수행하는 대부분의 위젯들은 Animation 객체를 파라미터로 전달받고, 그 파라미터에서 현재 애니메이션..

Minimize expensive operations 몇몇 연산자들은 다른 연산자들보다 더 많은 리소스를 소모합니다. 앱의 UI를 어떻게 디자인하고 구현하는지가 얼마나 효율적으로 앱이 작동하는지 큰 영향을 줍니다. Control build() cost UI를 디자인 할 때 항상 생각해야할 것이 있습니다. 상위 위젯을 rebuild 할 때 해당 위젯의 build()가 자주 호출될 수 있으므로, build() 메소드에서 반복적이고 비용이 많이 드는 작업을 피하세요. 큰 build() 함수가 있는 지나치게 큰 단일 위젯을 만드는 것을 피하세요. 캡슐화뿐만 아니라 위젯들이 어떻게 변하는지에 따라 위젯을 다른 위젯들로 분할하세요. State 객체에서 setState()가 호출되면, 모든 하위 위젯들이 rebuil..

원문: https://bloclibrary.dev/#/architecture bloc 라이브러리를 사용하면 앱은 3개의 레이어로 나누어 집니다. Presentation Business Logic Data Repository Data Provider Data 레이어부터 Presentation 레이어로 훑어봅시다. Data Layer 하나 혹은 그 이상의 소스로부터 오는 데이터를 가져오고/조작하는 레이어 입니다. Data 레이어는 두개의 파트로 나누어집니다: Repository Data Provider 이 레이어는 앱의 가장 낮은 단계이고 데이터베이스, 네트워크 요청, 외에 비동기 데이터 소스들과 상호작용합니다. Data Provider Data Provider는 raw data를 제공합니다. Data pr..

원문: https://bloclibrary.dev/#/coreconcepts Bloc State Management Library Official documentation for the bloc state management library. Support for Dart, Flutter, and AngularDart. Includes examples and tutorials. bloclibrary.dev Core Conepts(pacakge:bloc) package:bloc 을 사용하기 전에 다음 섹션들을 자세하게 읽으세요! bloc package를 사용하는 데 있어서 알아야하는 중요한 코어 컨셉들이 몇가지 있습니다. 다음 섹션들에서, 그 컨셉들을 하나씩 자세하게 살펴보고 counter app에 어떻게 ..

손님은 현재 위치한 장소 주변의 가게들의 웨이팅 상태의 확인을 할 수 있고, 동시에 웨이팅 등록이 가능 가게 주인은 본인 가게에 몇 테이블이 있는지, 웨이팅 관리를 도와주는 토이 프로젝트를 계획했습니다. 이름은 남음

키워드를 입력하면, 해당 키워드와 일치하는 가게명을 가진 리스트를 생성하여 OverlayEntry로 삽입하는 SearchBar를 만들고 싶었습니다. OverlayEntry + CompositedTarget + CompositedFollower을 사용하여 구현하였습니다. 2글자 이상이 되면 OverlayEntry를 삽입하고, 일치하는 가게를 검색합니다.

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를 업데이트하고 관리합니다. 위젯..