반응형 간단27 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. Flutter[플러터] / FadeInImage 를 사용하여 이미지 로더 처리 (loader, 로딩) FadeInImage (Flutter Widget of the Week) FadeInImage class대상 image 가 로드되는 동안 placeholder 이미지를 표시한 다음, 새 이미지가 로드되면 페이드인되는 이미지입니다.NetworkImage.new 와 같이 로딩이 긴 이미지를 표시하는 데 이 클래스를 사용하면 이미지가 갑자기 화면에 나타나는 것이 아니라 우아한 애니메이션과 함께 화면에 나타납니다.https://youtu.be/pK738Pg9cxc이미지가 로드되고 캐시 될 때와 같이 이미지가 동기적으로 ImageInfo를 내보내는 경우 , 이미지는 즉시 표시되고 플레이스홀더 는 표시되지 않습니다.fadeOutDuration 및 fadeOutCurve 속성 은 플레이스홀더의 페이드아웃 애니메이션을 제어합니다.fadeInDuration 및 fadeInCurve 속성 은 .. 2025. 5. 2. Flutter[플러터] / SliverList & SliverGrid 를 사용하여 CustomScrollView 에서 리스트, 그리드 배치 (커스텀 스크롤뷰) SliverList & SliverGrid (Flutter Widget of the Week) SliverList class주축을 따라 선형 배열로 여러 개의 상자 자식을 배치하는 슬라이버입니다.슬리버에 대해 자세히 알아보려면 CustomScrollView.slivers를 참조하세요.각 자식은 교차 축에서 SliverConstraints.crossAxisExtent 를 가져야 하지만 자체 주 축 범위를 결정합니다.SliverList는 슬라이버의 가시 영역 밖에 있는 자식 요소들이 구체화되지 않았기 때문에 "추측 항법"을 통해 스크롤 오프셋을 결정합니다. 즉 , SliverList는 해당 자식 요소들의 주축 범위를 학습할 수 없습니다. 대신, 새롭게 구체화된 자식 요소들은 기존 자식 요소들 옆에 배치됩니다.https://youtu.be/ORiTTaVY6mM자식 요소의 주축에 고정된 범위가 있는 경우.. 2025. 5. 1. Flutter[플러터] / SliverAppBar 를 사용하여 CustomScrollView 에서 AppBar 넣기 (커스텀 스크롤, 앱바) SliverAppBar (Flutter Widget of the Week) SliverAppBar classCustomScrollView 와 통합된 Material Design 앱 바입니다.앱 바는 툴바와 TabBar, FlexibleSpaceBar 등의 다른 위젯으로 구성됩니다. 앱 바는 일반적으로 하나 이상의 일반적인 동작을 IconButton 으로 표시하며, 덜 일반적인 작업을 위해 PopupMenuButton 이 뒤에 올 수도 있습니다.https://youtu.be/R9C5KMJKluE 실버 앱 바는 일반적으로 CustomScrollView 의 첫 번째 자식으로 사용되며 , 이를 통해 앱 바가 스크롤 뷰와 통합되어 스크롤 오프셋에 따라 높이가 변경되거나 스크롤 뷰의 다른 콘텐츠 위에 떠 있을 수 있습니다. 화면 상단의 고정 높이 앱 바는 Scaffold.appBar 슬롯.. 2025. 4. 30. Flutter[플러터] / Table 을 사용하여 그리드 정렬하기 (표만들기, 테이블, 셀 정렬) Table (Flutter Widget of the Week) Table class자식 위젯에 테이블 레이아웃 알고리즘을 사용하는 위젯입니다.https://youtu.be/_lbE0wsVZSw공식 문서 코드 Table 클래스는 우리가 흔히 아는 표라고 생각하면 편하다.이제 html 로 만들면 편하겠지만 우린 플러터이기 때문에 정해준거 걍 쓰면 된다. 한번 알아보자.하위 속성속성명타입기본값설명childrenList[]테이블에 표시할 행 목록columnWidthsMap?-열의 너비를 결정하는 규칙을 설정defaultColumnWidthTableColumnWidthFlexColumnWidth()명시적으로 설정되지 않은 열의 기본 너비를 설정textDirectionTextDirection?-열 정렬 방향을 설정borderTableBorder?-테이블의 테두리 스타일을 설정.. 2025. 4. 29. Flutter[플러터] / PageView 를 사용하여 스크롤 되는 페이지 구현하기 (화면 넘김, 페이징, 페이지네이션) PageView (Flutter Widget of the Week) PageView class페이지별로 작동하는 스크롤 가능한 목록입니다. 페이지 뷰의 각 자식은 뷰포트와 동일한 크기가 되도록 강제됩니다.PageController를 사용하여 뷰에 표시되는 페이지를 제어할 수 있습니다. PageController 는 PageView 내부 콘텐츠의 픽셀 오프셋을 제어할 수 있을 뿐만 아니라 , 뷰포트 크기의 증분인 페이지 단위로 오프셋을 제어할 수도 있습니다.PageController는 PageView가 처음 생성될 때 어떤 페이지가 표시되는지 결정하는 PageController.initialPage 와 뷰포트 크기에 대한 분수로 페이지 크기를 결정하는 PageController.viewportFraction 을 제어하는 데에도 사용할 수 있습니다.https://yout.. 2025. 4. 28. Flutter[플러터] / FloatingActionButton 을 사용하여 떠있는 하단 버튼 만들기 (더하기 버튼, 추가 버튼, FAB) FloatingActionButton(Flutter Widget of the Week) FloatingActionButton classMaterial Design 플로팅 액션 버튼.플로팅 액션 버튼은 콘텐츠 위에 마우스를 올려 애플리케이션의 주요 동작을 표시하는 원형 아이콘 버튼입니다. 플로팅 액션 버튼은 Scaffold.floatingActionButton 필드에서 가장 일반적으로 사용됩니다.https://youtu.be/2uaoEDOgk_I공식 문서 코드 FloatingActionButton, FAB 는 정말 플러터 개발에 있어서 빠질 수 없는 요소 중 하나이다.위의 예제를 보면 굉장히 심플한 것 같아 보이는데 실제로도 굉장히 간단하다.공식 문서에는 다루지 않고 공식 영상에서만 나오는 내비게이션 안에 배치하는 것도 한번 알아보자. 일단 아주 기본적인 요소만 넣으면 이런 상태가 된다.. 2025. 4. 27. 이전 1 2 다음 반응형
