개발노트

http 패키지 Flutter에서 네트워크 요청을 보내고 받는 데 사용되는 가장 일반적인 패키지 중 하나가 http 패키지입니다. 이 패키지는 HTTP 요청을 만들고 응답을 처리하는 데 도움이 되는 다양한 클래스와 함수를 제공합니다. HTTP 패키지의 주요 특징 간단한 인터페이스: http 패키지는 간단한 API를 제공하여 HTTP 요청을 쉽게 생성하고 수행할 수 있습니다. 이를 통해 개발자는 쉽게 네트워크 요청을 관리할 수 있습니다. 비동기 지원: 대부분의 네트워크 작업은 비동기적으로 처리되므로 http 패키지는 Future 기반 API를 제공하여 비동기 코드 작성을 간단하게 해줍니다. 이를 통해 UI를 차단하지 않고 네트워크 요청을 수행할 수 있습니다. HTTP 요청 설정: http 패키지를 사용하면..

- 날짜 연산 패키지: https://pub.dev/packages/jiffy - 액체같은 Swiper 효과: https://pub.dev/packages/liquid_swipe 사용해보니 생각보다 자연스럽고, 이전 페이지 위에 다음 페이지가 바로 생성되는 부분이 좋았습니다. - 간단한 Card Swiper: https://pub.dev/packages/appinio_swiper - 반응형 Scaffold: https://pub.dev/packages/flutter_adaptive_scaffold - 손쉽게 Sheet를 만들어줌: https://pub.dev/packages/wolt_modal_sheet - 영상에 필터를 걸거나 텍스쳐 효과를 줌(빗물, 3D효과, 파장 등): https://pub.dev..

MediaQuery.of(context).size 는 BuildContext 형인 context가 필요합니다. 따라서 위 코드는 BuildContext 를 제공하는 build안에서만 사용이 가능합니다. - 해결방법: BuildContext가 없이 기기의 size를 가져오기 위해서는 MediaQueryData를 사용하면됩니다. import 'package:flutter/material.dart'; class DeviceSize { static final deviceWidth = MediaQueryData.fromView( WidgetsBinding.instance.platformDispatcher.views.single) .size .width; static final deviceHeight = Media..

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

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..