반응형 분류 전체보기48 Flutter[플러터] / Spacer 를 사용하여 간격을 비율에 따라 조정하기 (스페이서, 플렉스, Flex) Spacer (Flutter Widget of the Week) Spacer classSpacer는 Flex 컨테이너에서 행이나열과 같은 위젯 간 간격을 조정하는 데 사용할 수 있는 조정 가능한 빈 스페이서를 생성합니다.Spacer 위젯은 사용 가능한 모든 공간을 차지하므로 Spacer가 포함된 Flex 컨테이너의 Flex.mainAxisAlignment를MainAxisAlignment.spaceAround, MainAxisAlignment.spaceBetween 또는 MainAxisAlignment.spaceEvenly 로 설정하더라도 눈에 띄는 효과는 없습니다. Spacer가 추가 공간을 모두 차지했으므로 다시 분배할 공간이 없습니다.https://youtu.be/7FJgd7QN1zI공식 문서 코드 Spacer 는 Column 이나 Row 안에서 비율에 맞게 간격.. 2025. 5. 23. Flutter[플러터] / MediaQuery 를 사용하여 반응형 UI 구현하기 (sizeOf, viewInsetsOf, textScalerOf, 미디어쿼리, 사이즈) MediaQuery (Flutter Widget of the Week) MediaQuery class미디어 쿼리가 주어진 데이터로 확인되는 하위 트리를 설정합니다.예를 들어, 현재 뷰(예: 앱이 포함된 FlutterView ) 의 크기를 알아보려면 MediaQuery.sizeOf 를MediaQuery.sizeOf(context) 사용할 수 있습니다.특정 메서드(예: MediaQuery.sizeOf 또는 MediaQuery.paddingOf )를 사용하여 현재 미디어를 쿼리 하면 해당 속성이 변경될 때마다 위젯이 자동으로 다시 빌드됩니다.MediaQuery.of를 사용하여 쿼리하면 MediaQueryData 의 필드가 변경 될 때마다 (예: 사용자가 기기를 회전하는 경우) 위젯이 자동으로 재빌드됩니다. 따라서 전체 MediaQueryData 객체의 변경이 중요하지 않은 경우,.. 2025. 5. 22. Flutter[플러터] / Flexible 를 사용하여 비율에 맞춰 확장하기(크기 오류, 플렉스, 사이즈, 유연, hasSize) Flexible (Flutter Widget of the Week) Flexible classRow , Column 또는 Flex 의 자식이 어떻게 구부러지는지 제어하는 위젯입니다.Flexible 위젯을 사용하면 Row, Column 또는 Flex 의 자식 위젯이 주 축의 사용 가능한 공간을 채우도록 확장할 수 있는 유연성을 제공합니다(예: Row 의 경우 수평으로, Column 의 경우 수직으로 ). 하지만 Expanded 와 달리 Flexible 은 자식 위젯이 사용 가능한 공간을 채울 것을 요구하지 않습니다.Flexible 위젯 은 Row , Column, Flex 의 자손이어야 하며, Flexible 위젯에서 이를 둘러싼 Row , Column , Flex 까지의 경로에는 StatelessWidget 이나 StatefulWidget 만 포함되어야 합니다 ( R.. 2025. 5. 21. Flutter[플러터] / AnimatedList 를 사용하여 아이템 삽입/제거 할 때 커스텀 애니메이션 적용하기(애니메이티드 리스트, item, custom, remove, insert, 애니메이션, 스크롤, scroll) AnimatedList (Flutter Widget of the Week) AnimatedList class항목을 삽입하거나 제거할 때 해당 항목에 애니메이션을 적용하는 스크롤 컨테이너입니다.이 위젯의 AnimatedListState를 사용하여 항목을 동적으로 삽입하거나 제거할 수 있습니다. AnimatedListState 를 참조하려면 GlobalKey를 제공 하거나 항목의 입력 콜백에서 정적 메서드 of 를 사용하세요.이 위젯은 ListView.builder 로 만든 위젯과 비슷합니다.https://youtu.be/ZtfItHwFlZ8공식 문서 코드 AnimatedList 는 리스트를 애니메이션과 함께 보여줄 수 있게 해주는 위젯이다. ListView 같은 위젯은 항목(아이템)을 추가하거나 제거할 때 애니메이션을 적용하지 않지만 이 위젯을 사용하면 넣고 싶은 애니메이션을.. 2025. 5. 20. Flutter[플러터] / ValueListenableBuilder 를 사용하여 값이 바뀌면 자동 적용하기 (알림, 즉시, 바로, ValueNotifier ) ValueListenableBuilder (Flutter Widget of the Week) ValueListenableBuilder classValueListenable 과 동기화된 콘텐츠를 제공하는 위젯입니다.ValueListenable 와 구체적인 값에서 위젯을 빌드하는 빌더가 주어지면, 이 클래스는 자동으로 ValueListenableT 의 리스너로 등록되고 값이 변경될 때 업데이트된 값으로 빌더를 호출합니다.https://youtu.be/s-ZG-jS5QHQ빌더 함수에 ValueListenable 값에 의존하지 않는 하위 트리가 포함된 경우 애니메이션 틱마다 다시 빌드하는 대신 해당 하위 트리를 한 번 빌드하는 것이 더 효율적입니다.미리 작성된 하위 트리를 자식 매개변수 로 전달하면 ValueListenableBuilder 가 이를 빌더 함수 로 다시 전달하여 빌드에 통합할 수 있습니다.. 2025. 5. 19. Flutter[플러터] / SizedBox 를 사용하여 사이즈 지정하기 (크기, 차지) SizedBox (Flutter Widget of the Week) SizedBox class크기가 지정된 상자.자식 위젯이 주어지면, 이 위젯은 해당 위젯의 특정 너비 및/또는 높이를 갖도록 강제합니다. 부모 위젯에서 허용하지 않으면 이 값은 무시됩니다. 예를 들어, 부모 위젯이 screen(자식 위젯의 크기를 부모 위젯과 동일하게 설정)이거나, 다른 SizedBox (자식 위젯의 너비 및/또는 높이를 특정 값으로 설정)인 경우 이러한 문제가 발생합니다. 이 문제는 자식 위젯 SizedBox를 Center 또는 Align 과 같이 부모 위젯의 크기까지 원하는 크기로 설정할 수 있는 위젯으로 래핑하여 해결할 수 있습니다.너비나 높이가 null이면, 이 위젯은 해당 차원에서 자식 위젯의 크기에 맞춰 크기를 조정합니다. 자식 위젯의 크기가 부모 위젯의 크기에 따라 달라지는 .. 2025. 5. 18. 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. 이전 1 2 3 다음 반응형
