Coaspe

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

Element는 트리의 특정 위치에 있는 인스턴스화된 Widget 입니다. 위젯은 서브트리를 어떻게 구성할지를 묘사하지만, 위젯은 불변하기 때문에 다수의 서브트리를 동시에 구성하기 위해서 동일한 위젯들이 사용 될 수 있습니다. Element는 위젯을 사용하여 트리에서 특정 위치를 구성하는 것을 나타냅니다. 예를 들어 상위 위젯이 재구성되고 이 위치에 대한 새 위젯을 만드는 경우 지정된 element와 연관된 위젯이 시간이 지남에 따라 변경될 수 있습니다. Elements는 트리를 형성합니다. 대부분의 elements들은 고유한 자식이 있지만, 몇몇 위젯들은 다수의 자식을 가집니다.(e.g. RenderObjectElement의 서브클래스들) Element는 다음과 같은 생명주기를 가집니다. 프레임워크가 ..

Element의 구성, 배열을 설명해준다. 위젯은 Flutter 프레임워크의 중심이되는 클래스 계층입니다. 위젯은 유저 인터페이스의 불변한 설명,묘사를 나타냅니다. 위젯은 내제된 렌더 트리를 관리하는 element로 inflated(위젯이 element를 생성하는 메소드를 가짐) 될 수 있습니다. 위젯은 스스로 변하는 상태를 가질 수 없습니다(다른 모든 필드들은 final 입니다). 만약 위젯이 변하는 상태를 가지게 하고 싶다면, element로 inflated 되고 트리로 합쳐질 때마다 State 객체를 생성(StatefulWidget.createState를 통해)하는 StatefulWidget 을 사용하세요. 주어진 위젯은 트리에 여러번 포함되거나, 한 번도 포함되지 않을 수 있습니다. 특히 주어진 ..

Elevation 그림자와 조금 둥근 모서리를 가진 material 디자인의 판넬 입니다. Card는 앨범, 위치, 연락처 같이 연관된 정보들을 가진 Material의 시트(sheet)입니다. 다음과 같은 형태를 가집니다. 이 코드는 2개의 액션과 앨범 정보를 가지는 Card 위젯의 생성을 보여줍니다. 가끔 카드의 주요한 영역은 카드 자체가 됩니다. 카드는 터치할 때 세부 화면을 보여주는 하나의 큰 터치 타겟이 될 수 있습니다. 이 코드는 탭 할수 있는 Card 위젯을 가집니다. Card의 InkWell이 탭되면, 카드 전체를 채우는 ink 스플래쉬가 나타납니다. Material Design 3는 새로운 타입의 Cards를 가집니다. 이 타입들은 Card 위젯의 속성을 설정해서 사용 할 수 있습니다. 이..

iOS 어플리케이션 단일 페이지의 레이아웃을 구현합니다. Scaffold는 Navigation bar를 위쪽에 배치하고 페이지의 컨텐츠들을 Navigation bar 사이 혹은 뒤에 배치합니다. CupertinoPageScaffold의 상단에 있는 상태바를 탭할 때, 현재 기본 ScrollView에 대한 애니메이션이 완료되고 처음 화면으로 스크롤 됩니다.(스크롤의 맨 위로 이동한다는 말). 이런 기능은 ScrollView을 둘러싸는 PrimaryScrollController를 사용하여 완성합니다. ScrollView.primary 플래그는 ScrollView를 PrimaryScrollController와 연결 할 때 사용됩니다. See also: CupertinoTabScaffold, a similar ..

CompositedTransformTarget을 따르는 위젯 입니다. 위젯이 결합(compositing) 단계에서 결합 될 때, 이 위젯은 CompositedTransformTarget 와 링크된 targetAnchor 와 해당 위젯의 followerAnchor을 가져옵니다. 두개의 앵커(anchor) 포인트는 offset이 Offset.zero이 아니라면, followerAnchor는 CompositedTransformTarget의 좌표계와 링크된 offset에 의해 offset이 됩니다. link로 사용되는 LayerLink 객체는 대응되는 CompositedTransformTarget의 LayerLink 객체와 같아야합니다. CompositedTransformTarget는 paint 단계에서 Com..

독립적으로 관리될 수 있는 entries의 스택 Overlays는 overlay의 스택에 자식들을 삽입하므로서, 다른 위젯들의 위에 독립적으로 떠있는 모습으로 보이게 합니다. Overlay는 OverlayEntry 객체를 사용해서 overlay 위에 있을 수 있게 각각의 위젯들을 관리합니다. 비록 Overlay을 직접적으로 생성할 수 있지만, WidgetsApp나 MaterialApp에 있는 Navigator가 생성한 오버레이를 사용하는 것이 보통입니다. Navigator는 라우트의 시각적 모습을 관리하기 위해 overlay을 사용합니다. Overlay 위젯은 Stack 위젯과 매우 유사한 커스텀 스택을 사용합니다. Overlay의 주된 용도는 navigation과 연관이 있고 Overlay는 앱의 페이..

위젯을 포함하는 Overlay 안의 장소 Overlay entries는 OverlayState.insert or OverlayState.insertAll 함수를 사용하여 Overlay 에 삽입됩니다. 주어진 BuildContext 에서 가장 가까이에 둘러싸고있는 Overlay를 찾고 싶다면, Overlay.of 함수를 사용하세요. Overlay entrey 오직 1개의 overlay 안에만 속할 수 있습니다. Overlay 에서 entry를 제거하고 싶다면, overlay entry에서 remove 함수를 호출하세요. Overlay는 Stack 레이아웃을 사용하므로, Overay entries는 Overlay 안에서 위치를 정하기 위해 Positioned and AnimatedPositioned 를 사용..

원래 위치에서 상대적으로 위젯의 위치를 애니메이트 합니다. 트렌지션은 자식의 크기의 Offset 으로 스케일 되어 표현됩니다. 예를 들어, dx가 0.25인 Offset 을 사용한다면, 이것은 자식의 width의 1/4 만큼 수평으로 움직이는 트랜슬레이션을 생성할 것 입니다. 디폴트로, offset들은 canvas의 좌표시스템에 적용됩니다.(그래서 양수 x offsets은 자식의 오른쪽으로 움직이게 합니다.) 만약 textDirection 이 주어진다면, offset이 reading 방향으로 적용되므로 오른쪽에서 왼쪽으로 양의 x offset이 이동하고 왼쪽에서 오른쪽으로의 텍스트에서 양의 x offset이 왼쪽으로 이동합니다. 아래의 영상은 Curves.elasticIn으로 설정된 CurvedAnima..

애니매이션을 만들기 위한 위젯입니다. Animated되는 요소와 Animated 되지 않는 요소들이 위젯 트리에 포함되어 있을 때 사용합니다. Animation의 값이 바뀔 때 마다 builder 함수가 호출됩니다. 더 큰 빌드 함수에 애니메이션을 부분으로 추가하려는 복잡한 위젯에 AnimatedBuilder은 유용합니다. AnimatedBuilder를 사용하려면, 위젯을 만들고 builder 함수로 넘기세요. 추가적인 state가 없는 간단한 위젯을 만드는 경우에는, AnimatedWidget을 사용하세요. 성능 최적화 만약 builder 함수가 애니메이션과 관련이 없는 서브트리를 포함하고 있다면, 애니매이션 틱 마다 해당 서브트리를 리빌딩하는 것이 아닌, 한 번만 빌드하는 것이 더 효과적입니다. 만약..