Coaspe

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

터치에 반응하는 Material의 직사각형 영역을 의미합니다. 스플래쉬 애니메이션을 클립하지 않는 Inkwell의 이형을 사용하고 싶다면, InkResponse를 참고하세요. 다음 다이어그램은 디폴트값을 사용했을 때, InkWell이 탭되면 어떻게 반응하는지 보여줍니다. InkWell은 반드시 Material 위젯을 조상으로 가져야합니다. Material 위젯은 ink 반응이 실제로 페인트되는 곳입니다. This matches the Material Design premise wherein the Material is what is actually reacting to touches by spreading ink. 만약 위젯이 Inkwell 클래스를 바로으로 사용하면, 해당 위젯의 build 함수의 맨 ..

Flutter가 이미지의 사이즈를 처리하는 방법에는 크게 7가지가 있습니다. 1. BoxFit.fill 원본 이미지의 비율을 유지하지 않고, 이미지를 감싸는 박스에 크기를 맞춥니다. 2. BoxFit.contain 원본 이미지의 비율을 유지하고, 이미지를 감싸는 박스의 width, hegith 중에 더 작은 것에 크기를 맞춥니다. 3. BoxFit.cover 원본 이미지의 비율을 유지하고, 이미지를 감싸는 박스를 covering하는 가장 작은 크기로 설정합니다. 4. BoxFit.fitWidth 원본 이미지의 비율을 유지하고, 이미지를 감싸는 박스의 width를 이미지의 width와 같게 설정합니다. 5. BoxFit.fitHeight BoxFit.fitWidth의 height 버전입니다. 6. BoxF..

A piece of material Material 위젯은 다음과 같은 역할을 수행합니다. Clipping: clipBehavior이 Clip.none으로 설정되어있지 않다면, Material은 shape, type, 그리고 borderRadius으로 구체화되어있는 shape으로 위젯 sub-tree를 clip합니다. 디폴트로 성능을 고려하여 clipBehavior는 Clip.none으로 설정됩니다. Clipping이 어떤 효과를 미치는지 예시로 확인하고 싶다면 Ink 위젯을 참고하세요. Elevation: Material은 elevation pixels을 사용하여 자신의 위젯 sub-tree를 elevates 하고 적절한 그림자를 그립니다. Ink 효과: Material은 InkSplash와 InkHi..

Stack 위젯은 자신의 엣지에 상대적으로 자식들을 배치하는 위젯입니다. 이 클래스로 간편하게 여러 자식들을 겹쳐서 배치할 수 있습니다. Stack 위젯의 각 자식들은 positioned이거나, non-positioned 입니다. Positioned 자식들은 Positioned 위젯들로 감싸진 위젯들을 말합니다. Stack 위젯은 alignment에 따라 배치된 non-positioned 자식들을 모두 포함하기 위해 스스로 사이즈를 조절합니다. Positioned 자식들은 top, right, bottom, left 프로퍼티에 따라 stack 안에서 상대적으로 배치 됩니다. Stack 위젯은 첫번째 자식을 가장 아래에 둡니다.(z-index를 말합니다.). 자식들의 배치 순서를 바꾸고 싶다면, stack..

BuildContext의 findAncestorStateOfType 함수는 Element class에 정의 되어 있습니다. 4456 ~ 4461 라인에서 볼 수 있듯이, whild 문을 반복하며 해당 T 타입에 해당하는 조상을 찾습니다.

Stack discipline을 따르는 자식 위젯들의 Set을 관리하는 위젯입니다. 많은 앱들은 Overlay를 사용하여 논리적 히스토리를 디스플레이하기 위해 위젯 계층의 최상위 주변에 navigator를 가지고 있으며, 오래된 페이지 위에 가장 최근에 방문한 페이지를 시각적으로 디스플레이합니다. 이런 패턴을 사용하는 것은 navigator가 overlay를 사용하여 한 페이지에서 다른 페이지로 시각적 트렌지션을 가능하게 합니다. 비슷하게, 현재 페이지에 다이얼로그 위젯을 표시하기 위해 navigator를 사용할 수 있습니다. Using the Navigator API 모바일 앱은 보통 "screen", "pages"로 불리는 full-screen을 통해 컨텐츠를 보여줍니다. Flutter에서 이런 요소..

AnimatedWidget은 보통 Listenable인 Animation 객체와 함께 사용되지만, ChangeNotifier, ValueNotifier와 같은 Listenable와도 함께 사용이 가능합니다. AnimatedWidget는 stateless 위젯에 가장 유용합니다. AnimatedWidget를 사용하고 싶다면, AnimatedWidget를 subclass하고 build 함수를 작성하세요. 추가적인 상태를 가지는 더 복잡한 위젯을 만들고 싶다면, AnimatedBuilder를 사용하세요. Relationship to ImplicitlyAnimatedWidgets AnimatedWidgets는 보통 AnimationController으로부터 얻어지는 Animation인 Listenable를 인자..

프로퍼티의 변화에 따라 애니메이트하는 위젯을 만들기 위한 추상 클래스입니다. 이 타입의 위젯들은 위젯 트리에 처음 추가 되었을 때는 애니메이트하지 않습니다. 하지만 다른 값으로 rebuilt 될 때, 그 변화에 맞춰 지정된 duration 동안 애니메이션을 수행합니다. 어떤 프로퍼티의 변화에 맞춰 애니메이트 될 지는 서브클래스가 결정합니다. 서브클래스들의 States는 반드시 ImplicitlyAnimatedWidgetState를 확장해야하고 애니메이션을 수행하기 위해 관련된 필드를 방문할 수 있게 해야합니다. Relationship to AnimatedWidgets ImplicitlyAnimatedWidgets(과 그것들의 서브클래스들)는 프로퍼티가 변화하면 자동적으로 언제나 애니메이트 합니다. 이렇게..

시작과 끝 값의 선형 보간법 입니다. Tween 은 주어진 범위를 보간하는데 유용합니다. Tween 객체를 애니메이션과 사용하고 싶다면, Tween 객체의 animate 메소드를 호출하고 이것을 수정하고자 하는 Animation 객체에 넘기세요. chain 함수를 사용하여 Tween 객체를 연쇄적으로 사용할 수 있습니다. 그렇게 하므로서 Animation 객체는 연쇄적으로 호출되는 여러개의 Tween 객채로 설정 될 수 있습니다. 이건 각각의 Animation 객체가 하나의 Tween 로 설정되어 나오는 animate 메소드를 여러번 부르는 방법과는 다릅니다. _controller가 AnimationController 라고 가정하고 우리는 controller에 의해 제어되는 Animation 를 생성할 ..