반응형 분류 전체보기72 Flutter[플러터] / Dismissible 을 사용하여 리스트에서 스와이프하여 아이템 제거하기 (드래그, 리스트, 디스미스블, 삭제, Swipe, drag) Dismissible (Flutter Widget of the Week) Dismissible class표시된 방향으로 드래그하여 닫을 수 있는 위젯입니다.DismissDirection 에서 이 위젯을 드래그하거나 던지면 자식 위젯이 슬라이드 아웃됩니다. 슬라이드 애니메이션 후 resizeDuration 이 null이 아니면 Dismissible 위젯은 resizeDuration 에 지정된 시간 동안 높이(또는 해제 방향과 수직인 너비)를 0으로 애니메이션 합니다.https://youtu.be/iEMgjrfuc58 공식 문서 코드 Dismissible 위젯은 리스트나 아이템등 카드처럼 표시된 위젯을 스와이프로 지울 수 있도록 도와주는 위젯인데 보통 위의 예제처럼 주로 ListView.builder 같은 코드와 함께 사용된다. 주요 기능으로는 스와이프 방향설정(가로, 세로)과 .. 2025. 5. 17. Flutter[플러터] / AnimatedBuilder (Flutter Widget of the Week) AnimatedBuilder class애니메이션을 만드는 데 사용되는 일반 위젯입니다.AnimatedBuilder는 더 큰 빌드 함수의 일부로 애니메이션을 포함하려는 더 복잡한 위젯에 유용합니다. AnimatedBuilder를 사용하려면 위젯을 생성하고 빌더 함수를 전달해야 합니다.추가 상태가 없는 간단한 경우에는 AnimatedWidget 을 사용하는 것을 고려하세요.https://youtu.be/N-RiyZlv8v8이름과 달리 AnimatedBuilder는 Animation 에만 국한되지 않습니다. 모든 하위 유형 (예: ChangeNotifier 또는 ValueNotifier )을 사용하여 리빌드를 트리거할 수 있습니다. 구현 방식은 동일하지만, Animation을 수신 대기하지 않는 경우 가독성을.. 2025. 5. 16. Flutter[플러터] / Positioned 를 사용하여 Stack 안에서 자유롭게 위젯의 위치를 배치하기 (변경, 조절, 포지션, 스택) Positioned (Flutter Widget of the Week) Positioned classStack 의 자식이 어디에 위치하는지 제어하는 위젯입니다.Positioned 위젯 은 Stack 의 자손이어야 하며, Positioned 위젯에서 이를 둘러싼 Stack 까지 의 경로에는 StatelessWidget 또는 StatefulWidget 만 포함되어야 합니다. (RenderObjectWidget 과 같은 다른 종류의 위젯은 제외)https://youtu.be/EgtPleVwxBQ에제 코드 Postioned 는 우리가 Stack 안에서 배치를 할 때 절대 빠질 수 없는 필수 위젯 중에 하나이다. Positioned 는 Stack 안에서만 사용되며 그 외 다른 곳에서 사용되면 바로 오류가 나버린다. 무조건 Positioned 의 상위 위젯이 Stack 이여야 한다.. 2025. 5. 15. Flutter[플러터] / Align 을 사용하여 정렬하기 (배치, 얼라인, 위치 설, Alignment) Align (Flutter Widget of the Week) Align class자식 위젯을 자기 자신 안에 정렬하고, 자식 위젯의 크기에 따라 위젯 자체의 크기를 선택적으로 조절하는 위젯입니다.예를 들어, 상자를 오른쪽 하단에 정렬하려면 자식 상자의 자연스러운 크기보다 큰 엄격한 제약 조건을 이 상자에 전달하고 정렬은 Alignment.bottomRight 로 지정합니다.https://youtu.be/g2E7yl3MwMk공식 문서 코드 Align 은 위젯의 위치를 지정해 줄 때 가장 많이 사용되는 위젯? 개념 중에 하나이다. 아주 간단하게 Alignment 의 상수(생성자)로 Alignment.center 해서 그냥 중앙에 배치하게 만들어 줄 수도 있고 좌표값을 넣어서 직접 넣고 싶은 좌표에 넣어 줄수도 있다. 한번 알아보자.하위 속성속성명타입기본값설명child.. 2025. 5. 14. Flutter[플러터] / BackdropFilter 를 사용하여 배경에 블러 효과 주기 (모자이크 처리, 백드랍필터, blur) BackdropFilter (Flutter Widget of the Week) BackdropFilter class기존의 페인트 된 콘텐츠에 필터를 적용한 다음 자식을 페인트하는 위젯입니다.필터는 부모 위젯 또는 상위 위젯의 클립 내 모든 영역에 적용됩니다. 클립이 없는 경우 필터는 전체 화면에 적용됩니다.필터 결과는 blendMode 매개변수를 사용하여 배경에 다시 블렌딩 됩니다.모든 플랫폼에서 지원되는 blendMode 의 유일한 값은 BlendMode.srcOver 이며, 대부분의 장면에서 잘 작동합니다. 하지만 BackdropFilter 의 부모가 Opacity 위젯 처럼 임시 버퍼나 저장 레이어를 사용하는 경, 이 값은 예상치 못한 결과를 초래할 수 있습니다. 이 경우 BlendMode.src 값을 사용하면 더욱 만족스러운 결과를 얻을 수 있습니다.여러 개의 배경 필터 위.. 2025. 5. 13. Flutter[플러터] / Transform 을 사용하여 위젯 변환 시키기(회전, 이동, 크기 키우기, 스케일, 기울이기, 반전, 트랜스폼) (Flutter Widget of the Week) Transform class자식 위젯을 그리기 전에 변형을 적용하는 위젯입니다.레이아웃에 앞서 회전을 적용하는 RotatedBox 와 달리, 이 객체는 페인팅 바로 전에 변환을 적용합니다. 즉, 이 위젯의 자식(따라서 이 위젯)이 얼마나 많은 공간을 차지하는지 계산할 때 변환은 고려되지 않습니다.https://youtu.be/9z_YNlRlWfA 공식 문서 코드 Transform. 이 위젯은 가히 최고다. 영상을 보았다면 이 말에 동의할 것이다. 물론 이 글에서 저렇게 하는 건 다루지 않을 거다.간단하게 키우고 돌리는 정도만 알아볼 것이다하위 속성속성명타입기본값설명childWidget–변환 효과가 적용될 자식 위젯transformMatrix4필수적용할 변환 행렬 (회전, 확대, 이동 등)originO.. 2025. 5. 12. Flutter[플러터] / AbsorbPointer 를 사용하여 동적으로 터치 금지하기, 막기, 제한하기 (앱솔브 포인터) AbsorbPointer (Flutter Widget of the Week) AbsorbPointer class히트 테스트 중 포인터를 흡수하는 위젯입니다.absorbing 이 true일 때, 이 위젯은 자기 자신에 대한 적중 테스트를 종료하여 하위 트리에서 포인터 이벤트를 수신하지 못하도록 합니다. 레이아웃 중에도 공간을 사용하고 평소처럼 자식 위젯을 그립니다. 다만 RenderBox.hitTest 에서 true를 반환하기 때문에 자식 위젯이 위치 이벤트의 대상이 되지 않도록 합니다.https://youtu.be/65HoWqBboI8공식 문서 코드 AbsorbPointer 는 터치를 받는 위젯에게서 터치 이벤트를 받지 못하게 하는 위젯이다. 쉽게 말해 터치 기능을 빼버리는 위젯이다.이름 그 뜻대로 포인터 이벤트를 흡수하는 기능을 가지고 있는데 이는 즉 AbsorbPointer .. 2025. 5. 11. Flutter[플러터] / LayoutBuilder 를 사용하여 크기 측정하기 (레이아웃 빌더, 위젯 사이즈, 크기) LayoutBuilder (Flutter Widget of the Week) LayoutBuilder class부모 위젯의 크기에 따라 달라지는 위젯 트리를 빌드합니다.Builder 위젯과 유사하지만, 프레임워크가 레이아웃 시점에 빌더 함수를 호출하고 부모 위젯의 제약 조건을 제공한다는 점이 다릅니다. 이는 부모 위젯이 자식 위젯의 크기를 제한하고 자식 위젯의 기본 크기에 의존하지 않을 때 유용합니다. LayoutBuilder 의 최종 크기는 자식 위젯의 크기와 일치합니다.빌더 함수는 다음과 같은 상황에서 호출됩니다.위젯이 처음 배치되는 시점입니다.부모 위젯이 다른 레이아웃 제약 조건을 전달하는 경우.부모 위젯이 이 위젯을 업데이트할 때.빌더 함수가 구독하는 종속성이 변경되는 경우.부모가 동일한 제약 조건을 반복적으로 전달하는 경우 레이아웃 중에 빌더 함수가 호출되지 않습니다.h.. 2025. 5. 10. Flutter[플러터] / FittedBox 를 사용하여 크기 오류 해결하기, 크기 맞춤 하기 (Fit, 핏) FittedBox (Flutter Widget of the Week) FittedBox classfit 에 따라 자식의 크기를 조정하고 위치를 지정합니다.https://youtu.be/T4Uehk3_wlY공식 문서 코드 FittedBox 는 자식 위젯을 부모 위젯의 크기에 맞춰주게 만들어주는 위젯이다. 정확히 말하면 그것만을 위해 존재하는 위젯이다.한번 가볍게 알아보자.하위 속성속성명타입기본값설명childWidget?–확대 또는 축소 대상이 되는 자식 위젯fitBoxFitBoxFit.contain자식 위젯을 어떤 비율로 박스에 맞출지 결정하는 방식alignmentAlignmentGeometryAlignment.center자식 위젯이 박스 내에서 어떻게 정렬될지 결정clipBehaviorClipClip.none자식이 넘치는 경우 어떤 방식으로 잘라낼지 결정 속성표를 보니 조.. 2025. 5. 9. Flutter[플러터] / Tooltip 을 사용하여 툴팁, 정보 보여주기 Tooltip (Flutter Widget of the Week) Tooltip classMaterial Design 툴팁.툴팁은 버튼이나 기타 사용자 인터페이스 동작의 기능을 설명하는 텍스트 레이블을 제공합니다. 버튼을 툴팁 위젯으로 감싸고 위젯을 길게 눌렀을 때 표시되는 메시지를 제공합니다.IconButton , FloatingActionButton , PopupMenuButton 과 같은 많은 위젯에는 tooltipnull이 아닌 경우 위젯이 빌드에 도구 설명을 포함하도록 하는 속성이 있습니다.툴팁은 위젯의 텍스트 표현을 제공하여 시각적 위젯의 접근성을 개선합니다. 예를 들어, 화면 판독기를 통해 텍스트 표현을 음성으로 표현할 수 있습니다.https://youtu.be/EeEfD5fI-5Q 공식 문서 코드 ToolTip 은 우리가 웹에서 어떤 것에 마우스를 올리.. 2025. 5. 8. Flutter[플러터] / CustomPaint 를 사용하여 직접 그리기, 구현하기, 만들기 (CustomPainter, 커스텀 페인트, Painter, 페인터) CustomPaint (Flutter Widget of the Week) CustomPaint class페인트 단계에서 그림을 그릴 수 있는 캔버스를 제공하는 위젯입니다.페인트 작업을 요청받으면 CustomPaint는 먼저 페인터에게 현재 캔버스에 페인트 작업을 요청한 다음, 자식 캔버스를 페인트 하고, 자식 캔버스를 페인트 한 후, 포그라운드 페인터에게 페인트 작업을 요청합니다. 캔버스의 좌표계는 CustomPaint 객체의 좌표계와 일치합니다. 페인터는 원점에서 시작하여 주어진 크기의 영역을 포함하는 사각형 안에 페인트 작업을 해야 합니다. (페인터가 해당 경계를 벗어나 페인트 작업을 수행하면 페인트 명령을 래스터화 하는 데 필요한 메모리가 부족하여 결과 동작이 정의되지 않을 수 있습니다.) 이러한 경계 내에서 페인트 작업을 수행하려면 이 CustomPaint 객체를 Cl.. 2025. 5. 7. Flutter[플러터] / Hero 를 이용하여 화면 이동시 이미지 따라가기 Hero (Flutter Widget of the Week) Hero class자식 위젯을 히어로 애니메이션의 후보로 표시하는 위젯입니다.Navigator를 사용하여 PageRoute를푸시하거나 팝 하면전체 화면 콘텐츠가 교체됩니다. 이전 경로는 사라지고 새 경로가 나타납니다. 두 경로에 공통적인 시각적 특징이 있는 경우, 경로 전환 중에 해당 특징이 한 페이지에서 다른 페이지로 물리적으로 이동하도록 사용자에게 안내하는 데 도움이 될 수 있습니다. 이러한 애니메이션을 히어로 애니메이션이라고 합니다. 히어로 위젯은 전환 중에 Navigator 오버레이에서 "비행"하며, 이동 중에는 기본적으로 이전 경로와 새 경로의 원래 위치에 표시되지 않습니다.위젯에 이러한 기능을 지정하려면 Hero 위젯으로 감싸세요. 탐색이 발생하면 각 경로에 있는 Hero 위젯은 HeroCon.. 2025. 5. 6. Flutter[플러터] / ClipRRect 를 사용하여 모서리 둥글게 하기 (래디우스, 라운드) ClipRRect (Flutter Widget of the Week) ClipRRect class둥근 사각형을 사용하여 자식 위젯을 클리핑 하는 위젯입니다.기본적으로 ClipRRect는 클립의 기본 사각형으로 자체 경계를 사용하지만, 사용자 정의 클리퍼를 사용하여 클립의 크기와 위치를 사용자 정의할 수 있습니다.https://youtu.be/eI43jkQkrvs 공식 문서 코드 ClipRRect 는 개발에 있어서 진짜 빠질 수 없는 아주 중요하고 좋은 위젯이다.기능자체는 놀라울 만큼 간단한데 자식에게 라운드, 래디우스를 준다. 그니까 모서리를 둥글게 해 준다.하위 속성속성명타입기본값설명childWidget-클리핑될 자식 위젯borderRadiusBorderRadiusGeometryBorderRadius.zero둥근 모서리의 반지름을 정의하며, clipper가 null일 .. 2025. 5. 5. Flutter[플러터] / InheritedModel 을 사용하여 InheritedModel(Flutter Widget of the Week) InheritedModel class전체 모델의 한 부분이나 "측면"에만 종속되는 모델의 기본 클래스로 사용되도록 의도된 InheritedWidget 입니다.상속된 위젯의 종속 항목은 상속된 위젯이 InheritedWidget.updateShouldNotify 에 따라 변경될 때 무조건 다시 빌드됩니다. 이 위젯은 종속 항목이 무조건 다시 빌드되지 않는다는 점을 제외하면 유사합니다.InheritedModel 에 의존하는 위젯은 자신이 의존하는 모델의 "측면"을 나타내는 값으로 종속성을 한정합니다. 모델이 재빌드되면 종속된 위젯도 재빌드되지만, 제공된 측면에 해당하는 모델에 변경 사항이 있는 경우에만 재빌드됩니다.유형 매개변수 T는 모델 측면 객체의 유형입니다.https://youtu.be/ml5uefGg.. 2025. 5. 4. Flutter[플러터] / StreamBuilder 를 사용하여 데이터 자동 반영되는 화면제작하기 StreamBuilder (Flutter Widget of the Week) Stream 과의 상호작용에 대한 최신 스냅샷을 기반으로 자체적으로 빌드되는 위젯입니다.https://youtu.be/MkKEWHfy99Y스트림 관리스트림 은 State.initState , State.didUpdateWidget 또는 State.didChangeDependencies 와 같이 이전에 생성되어야 합니다.StreamBuilder를 생성할 때 State.build 또는 StatelessWidget.build 메서드를 호출하는 동안 생성되어서는 안 됩니다.스트림 이 StreamBuilder 와 동시에 생성되는 경우, StreamBuilder 의 부모가 다시 빌드될 때마다 비동기 작업이 다시 시작됩니다.일반적인 지침은 모든 메서드가 매 프레임마다 호출될 수 있다고 가정하고 build, 생략된 호.. 2025. 5. 3. 이전 1 2 3 4 5 다음 반응형
