반응형 Flutter43 GestureDetector 텅빈영역 터치 감지하기 플러터를 하다보면 터치를 주었는데 텅빈영역에서 터치가 안되어서 사용감에 불편을 주는 경우가 많다. 가령 spacer같은 애들... 이를 해결하려면 behavior에 opaque 옵션을 주면 된다. GestureDetector( behavior: HitTestBehavior.opaque, // 빈 공간도 터치 감지 onTap: () { print("Tapped!"); }, child: Text("Tap me!"),), 2025. 1. 9. ios에서 크래시가 났을때 분석방법 product -> scheme -> edit scheme에서 diagnostics탭에 Address Sanitizer를 클릭하면ASan이 돌게 된다. 이 옵션을 활성화 하면 앱이 죽었을 때 코드위치도 깔끔하게 나옴 https://developer.apple.com/documentation/xcode/diagnosing-memory-thread-and-crash-issues-early Diagnosing memory, thread, and crash issues early | Apple Developer DocumentationIdentify runtime crashes and undefined behaviors in your app during testing using Xcode’s sanitizer.. 2025. 1. 2. dynamic사용시 주의점 네이티브에서 플러터쪽으로 함수를 호출했는데 불리지를 않는다. 함수 호출전 까지 갔는데 함수만 안불린다. 이해할수가 없는 현상. 원인은 dynamic이였다. 클래스 안에 있는 메소드에 dynamic을 인풋으로 넣었는데 타입이 안맞아서 함수를 못찾아 불리지 않았다. 별다른 로그도 없고 함수만 안불려서 도대체 뭔가 싶었는데 참 어려운 이슈였음. 따로 다트패드에서 다른방식으로 재현해보니 거긴 로그가 찍히던데 이상하네.. 2024. 12. 31. bloc에서 copyWith을 직접만들면 안되는 이유 흔히보는 copyWith의 코드는 아래와 같다.이 코드의 문제점은 어떤 값을 명시적으로 null로 하고 싶은데 null이 되지 않는다.void main() { User user = User(name: "abc", age:34); print("${user.name} ${user.age}"); user.copyWith(name:null); print("${user.name} ${user.age}"); }class User { final String? name; final int? age; User({this.name, this.age}); User copyWith({ String? name, int? age, }) { return User( name: name .. 2024. 12. 30. flutter gpu 예제 분석 https://github.com/bdero/flutter-gpu-examples GitHub - bdero/flutter-gpu-examplesContribute to bdero/flutter-gpu-examples development by creating an account on GitHub.github.com https://medium.com/flutter/getting-started-with-flutter-gpu-f33d497b7c11 flutter에서 gpu 코드 지원이 가능해졌다고 한다. 관련 내용에 대한 공식사이트 블로그를 보고 예제가 작동이 안되어서 작성자의 깃허브에 들어가 예제코드를 보고 분석하기로 하였다. 간단한 잡지식들GPU 사용법인 초보인 나에게 대충 돌아가는 원리를.. 2024. 9. 11. 연속적인 애니메이션을 만드는 방법 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. Bloc에서 event를 await 하는 방법 그런거 없다 하지만 다른 방법은 있다. 바로 callback 을 사용하면 된다. bloc에서 이벤트를 await 하고 싶은 목적은 아마 state 변경 이벤트를 날리고 이후 변경된 state를 이용하여 무언가를 하기 위한 것 일 것이다. 답은 간단하다. state 를 emit 한 후 콜백을 이용하여 이후 작업을 마저 수행해주면 된다. final class MyEvent extends StudyEvent { void Function()? callback; StopStudyEvent({ this.callback, });} myBloc.add(MyEvent( callback: () async { 하고싶은일 적으면 된다 } })); 이렇게 이벤트에 콜백을 받아와.. 2024. 8. 14. Child가 Rebuild 되지 않도록 하는 원리 플러터의 위젯을 보다보면 어떤 위젯들은 리빌드 될 때 child라는 변수를 받아서 리빌드가 되더라도 child 부분은 리빌드되지 않도록 재활용 한다. 이 원리가 궁금해서 ListenableBuilder를 분석해보았다 위 코드를 보면 이 위젯은 child를 생성자에 받아서 빌더 메소드에 활용한다.빌더 메소드의 정의를 보면 다음과 같다. 여기서 우리가 알 수 있는건, 빌더 메소드는 그저 위젯을 리턴하는 평범한 함수이다. 그리고 child를 받아 이를 위젯만드는데 활용하고 있다. 간단하게 정리하자면, A라는 위젯이 외부에서 만들어진 B라는 위젯을 생성자에서 받아, 이를 빌드 메소드에 사용한다면. 이때 리빌드 되더라도 B는 다시 리빌드 되지 않는다. 걍 한마디로 외부에서 만들어서 넘겨주면 재활용이 .. 2024. 7. 23. 위젯트리에서 중간에있는 위젯만 리빌드 하고 싶을 때 이전에 적은 AnimatedBuilder와 동일한 내용이다. AnimatedBuilder의 상속관계를 보면 ListenableBuilder를 볼 수 있다. 여기서 ListenableBuidler 코드를 확인해보면 똑같이 child를 가짐을 알 수 있다. 고로 Listenable Builder와 ValueNotifier를 조합한 뒤 재활용을 할 때 child를 이용하면 위젯트리의 중간만 리빌드 할 수 있게된다 2024. 7. 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. freezed 왜씀? dart data class를 사용하자! 1. Dart Data Class란? https://github.com/andrasferenczi/dart-data-plugin GitHub - andrasferenczi/dart-data-plugin: IDEA plugin for generating utility methods for Dart data classes IDEA plugin for generating utility methods for Dart data classes - andrasferenczi/dart-data-plugin github.com flutter에서 json 관련 클래스를 만드는건 아주 귀찮습니다. 이에 freezed를 많이 사용하는데요.. 사실 이 패키지도 몹시 불편합니다. 보일러플레이트 코드를 작성하고 거기다가 코드 제너.. 2024. 4. 16. CustomPainter를 redraw 하는 방법 https://api.flutter.dev/flutter/rendering/CustomPainter-class.html CustomPainter class - rendering library - Dart API The interface used by CustomPaint (in the widgets library) and RenderCustomPaint (in the rendering library). To implement a custom painter, either subclass or implement this interface to define your custom paint delegate. CustomPainter subclasses must impl api.flutter.dev 공식문서에서는.. 2024. 3. 15. 덩치가 커진 위젯의 rebuild 플러터를 하다보면 하나의 위젯이 덩치가 어마어마하게 커지는 경우가 있다. 이때 setState를 하면 어마어마한 퍼포먼스 문제를 야기한다. 헌데 위젯을 하나하나 따로 빼서 끊어주고 생성자 뚫고 해주는게 여간 쉬운일이 아니다. 이럴 때 사용하는 팁을 적어본다 1. 프로파이더 사용 너무나 당연한 얘기이지만 프로바이더를 사용하면 커다란 빌드 함수 안에서 특정 위젯만 리빌드 할 수 있다. 다만 코드 작성하기가 여간 귀찮다 2. 스트림 컨트롤러와 스트림 빌더 사용 가장 쉬운 방법이다. 특정부분만 리빌드 하고 싶은 부분을 스트림 빌더로 감싸준다. 그리고 스트림컨트롤러르 생성한 뒤 스트림을 스트림빌더에만 내려준다. 즉 특정부분만 setState 하는 효과를 가지게 된다. 3. ChangeNotifier와 Listen.. 2024. 3. 8. iOS에서 상하단에 색이 생길 때 해결방법 1. 문제의 원인 아주 간단하다. Scaffold 바로 위에 SafeArea를 설정하면 아이폰에서 상하단에 흰색이나 검은색이 생긴다 2. 해결방법 SafeArea를 body로 옮겨주자 2024. 2. 3. PageRouteBuilder에서 iOS backSwipe가 안될 때 https://github.com/flutter/flutter/issues/47441 Cupertino back gesture are disabled when using PageRouteBuilder · Issue #47441 · flutter/flutter Use case I am using PageRouteBuilder to add fade transition to some of my routes. I've noticed however that the swipe to go back on IOS is not working when doing so! Which is something I'm used to ... github.com 1. 문제점 PageRouteBuider를 이용해 화면전환시 애니메이션을 .. 2024. 2. 3. Bottom에서 Pull to refresh하기 방법을 찾아보다가 결론은 직접 만들어서 써야 한다. 아이디어는 다음과 같다. 스크롤 컨트롤러의 position값을 추적해 offset을 구한다 offset을 0에서 1.1 사이로 nomarlize한다 refresh indicator를 partially하게 0.1단위 간격으로 값을 보내어 위젯을 다시 그리도록 한다 1.1이 될 경우 데이터를 불러오고 refresh indicaotr를 full로 그린다. 대충 코드로 설명하는게 편할듯 먼저 일단 나의 위젯이 사이즈가 너무 커져서 그냥 setState할경우 디버그모드에서 버벅이는게 보였다. 고로 하위 위젯만 rebuild 될 수 있도록 StreamController와 StreamBuilder를 활용하기로 하였다. double _bounceProgress = 0.. 2024. 1. 31. Flutter와 파이어베이스로 게시판 만들때 부딪힌 경험들 게시판 만들 일이 있어서 flutter와 파이어베이스로 만들고 있다. 직접 처음부터 전부 만들어보니 생각보다 많이 어렵다. 게시판 만들 때 이렇게나 많은 것들을 고려해야 할 줄 누가 알았을 까... 아래는 개발하면서 부딪힌 문제들 1. 제목과 내용의 데이터는 분리해야 한다 어찌보면 너무 당연한 내용이다. 제목은 짧고, 내용은 크다. 두 데이터를 한꺼번에 묶는다면 쿼리하는데 속도 문제가 생길 것 이다. 그러면 어떻게 해결할 것 인가? 정답은 내용을 subCollection으로 두는것 이다. 파이어베이스는 doc을 가져올 때 doc 안에 subCollection이 있다면, 이 subCollection안의 데이터는 가져오지 않는다. subCollection안에 데이터까지 가져오면 쿼리 속도에 문제가 생기기 때.. 2024. 1. 25. Delay가 있는 TweenAnimationBuilder 관련된 위젯이 없는거 같아서 직접 만들어 보았다. 패키지도 있던데 어렵지도 않은거 굳이 패키지로? 아이디어는 다음과 같다. delay + duration 만큼 애니메이션 시간을 늘린다 delay 비율을 계산하고 그 비율만큼은 위젯의 투명도를 0으로 하여 보이지 않게 한다 delay시간이 지나면 그때부터 애니메이션을 시작한다. 애니메이션 값에 delay비율만큼 뺀 다음 범위를 0에서 1로 노말라이즈 해 준다 @override Widget build(BuildContext context) { double delayRatio = delay.inMilliseconds == 0 ? 0 : delay.inMilliseconds.toDouble() / (delay.inMilliseconds.toDouble() + d.. 2024. 1. 5. 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. 이전 1 2 3 다음 반응형
