반응형 Flutter24 연속적인 애니메이션을 만드는 방법 1. Interval을 이용하는 방법 CurvedAnimation을 만들 때 Interval값을 주면 Parent 의 애니메이션 기간에 어떤 부분에서 애니메이션이 실행되고 종료될 지 결정할 수 있다. 2. TweenSequence를 이용하는 방법 https://api.flutter.dev/flutter/animation/TweenSequence-class.html TweenSequence class - animation library - Dart APIEnables creating an Animation whose value is defined by a sequence of Tweens. Each TweenSequenceItem has a weight that defines its percentage .. 2024. 8. 22. 애니메이션을 주고싶은데 자식위젯이 너무 많을 때 셀프로 애니메이션을 만들다가 간혹 내가 리빌드할 위젯이 자식위젯이 너무 많이 딸려 있을 때가 있다. 이럴때는 어떻게 해야 할 까? 정답은 AnimatedBuilder를 이용하는 것이다. AnimatedBuilder에는 child 항목이 있는데 여기에 리빌드 되지 않을 위젯을 넣으면 재활용이 가능하다. 또 한가지의 팁은 Listenable에 관한 것이다. 내가 어떤 이벤트를 받을 때 플러터에서 제공하는 대부분의 그러한 클래스들은 Listenable을 상속할 가능성이 높다. 여기서 중요한건 Listenable은 AnimatedWidget에 활용이 가능하다는 점이다!!! 고로 내가 받아올 이벤트가 Listenable과 연관되어 있다면 AnimatedBuilder를 이용하는걸 고려해보자 2024. 7. 11. SliverAppBar에 Sliver 겹치는 방법 결론부터 말하면 안된다. 찾아봤는데 방법이 없다 아니 그럼 어쩌라고? 해결방법은 직접 구현하는 것이다. 하는 방법은 다음과 같다 1. Stack위젯을 만든다2. SliverAppBar에 해당되는 부분을 Container로 만든다3. SingleChildScrollView를 그 위에 덮는다4. 스크롤뷰 탑에다가 패딩을 왕창 물려줘서 AppBar부분 밑까지 내려준다5. ScrollController를 하나 만들어 스크롤뷰에 물려준다 여기서 한가지 중요한 부분이 있다. ScrollController는 Listenable이다 !!! 한마디로 AnimatedBuilder를 사용할 수 있다는것!!! AnimatedBuilder의 장점은 child를 이용해 위젯트리 중간에 위젯만 리빌드하면서 애니.. 2024. 7. 11. AnimatedSwitcher가 동작하지 않을 때 해결방법 https://stackoverflow.com/questions/57548253/animatedswitcher-not-working-as-intended-widget-changing-but-no-animation AnimatedSwitcher not working as intended? Widget changing but no animation Goal: Press a button and have it switch to another page with an animated transition. For that, I'm using AnimatedSwitcher. Below is my code: class WelcomeScreenSwitcher extends State 2024. 1. 3. 초간단 Flutter Method Channel 배우기 https://docs.flutter.dev/platform-integration/platform-channels Writing custom platform-specific code Learn how to write custom platform-specific code in your app. docs.flutter.dev 1. 메소드 채널이란? 플러터에서 native code(android, ios)를 동작하고 싶을 때 사용하는 인터페이스이다. 2. 어떻게 만드는데? 먼저 flutter 코드에 아래와 같이 methodChannel을 생성한다. 생성할 때 채널이름을 넘겨준다. 그리고 채널을 통해 네이티브 메소드를 호출한다. 이때 method호출은 async/await를 지원한다. static const c.. 2023. 9. 12. [Flutter] Android Studio vs VScode 어느 게 좋을까 1. 개요 구글은 공식적으로 플러터 ide로 Android Studio와 VScode를 권장하고 있다. 그럼 둘 중 뭘 쓰는게 좋을 까? 2. 두 IDE의 장단점 구글링으로 찾아본 결과 다음 내용이 대표적인 내용이다. Visual Studio Code Android Studio보다 훨씬 가볍게 돌아간다 강력한 익스텐션들이 있다 AndroidStudio 상대적으로 VScode보다 무겁다 노트북사용시 팬이 주구장창 돌아갈 확률이 높고 발열을 일으킬 가능성이 있다 VSCode와 다르게 찐 IDE이기에 환경설정이 용이하다 아무튼 찾아보면 저 내용으로만 주구장창 싸우는 내용밖에 없음... 하지만 나는 Android Studio를 추천한다 사실 원래 처음에는 vscode로 시작했었다. 안드스튜보다 훨씬 가볍기 때문.. 2022. 6. 10. [Dart] non nullable 변수의 초기화 시기 https://dart.dev/null-safety/understanding-null-safety Understanding null safety A deep dive into Dart language and library changes related to null safety. dart.dev 공식문서 null safety의 이해에서 발췌, Uninitialized variables항목 참고 1. 개요 Dart의 non nullable 변수는 사용전에 반드시 초기화 해 주어야 한다. 그런데 코드를 작성하다보면 사용전에만 초기화 하면 될 줄 알았는데 어떤 경우에는 선언과 동시에 초기화를 해야하는 경우가 있다. 어떨때는 나중에 초기화해도 되고, 어떨때는 반드시 선언과 동시에 초기화 해야하는데 이 문서는 이를.. 2022. 6. 10. [Dart] late변수 사용 시기, nullable변수와의 차이 https://dart.dev/null-safety/understanding-null-safety#smarter-null-aware-methods Understanding null safety A deep dive into Dart language and library changes related to null safety. dart.dev 해당 블로그 내용은 null safety에 대한 이해에서 발췌 해 왔음 1. 개요 다트에서는 late변수를 제공한다. late변수를 사용하면 non-nullable변수의 초기화를 나중에 할 수 있다. 헌데 한가지 의문점이 있다. 변수의 자료형을 nullable로 선언해도 나중에 초기화를 할 수 있으니 그냥 nullable을 쓰면 되지 왜 굳이 구글은 late라는 키워.. 2022. 6. 9. [Dart] Type Promotion이란 1. Type Promotion이란? Dart의 flow Analysis는 nullability까지 분석한다. 여기서 만약 Dart의 코드분석이 nullable변수인데 절대 null값을 가질 수 없는 변수를 발견한다면, Dart는 이 nullable변수를 non-nullable로 취급한다. 2. 예제 Definite Assignment 다트의 코드분석은 변수가 언제 선언되고,어디서 읽히는지 까지 추적한다. 그리고 non-nullalble변수가 사용되기전에 값을 할당 받았는지 까지 추적이 가능하다. 이러한 추적 과정을 Definite Assignment라고 한다. 아래의 케이스에서는 text가 사용되기전에 값을 할당받지 못했다. 고로 Dart에서는 이를 추적하여 error를 일으켜 개발자에게 알려준다. v.. 2022. 6. 8. path/to/sdkmanager --install "cmdline-tools;latest" 맥북 설정하다가 저런 에러가 났다 이 에러는 무엇이냐 sdk manager에서 저놈을 설치안해서 생긴일이다 2022. 1. 28. [Flutter] Sliver app bar 배우기 https://docs.flutter.dev/cookbook/lists/floating-app-bar Place a floating app bar above a list How to place a floating app bar above a list. docs.flutter.dev 1. SliverAppBar란? 앱의 스크롤에따라 모양이 변하는 app bar를 말한다. SliverAppBar를 만드는 방법은 다음 세줄로 요약된다 CustomScrollView를 만든다. SliverAppBar를 만든다 SliverList를 만든다 여기서 Sliver란 CustomScrollView를 만들때 CustomScrollView의 하위항목으로 제공되는 scrollable한 위젯들을 Sliver라고 한다. Slive.. 2021. 12. 21. [Flutter] Inherited Widget 배우기 1. Inherited Widget을 쓰는 이유 먼저 문제상황부터 인식합시다. Root 위젯에 어떠한 데이터(state)가 있다고 가정합시다. 그리고 가장 아래에 있는 주황색 위젯에서 이를 필요로 합니다. 그럼 주황색 위젯에 이 데이터(state)를 넘겨주기 위해 중간과정의 모든 위젯의 생성자에 state 데이터를 뚫어주어야 겠지요. 상당히 귀찮은 일입니다. 생성자에 하나한 데이터를 뚫어주는게 귀찮아서 모든 위젯을 하나의 build메소드에 묶는건 어떨가요? state값이 바뀌면 주황색 위젯만 바뀌면 되는데 필요없는 중간과정의 위젯들까지 rebuild 됩니다. 성능저하의 문제가 생기겠지요. 그래서 나온 해결책이 바로 Inherited 위젯입니다. 가장 위젯트리 최상단에 Inherited 위젯을 놓고 데이터.. 2021. 12. 16. [Flutter] Matrix4 이해하기 https://medium.com/flutter-community/advanced-flutter-matrix4-and-perspective-transformations-a79404a0d828 Advanced Flutter: Matrix4 And Perspective Transformations Demystifying Matrix4 and utilising the full power of the Transform Widget medium.com https://medium.com/flutter/perspective-on-flutter-6f832f4d912e Perspective on Flutter Fun with 3D and the Transform widget medium.com 상기내용을 기반으로 정리하.. 2021. 12. 15. [Flutter] BuildContext 와 of 함수 https://api.flutter.dev/flutter/material/Scaffold/of.html of method - Scaffold class - material library - Dart API ScaffoldState of(BuildContext context ) Finds the ScaffoldState from the closest instance of this class that encloses the given context. If no instance of this class encloses the given context, will cause an assert in debug mode, and throw an exception in api.flutter.dev https://api.. 2021. 12. 14. [Flutter] state 관리와 provider https://docs.flutter.dev/development/data-and-backend/state-mgmt/declarative Start thinking declaratively How to think about declarative programming. docs.flutter.dev 해당 문서는 플러터 공식 문서를 기반으로 작성합니다. 0. 개요 본 문서는 Flutter의 UI의 기본적인 개념과 App State에 대한 정의를 익힌 뒤 State관리를 위한 Provider 사용법에 대해 배울 예정입니다. 1. Declarative UI에 대한 소개 먼저 소개해 드릴 내용은 Declarative 라는 개념입 니다. 플러터는 기본적으로 Declarative style 프레임 워크입니다. 다른 .. 2021. 12. 14. [Flutter] floating bottom navigation bar 만들기 bottom navigation bar에 shadow를 주었더니 그림자가 잘리는 현상이 발생했다. bottom navigation bar가 차지하는 영역이 자기주장을 확실하게 하니 뒷배경이 안보여 상당히 허접해보인다. 이를 해결하는 방법은 scaffold에 extendBody = true 를 주면 된다. return Scaffold( extendBody: true, 2021. 11. 30. [Flutter] Animation 이해하기 0. Animation의 대표적인 컨셉 한마디로 요약하면 위젯의 특정 속성 값을 계속 변화시키며 rebuild 하는것! 애니메이션은 value change를 가진다. 즉 어떤 값이 start에서 end로 변화한다. 이 값의 변화를 위젯의 특정속성에다가 부여하면 플러터는 계속해서 이를 rebuild 하게 된다. 그러므로 움직이는것 처럼 보이게 되는 것이다. 이러한 값 변화는 impicit에서는 Tween을 이용하고 explicit에선 AnimationController를 이용하게 된다. 1. implicit, explicit 애니메이션의 종류에는 크게 두가지가 있다. implicit, explicit implicit animation은 속성값을 변화시키면 자기가 알아서 애니메이션을 만들어준다. 만약 애니메.. 2021. 11. 26. [Flutter] BorderRadius 가 child에 적용이 안될 때 아래 그림처럼 Container에 둥근 모서리를 적용했는데 child가 튀어나오는 경우가 있다. 이를 해결하는 방법은 child를 ClipRRect로 감싸주어 똑같은 raidus값을 적용해주면 된다. 2021. 11. 25. [Flutter] 화면 터치하면 키보드 unfocus 되도록 만들기 1. 위젯 전체를 GestureDetector 위젯으로 wrapping 한다 2. onTab에 FocusScope.of(context).unfocus(); 문을 넣는다. GestureDetector( onTap: () { FocusScope.of(context).unfocus(); }, 2021. 11. 11. [Dart] var과 dynamic var 과 dynamic var은 타입추론이 가능합니다. 허나 한번 타입추론을 수행하면 이후 타입변경이 불가능 합니다. var a= 123; //a = "456"; // error! dynamic은 var과 같이 타입추론이 가능한 변수입니다. 타입이 정해져도 이후 타입변경이 가능합니다. dynamic a = 123 a = "456"; // OK 2021. 10. 15. 이전 1 2 다음 반응형
