
플러터에서 공식적으로 제공하는 인터페이스를 활용하여 페이지 전환 애니메이션을 커스터마이징하는 방법은 크게 두 가지로 나눌 수 있습니다. PageTransitionsBuilder첫 번째 방법은 PageTransitionsBuilder를 이용하는 것으로, 이를 ThemeData.pageTransitionsTheme에 적용하여 앱 전반의 페이지 전환 애니메이션을 일괄적으로 변경할 수 있습니다. 이 방식은 MaterialPageRoute 등과 같은 기본적인 PageRoute에서 PageTransitionsBuilder를 참조하여 전환 애니메이션을 적용하는 구조를 활용하는 것입니다. 다만, MaterialPageRoute가 아닌 별도의 PageRoute를 사용하는 경우에는 PageTransitionsBuilde..

플러터에서 Android, IOS 스크롤과 관련하여 성능, 유연성을 확보한 위젯과 여러 기능들을 제공하는 패키지를 구현하고 배포하였습니다. flutter_appbar | Flutter packageThis package implements the flexible appbar behavior, And we pursue higher performance and responsiveness than the appbar generally provided by Flutter.pub.dev

구글의 Material 디자인의 클릭 효과를 구현하는 플러터의 기본 내장 위젯인 Inkwell를 이용하여 앱을 구현한다면 마치 구글 Material를 흉내내는 느낌과 비슷한 느낌을 받을 수 있으며 약간 싼(?)티까지 나는 경험을 느낄 수 있습니다. 또한 다양한 제스처와 동작을 구성할 수 없고 다양한 옵션을 통한 커스터마이징도 사실상 불가능합니다. 따라서 2년 전에 저는 기존 Inkwell을 대체하는 위젯을 제작하여 이를 Dart 패키지 형태로 배포하였습니다. 사실상 이 패키지가 이제 버전 2.0.0을 막 넘겼으니, 이제는 안정적인 패키지로 인정받을 시기가 되지 않았나 생각됩니다. 자세한 내용은 아래 링크를 클릭하여 README.md을 참고하세요. flutter_touch_ripple | Flutter ..

플러터에서 애니메이션을 구현하는 기반 클래스는 Ticker입니다. Ticker는 프레임이 업데이트될 때마다 등록한 콜백 함수를 호출하고 프레임이 업데이트되기까지 경과한 시간을 정의해주는 역할을 하는 녀석입니다. 하지만 우리는 대부분 티커의 인스턴스를 직접 생성하지는 않습니다.(물론 인스턴스를 생성하여 사용할 수도 있습니다.) TickerProvider라는 공급자 역할을 하는 클래스에 의해 Ticker를 생성합니다. (아마 Ticker와 관련된 위젯이나 기능들이 dispose되면 자동으로 함께 dispose될 수 있도록하기 위한 관리 용이성 때문인듯 합니다) 위젯 상태 내에서 애니메이션을 구현한다면 주로 SingleTickerProviderStateMixin 또는 TickerProviderStateMixi..

Stateful 위젯은 화면 상에서 사라지거나 위젯 트리 상에 존재하지 않으면(관용적으로 dirty widget이라고 부릅니다.) 위젯의 상태가 Dispose(폐기)되어 아무런 조치를 취하지 않는다면 상태를 유지할 수 없습니다. 해당 위젯을 다시 빌드하려고 한다면 기존에 존재하던 상태가 아니라 초기 값을 지닌 상태를 기반한 위젯이 빌드될 것입니다. 이렇게 되는 원인은 "메모리 관리와 효율성을 위해서"입니다. 모든 위젯의 상태들이 위젯 트리에 없더라도 메모리에서 불필요하게 존재한다면 생각만 해도 이는 굉장히 비효율적인 상황인 것이죠. 하지만 예외의 상황은 항상 있는 법, 이를 방지하는 방법은 매우 간단합니다.위젯의 상태 클래스를 AutomaticKeepAliveClientMixin로 확장하여 이를 해결할 ..

플러터를 시작하시는 분들은 상태가 변화하였다고 프레임워크에 이를 알리기 위해 setState() 함수를 호출합니다. 모든 위젯의 상위 위젯을 RootPage라고 정의하고 여러 페이지를 이동한 상황에서 사용자가 인위적인 방법으로 테마를 다크로 설정하였다면, 최상위 위젯인 RootPage의 setState() 함수를 호출하면 되지 않나라고 간단하게 생각하는 분이 있을 겁니다. 하지만 이러한 방법은 setState() 함수가 호출된 상태만이 업데이트되었다고 알리는 행위이기 때문에 당연히 실패할겁니다.(그 하위 위젯들 모두 상태가 변화했다고 정의하는 것이 아닙니다.) 이는 당연히 비효율적인 빌드를 방지하는 매우 효율적인 기법입니다. 그렇다고 해서 생명주기 함수인 didUpdateWidget() 함수를 오버라이드..
- Total
- Today
- Yesterday
- JavaScript
- 전환 애니메이션
- 팩토리 메서드
- Factory Method
- 안드로이드
- 최적화
- 커스텀 요소
- jetpack compose
- Reflow
- omit
- Flutter
- 플러터
- 디자인 패턴
- TypeScript
- svg
- 타입스크립트
- 터치 효과
- 객체지향
- webpack
- html custom element
- 객체 지향
- pageroute
- android
- 깃허브
- github
- 조건부 타입
- 안드로이드 개발
- web
- 리플 효과
- pagetransitionsbuilder
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |