반응형 초보48 Flutter[플러터] / AnimatedPadding 을 사용하여 패딩에 애니메이션 주기 (움직이는, 애니메이티드) AnimatedPadding (Flutter Widget of the Week) AnimatedPadding class주어진 인셋이 변경될 때마다 주어진 기간 동안 들여쓰기를 자동으로 전환하는 패딩의 애니메이션 버전입니다.https://youtu.be/PY2m0fhGNz4공식 문서 코드 우리가 보통 화면을 구성할 때에 위젯에 직접적인 사이즈를 줘서 만든다. 허나 많이들 유동성을 위해 위젯 자체의 크기는 고정값으로 넣어놓지 않고 패딩(padding)에 맡겨 화면에 따라 크기를 다르게 만들곤 한다. 그렇다면 그 안에서 위젯의 크기를 변화시켜야 하고 변화시키는 과정에 애니메이션이 필요하다면 어떠한 것을 사용해야 할까? 바로 AnimatedPadding 위젯이다.이 AnimatedPadding 위젯은 자식 위젯에 적용된 패딩을 애니메이션 효과와 함께 변경할 수 있도록 도와준다. 바로 알아보.. 2025. 6. 2. Flutter[플러터] / AnimatedPositioned 를 사용해서 Stack 내에서 애니메이션 주기 (애니메이티드 포지션, 스택) AnimatedPositioned(Flutter Widget of the Week) AnimatedPositioned class지정된 위치가 변경될 때마다 지정된 기간 동안 자식의 위치를 자동으로 전환하는 Positioned 의 애니메이션 버전입니다.Stack 의 자식인 경우에만 작동합니다.이 위젯은 애니메이션으로 인해 자식 위젯의 크기가 변경될 경우 좋은 선택입니다. 크기가 동일하게 유지되고 시간 경과에 따라 위치 만 변경되는 경우 SlideTransition을 사용하는 것이 좋습니다. SlideTransition은 애니메이션의 각 프레임마다 리페인팅만 실행하는 반면, AnimatedPositioned는 레이아웃도 실행합니다.Curves.fastOutSlowIn 곡선을 사용 하여 이 위젯을 사용하는 모습을 보여주는 그림은 다음과 같습니다.https://youtu.be/hC3s2Yd.. 2025. 6. 1. Flutter[플러터] / AnimatedSwitcher 를 사용하여 두개 이상의 위젯에 전환 애니메이션 넣기 (효과, animation, 스위치, 교체,화면 전환) AnimatedSwitcher (Flutter Widget of the Week) AnimatedSwitcher class기본적으로 AnimatedSwitcher 에 자식으로 설정된 위젯과 새 위젯 사이에 크로스 페이드를 수행하는 위젯입니다.https://youtu.be/2W7POjFb88g공식 문서 코드 AnimatedSwitcher 는 위젯 간의 전환 애니메이션을 손쉽게 구현할 수 있도록 도와주는 위젯이다. 사용하기 간단하니 한번 알아보자.하위 속성속성명타입기본값설명childWidget?–현재 표시할 자식 위젯durationDuration필수새 자식 위젯이 들어올 때의 전환 지속 시간reverseDurationDuration?null기존 자식 위젯이 사라질 때의 전환 지속 시간switchInCurveCurveCurves.linear새 자식이 들어올 때 사용하는 애니메이션 곡선swi.. 2025. 5. 31. Flutter[플러터] / RichText 를 사용하여 텍스트 개별 조절하기 (문단, Text.rich, 문장) (Flutter Widget of the Week) RichText class풍부한 텍스트로 구성된 문단입니다.RichText 위젯 은 여러 스타일을 사용하는 텍스트를 표시합니다. 표시할 텍스트는 TextSpan 객체 트리를 통해 정의되며 , 각 객체에는 해당 하위 트리에 사용되는 연관된 스타일이 있습니다. 레이아웃 제약 조건에 따라 텍스트는 여러 줄에 걸쳐 표시되거나 모두 한 줄에 표시될 수 있습니다.RichText 위젯 에 표시되는 텍스트에는 명시적으로 스타일을 지정해야 합니다. 사용할 스타일을 선택할 때는 현재 BuildContext의 DefaultTextStyle을 사용하여 기본값을 제공하는 것이 좋습니다. RichText 위젯 에서 텍스트 스타일을 지정하는 방법에 대한 자세한 내용은 TextStyle 설명서를 참조하세요.Text 위젯을 사용하여 .. 2025. 5. 29. Flutter[플러터] / Placeholder 를 사용하여 (플레이스 홀더) Placeholder (Flutter Widget of the Week) Placeholder class다른 위젯이 언젠가 추가될 위치를 나타내는 상자를 그리는 위젯입니다.이 위젯은 인터페이스가 아직 완성되지 않았다는 것을 개발 중에 나타내는 데 유용합니다.기본적으로 플레이스홀더는 컨테이너 크기에 맞게 크기가 조정됩니다. 플레이스홀더가 무한 공간에 있는 경우, 지정된 fallbackWidth 와 fallbackHeight 에 따라 크기가 조정됩니다.https://youtu.be/LPe56fezmoo공식 문서 코드 Placeholder UI를 임시로 구성할 때 사용하는 위젯이다. 즉 개발 중에 아직 완성되지 않은 위젯 자리에 표시용으로 사용한다는 뜻이다. 굉장히 간단하여 사용하기 쉬운데 한번 알아보자.하위 속성속성명타입기본값설명colorColorColor(0xFF455A64)박.. 2025. 5. 28. 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[플러터] / AnimatedIcon 을 사용하여 전환되는 아이콘 제작하기 (자동, 애니메이션, 컨트롤러, AnimationController) AnimatedIcon (Flutter Widget of the Week) AnimatedIcon class애니메이션 진행 상황에 따라 애니메이션 아이콘을 표시합니다.사용 가능한 아이콘은 AnimatedIcons 에 지정되어 있습니다.https://youtu.be/pJcbh8pbvJs공식 문서 코드 웹사이트에서 헤더의 목록 아이콘 같은 것이 회전하면서 캔슬 아이콘으로 바뀌는 것을 경험해본 적 있는가? 이 AnimatedIcon 그 동작을 자체 제공하여 아주 쉽게 만들어주는 위젯이다. (오오 플러터 오오 플러터) 한번 알아보자.하위 속성속성명타입기본값설명iconAnimatedIconData–애니메이션에 사용할 아이콘 데이터progressAnimation–애니메이션의 진행 정도 (AnimationController 사용)colorColor?IconTheme.color아이콘 색상s.. 2025. 5. 25. Flutter[플러터] / InheritedWidget 을 사용하여 데이터 효율적으로 전달하기 (인헤리티드 위젯, 상속, provider) (Flutter Widget of the Week) InheritedWidget class트리 아래로 정보를 효율적으로 전파하는 위젯의 기본 클래스입니다.https://youtu.be/og-vJqLzg2chttps://youtu.be/1t-8rBCGBYw 공식 문서 코드 InheritedWidget 은 위젯 트리에서 데이터를 자식 위젯들에게 효율적으로 전달하기 위해 존재하는 클래스이다. 이 위젯은 다른 위젯들이 데이터를 자동으로 감지하고 리빌드 할 수 있게 도와준다. 한번 알아보자. 일단은 먼저 이 위젯이 왜 필요한지에 대해서부터 알아야 할 것이다.필요성 앱에서 데이터(사용자 정보, 테마 설정, 언어 설정 등)를 여러 위젯들이 공유해야 할 때가 생기기 마련이다. 이럴 때 이 데이터들을 일일이 생성자로 전달하는 건 너무나 비효율적일 것이다. 예제 영상에 설.. 2025. 5. 24. 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. 이전 1 2 3 다음 반응형
