반응형 Flexible17 Flutter[플러터] / GridView를 사용하여 그리드 제작하기 (스크롤, 2D, 격자, 배열, 다중, 리스트, 간격, 목록) GridView (Flutter Widget of the Week) GridView class스크롤 가능한 2D 위젯 배열입니다.https://youtu.be/bLOtZDTm4H8공식 문서 코드 UI를 구성하다 보면 행과 열이 복잡한 형태의 레이아웃으로 구성될 때가 있는데 이럴 때 레이아웃 그리드로 만든다면 아주 빠르고 쉽게 만들 수 있을 것이다. 그리고 Flutter에는 그리드를 쉽게 만들 수 있도록 도와주는 GridView위젯이 있다.이 GridView는 격자 형태의 스크롤 가능한 위젯을 만들 때 사용하는 매우 유용한 위젯으로 주로 일정한 간격으로 정렬된 이미지 목록이나 카드 등의 UI를 만들 때 사용된다. 바로 알아보자.하위 속성속성명타입기본값설명gridDelegateSliverGridDelegate–그리드의 열 수, 간격, 비율 등을 정의하는 레이아웃 구성 규칙.. 2025. 7. 16. Flutter[플러터] / InteractiveViewer를 사용하여 자식 위젯과의 팬 및 확대/축소 상호작용을 가능하게 하기 (터치, 드래그, 줌 인/아웃 기능, 인터랙티브뷰어) InteractiveViewer (Flutter Widget of the Week) InteractiveViewer class자식 위젯과의 팬 및 확대/축소 상호작용을 가능하게 하는 위젯입니다.사용자는 드래그하여 팬 하거나 핀치 하여 확대/축소하여 어린이를 변형할 수 있습니다.https://youtu.be/zrn7V3bMJvg공식 문서 코드 폰으로 뉴스 같은 글자가 작고 많은 것을 볼 때 우리는 화면을 확대하여 크기를 키우곤 한다. 그러한 동작을 Flutter내부에서 구현하려면 꽤 성가실 것 같은 기분이 든다. 하지만 이러한 줌 인/아웃 동작을 아주 간단하게 실행해 주 켜는 위젯이 있는데 그것이 바로 InteractiveViewer 위젯이다.이 InteractiveViewer 위젯은 사용자가 터치 제스처(예: 확대/축소, 드래그, 회전 등)를 통해 UI 요소와 상호작용할 수 있도록 해주.. 2025. 7. 15. Flutter[플러터] / Padding을 사용하여 자식 위젯에 여백 공간 주기 (패딩, 할당, 마진, 띄우기, 충전재, 공백)Padding (Flutter Widget of the Week) Padding class주어진 패딩으로 자식을 삽입하는 위젯입니다.자식 요소에 레이아웃 제약 조건을 전달할 때, 패딩은 주어진 패딩만큼 제약 조건을 축소하여 자식 요소의 레이아웃을 더 작은 크기로 조정합니다. 그런 다음 패딩은 자식 요소의 크기에 맞춰 크기를 조정하고, 패딩만큼 확장하여 자식 요소 주변에 빈 공간을 만듭니다.https://youtu.be/oD5RtLhhubg공식 문서 코드 앱에서 위젯이 많으면 화면이 복잡해지는 경우가 생긴다. 이럴 때 우리는 위젯끼리 공간을 띄워서 사회적 거리 두기를 실천해줘야 한다. 이럴 때 아주 쉽게 사용할 수 있는 위젯이 바로 Padding위젯이다.이 Padding 위젯은 자식 위젯 주위에 여백(공백 공간)을 추가할 때 사용되는 위젯이다. UI 요소들 사이의 간격을.. 2025. 7. 7. Flutter[플러터] / Container 를 사용하여 박스 만들기 (컨테이너, 상자) Container (Flutter Widget of the Week) Container class일반적인 페인팅, 위치 지정, 크기 조정 위젯을 결합한 편리한 위젯입니다.컨테이너는 먼저 자식 요소를 패딩 ( 장식에 있는 테두리에 의해 팽창됨 )으로 둘러싼 다음, 패딩 된 범위에 추가 제약 조건을width 적용합니다( 그리고 둘 중 하나가 null이 아닌 경우 제약 조건으로 포함). 그런 다음 컨테이너는 여백 height 에서 설명된 추가 빈 공간으로 둘러싸입니다.페인팅하는 동안 컨테이너는 먼저 주어진 변형을 적용한 다음 패딩 된 범위를 채우도록 장식을 칠하고, 그다음 자식을 칠하고, 마지막으로 패딩된 범위를 채우는 전경 장식을 칠합니다.자식이 없는 컨테이너는 들어오는 제약 조건이 제한되지 않는 한 최대한 크게 만들려고 노력하지만, 제한되지 않은 경우에는 최대한 작게 만.. 2025. 6. 11. Flutter[플러터] / FractionallySizedBox 를 사용하여 부모 사이즈에 맞게 반응형 위젯 만들기 (fractional, 비율, 크기, 사이즈, 유동적) FractionallySizedBox (Flutter Widget of the Week) FractionallySizedBox class자식 위젯의 크기를 전체 사용 가능 공간의 일부로 지정하는 위젯입니다. 레이아웃 알고리즘에 대한 자세한 내용은 RenderFractionallySizedOverflowBox를 참조하세요.https://youtu.be/PEsY654EGZ0공식 문서 코드 흔히들 앱에서 위젯을 배치할 때 지정된 값이 아닌 "MediaQuery,sizeOf(Context).width * 0.8" 같이 화면의 길이에 비례하여 사이즈를 지정해 본 적이 있을 것이다. 그렇다면 이번엔 화면의 길이에 비례하여 사이즈를 지정하는 것이 아닌 부모에 비례하여 사이즈를 제작해야 한다면 어떻게 하겠는가? 이럴 때 사용할 수 있는 것이 바로 FractionallySizedBox 위젯이다.이 Fract.. 2025. 6. 8. Flutter[플러터] / ConstrainedBox ConstrainedBox (Flutter Widget of the Week) ConstrainedBox class자식 위젯에 추가적인 제약을 부과하는 위젯입니다.예를 들어, 자식의 최소 높이를 50.0 논리 픽셀로 지정하려면 제약 조건 const BoxConstraints(minHeight: 50.0) 으로 다음을 사용할 수 있습니다.https://youtu.be/o2KveVr7adg예시 코드 앱을 구성할 때 오는 데이터가 얼마나 오는지 혹은 위젯을 배치할 건데 그 위젯의 크기를 예측 불가능 할 때 어떻게 해야 할까? 이런 상황에서는 레이아웃이 깨질 가능성이 생기는데 이럴 때 안전하게 크기를 제한하는 용도로 사용되는 것이 ConstrainedBox 위젯이다.ConstrainedBox 위젯은 자식 위젯에 제약 조건(BoxConstraints)을 적용하기 위해 사용하는 위젯이다.이 .. 2025. 6. 5. Flutter[플러터] / Wrap 을 사용하여 반응형으로 정렬하기 (유동적 레이아웃) Wrap (Flutter Widget of the Week) LimitedBox class제약이 없을 때만 크기가 제한되는 상자입니다.이 위젯의 최대 너비에 제한이 없으면 자식 위젯의 너비는 maxWidth 로 제한됩니다. 마찬가지로, 이 위젯의 최대 높이에 제한이 없으면 자식 위젯의 높이는 maxHeight 로 제한됩니다.이는 경계가 없는 환경에서 자식 위젯에 자연스러운 차원을 부여하는 효과가 있습니다. 예를 들어, 일반적으로 최대한 크게 보이도록 하는 위젯에 maxHeight를 지정하면 위젯은 일반적으로 부모 위젯에 맞춰 크기가 조정되지만, 세로 목록에 배치되면 지정된 높이를 갖게 됩니다.이 기능은 일반적으로 부모의 크기에 맞추려는 위젯을 구성할 때 유용하며, 목록(제한 없음)에서 합리적으로 동작하도록 합니다.https://youtu.be/uVki2CI.. 2025. 5. 27. Flutter[플러터] / AspectRatio 을 사용하여 종횡비에 맞춰 크기 조정하기 (크기, 사이즈, 비율) AspectRatio (Flutter Widget of the Week) AspectRatio class자식 위젯의 크기를 특정 종횡비에 맞게 조정하는 위젯입니다.종횡비는 너비와 높이의 비율로 표현됩니다. 예를 들어, 16:9 너비:높이 종횡비는 16.0/9.0이 됩니다.https://youtu.be/XcnP3_mO_Ms공식 문서 코드 AspectRatio 위젯은 부모 위젯이 허용한 공간 안에서 자식 위젯이 가로 : 세로 비율을 유지하며 크기 결정에 도움을 주는 위젯이다. 주로 16:9의 비율을 가지게 하거나 정사각형의 비율을 가지게 하고 싶을 때 사용 된다. 한번 간단하게 알아보자.하위 속성속성명타입기본값설명aspectRatiodouble–가로를 세로로 나눈 비율로, 이 비율에 맞게 자식의 크기를 조정childWidget–비율을 맞춰서 표시될 자식 위젯 사용법은 아주 간.. 2025. 5. 26. 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[플러터] / 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[플러터] / LayoutBuilder 를 사용하여 크기 측정하기 (레이아웃 빌더, 위젯 사이즈, 크기) LayoutBuilder (Flutter Widget of the Week) LayoutBuilder class부모 위젯의 크기에 따라 달라지는 위젯 트리를 빌드합니다.Builder 위젯과 유사하지만, 프레임워크가 레이아웃 시점에 빌더 함수를 호출하고 부모 위젯의 제약 조건을 제공한다는 점이 다릅니다. 이는 부모 위젯이 자식 위젯의 크기를 제한하고 자식 위젯의 기본 크기에 의존하지 않을 때 유용합니다. LayoutBuilder 의 최종 크기는 자식 위젯의 크기와 일치합니다.빌더 함수는 다음과 같은 상황에서 호출됩니다.위젯이 처음 배치되는 시점입니다.부모 위젯이 다른 레이아웃 제약 조건을 전달하는 경우.부모 위젯이 이 위젯을 업데이트할 때.빌더 함수가 구독하는 종속성이 변경되는 경우.부모가 동일한 제약 조건을 반복적으로 전달하는 경우 레이아웃 중에 빌더 함수가 호출되지 않습니다.h.. 2025. 5. 10. Flutter[플러터] / Wrap 을 사용하여 반응형으로 정렬하기 (유동적 레이아웃) Wrap (Flutter Widget of the Week) Wrap class자식 위젯을 여러 개의 수평 또는 수직 방향으로 표시하는 위젯입니다. Wrap 은 각 자식 요소를 배치하고, direction 에 따라 주어진 주축에서 이전 자식 요소와 인접하게 배치합니다. 이때 자식 요소 사이에는 간격을 둡니다. 자식 요소를 배치할 공간이 충분하지 않으면 Wrap 은 교차축에서 기존 자식 요소 옆에 새 런을 생성합니다.모든 자식이 런에 할당된 후, 런 내의 자식은 주축의 정렬과 교차축의 crossAxisAlignment 에 따라 배치됩니다.그런 다음 런 자체는 runSpacing 및 runAlignment 에 따라 교차 축에 배치됩니다. https://www.youtube.com/watch?v=z5iw2SeFx2M 공식 문서 코드 Wrap 은 반응형 정렬하는 것에 있.. 2025. 4. 22. Flutter[플러터] / Expanded 를 사용하여 크기 차지하기(확장하기) Expanded (Flutter Widget of the Week) Expanded classRow, Column 또는 Flex 의 자식을 확장하여 자식이 사용 가능한 공간을 채우는 위젯입니다. Expanded 위젯을 사용하면 Row, Column, Flex 의 자식 위젯이 주축을 따라 사용 가능한 공간(예: Row 의 경우 가로, Column 의 경우 세로)을 채우도록 확장됩니다. 여러 자식 위젯이 확장되는 경우, 사용 가능한 공간은 flex 요소에 따라 각 자식 위젯에 분배됩니다.Expanded 위젯은 Row, Column, Flex 의 자손이어야 하며 Expanded 위젯에서 이를 둘러싼 Row, Column, Flex 까지의 경로에는 StatelessWidget 이나 StatefulWidget 만 포함되어야 합니다 (RenderObjectWidget 과 같은 다른.. 2025. 4. 21. 이전 1 2 다음 반응형