개발노트

flutter_animate flutter_animate 패키지는 Flutter 애플리케이션에서 애니메이션을 쉽게 적용할 수 있도록 도와주는 패키지입니다. 이 패키지는 다양한 애니메이션 효과를 제공하며, 간편한 구문을 사용하여 애니메이션을 구현할 수 있습니다. flutter_animate 패키지의 주요 특징은 다음과 같습니다: 다양한 애니메이션 효과: 패키지는 여러 가지 애니메이션 효과를 제공합니다. 이 효과들은 Fade, Scale, Rotate, Flip 등의 기본적인 애니메이션부터 Pulse, Shake, Wiggle과 같은 고급 애니메이션까지 다양합니다. 간편한 구문: 애니메이션을 구현할 때 간편한 구문을 제공하여 개발자가 복잡한 애니메이션 코드를 작성하지 않아도 되도록 합니다. 이로써 애니메이션..

animations Flutter 애니메이션을 관리하고 제어하는 데 도움이 되는 다양한 패키지가 있습니다. 그 중 하나가 animations 패키지입니다. 이 패키지는 다양한 애니메이션 효과와 전환을 구현하는 데 사용될 수 있습니다. animations 패키지는 Flutter의 기본적인 애니메이션을 보완하고 확장하여 더 많은 제어와 유연성을 제공합니다. animations 패키지의 주요 기능은 다음과 같습니다: 다양한 애니메이션 효과 제공: 패키지에는 페이드 인/아웃, 슬라이드, 크기 조절 등 다양한 애니메이션 효과를 구현하는 위젯이 포함되어 있습니다. 전환 애니메이션 제공: 페이지 전환 애니메이션, 위젯 간의 전환 효과 등을 구현할 수 있습니다. 이를 통해 사용자 경험을 향상시키고 애플리케이션의 전체적..

RIVE RIVE는 Lottie 와 비슷한 패키지로, 움직이는 애니메이션을 제공합니다. 특정 행동에서의 애니메이션 혹은, Input의 값을 변환켜 한가지가 아닌 여러가지 동작을 할 수 있게 만들어줍니다. 즉, RIVE의 가장 큰 특징은 사용자의 조작에 따라 상호작용이 가능한 애니메이션을 구현할 수 있습니다. 구현 목표. RIVE 에 있는 정답곰(정답, 오답에 반응하는 곰) 을 버튼 클릭으로 움직이게 만들어봅니다. 정답 곰은 State 의 Input을 2개(Correct, Incorrect) 가지고 있으며, 2가지 Input 을 전달하는 버튼을 각각 구현합니다. State 가 변했을 때 SnackBar에 stateMachineName 과 stateName이 표시되도록 구현합니다. 1. Flutter 프로젝..

CurvedAnimation CurvedAnimation: CurvedAnimation 클래스는 다른 애니메이션에 사용되는 애니메이션 커브를 적용하여 애니메이션의 진행 속도를 조절합니다. 주어진 커브 함수를 통해 애니메이션이 시작되거나 끝날 때의 변화량을 조정하여 부드럽게 애니메이션을 진행시킵니다. 이 클래스는 주로 트윈(Tween) 애니메이션과 함께 사용되며, 특히 시작과 끝 사이의 애니메이션을 더 부드럽게 만들어주는 데 유용합니다. CurvedAnimation은 Animation 클래스를 상속하며, 주로 AnimationController의 drive() 메서드를 통해 사용됩니다. Interval Interval: Interval 클래스는 애니메이션의 특정 구간을 지정하는 데 사용됩니다. 일반적으로 ..

ValueListenableBuilder ValueListenableBuilder는 Flutter 프레임워크에서 제공하는 위젯 중 하나로, 값이 변경될 때마다 자동으로 UI를 갱신하는 데 사용됩니다. 이 위젯은 값이 변경될 때마다 새로운 위젯 트리를 생성하는 대신 기존의 위젯 트리를 업데이트하여 효율적으로 화면을 갱신합니다. ValueListenableBuilder는 세 가지 중요한 매개변수를 갖습니다: valueListenable: 값을 감시하는 ValueListenable입니다. 이 값이 변경될 때마다 ValueListenableBuilder는 자동으로 자식 위젯을 재빌드합니다. builder: 실제 위젯 트리를 생성하는 데 사용되는 빌더 함수입니다. 이 빌더 함수는 값이 변경될 때마다 호출되며, 현..

AnimatedSwitcher 를 PageView와 함께 사용하여 PageView의 Page가 변할 때마다 배경의 색도 동일하게 변하는 화면을 만들어봅니다. AnimatedSwitcher는 child 속성에 지정된 자식 위젯의 변화를 감지하여 해당 자식 위젯이 변경되었을 때만 애니메이션을 적용합니다. 이를 위해 자식 위젯이 변경되었음을 AnimatedSwitcher에 알려주는 것이 중요합니다. 기존의 key가 변하지 않으면 Flutter는 해당 위젯을 다시 빌드하지 않습니다. 따라서 자식 위젯의 key 속성을 변경하여 Flutter에게 새로운 위젯임을 알려주는 것이 필요합니다. 기존의 key가 변하지않을 경우, 새로 리빌드하지않기 때문에 자식 위젯의 key속성에 ValueKey를 사용하여 key를 변환시..

애니메이션 조합으로 아래와 같이 카드 스윕, 드래그 기능을 만들어보겠습니다. (소스 작성 숙달을 위해 소스 캡슐화 대신 하나하나 입력해보았습니다.) 준비사항. 1. 프로젝트에 assets 폴더를 생성하고 그안에 카드 이미지로 사용될 jpg 파일을 넣습니다. *index에 따라 불러올 수 있도록 이름은 1,2,3,4와 같은 숫자로 해줍니다. 2. 프로젝트에서 assets폴더를 인식할 수 있게 끔 pubspec.yaml에 flutter: 속성에 - asswets/ 를 추가해줍니다. 예시 소스(전체) import 'dart:math'; import 'package:flutter/material.dart'; class SwipingCardsScreen extends StatefulWidget { static S..

CustomPainter CustomPainter는 Flutter 프레임워크에서 사용자 지정 그래픽을 그리는 데 사용되는 클래스입니다. 이 클래스를 사용하면 사용자가 직접 화면에 그래픽을 그릴 수 있습니다. CustomPainter를 사용하면 사용자 지정 그래픽을 그리기 위해 주어진 화면 영역에 대한 접근이 가능합니다. CustomPainter를 사용하는 일반적인 프로세스는 다음과 같습니다: CustomPainter 클래스 구현: 사용자 정의 그래픽을 그리기 위해 CustomPainter 클래스를 확장하여 사용자 지정 그래픽을 정의합니다. CustomPainter 클래스는 paint() 메서드를 구현해야 합니다. 이 메서드에서 그래픽을 그립니다. CustomPainter 인스턴스 생성: CustomPai..

ValueListenableBuilder ValueListenableBuilder는 Flutter의 위젯 중 하나로, ValueNotifier 또는 이와 유사한 클래스의 값이 변경될 때 UI를 다시 빌드합니다. 이 위젯은 주어진 ValueNotifier를 감시하고, 해당 ValueNotifier의 값이 변경될 때마다 builder 함수를 호출하여 새로운 위젯을 생성합니다. 일반적으로 ValueListenableBuilder는 다음과 같은 상황에서 사용됩니다: 값의 변화를 감시하고 UI를 업데이트할 때: 예를 들어, 애니메이션의 진행률을 나타내는 ValueNotifier를 사용하여 ValueListenableBuilder를 생성하면, 애니메이션의 진행률이 변경될 때마다 Slider나 Progress Ind..

CurvedAnimation Curve 적용: **CurvedAnimation**은 애니메이션을 제어하는데 사용되는 Animation 객체와 **Curve**를 인자로 받습니다. **Curve**는 애니메이션의 진행을 제어하는데 사용되며, 일반적으로 Curves 클래스에서 제공되는 미리 정의된 커브를 사용합니다. 보간(Interpolation): **CurvedAnimation**은 주어진 **Curve**에 따라 애니메이션 값의 보간을 조절합니다. 예를 들어, **Curves.easeIn**을 사용하면 애니메이션은 천천히 시작하여 점차 속도를 증가시킵니다. 애니메이션 제어: **CurvedAnimation**은 **AnimationController**와 함께 사용하여 애니메이션을 제어합니다. 이를 통..