본문 바로가기
반응형

Flutter32

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.
Flutter에서 헬퍼메소드와 클래스위젯 https://www.youtube.com/watch?v=IOyq-eTRhvo 1. 문제상황 우리가 자주 재사용되는 위젯을 따로 코드로 빼 놓을 때 두가지 방법이 있다. 헬퍼메소드 사용(위젯을 리턴하는 함수를 의미) 클래스 위젯을 사용 이 두가지 방법중 뭘 선택해야 할 까? 2. 정답은 클래스 위젯 구글에서 답을 정해줬다. 따로 위젯을 만들라는거다. 이유는 퍼포먼스적인 이슈 때문이라는데.. 내가 추정한 이유는 다음과 같다. 헬퍼 메소드는 setState같은걸 활용할 수 없다. 고로 헬퍼메소드를 사용하면 상위 위젯의 setState에 의지해야 하고, 헬퍼메소드 내에 위젯만 바뀌어야 하는거면, 불필요한 렌더링이 발생한다 const 생성자를 사용할 수 없다. 역시나 불필요한 렌더링을 발생시길 가능성이 있다. .. 2023. 12. 20.
CustomPaint에서 drawPath가 안그려 질 때 1. 문제상황 drawLine은 선이 잘 그려지는데, drawPath를 하면 선이 그려지지 않는다. 2. 문제원인 paint의 style값이 주어지지 않아 생기는 문제이다 3. 해결방법 아래와 같이 PaintStyle.stroke 값을 주면 선이 그어지게된다. Paint bluePaint = Paint() ..style = PaintingStyle.stroke ..color = Colors.blue ..strokeWidth = 5.0; canvas.drawPath(path, bluePaint); 2023. 12. 19.
CustomPainter사용시 주의사항 RepaintBoundary 1. 문제상황 캔버스를 이용하여 A위젯 B위젯 2가지 위젯을 만들었다고 가정하자. A라는 위젯을 다시그리면 B위젯까지 다시 그려지게 된다. 2. 원인 CustomPainter를 사용한 위젯들은 같은 레이어를 사용하기에 발생하는 원인이라고 한다. 한마디로 같은 도화지에 그리니깐, 다른 하나를 다시 그리면 다른놈도 통째로 다시그린다는것. 3. 해결방안 CustomPaint위젯을 RepaintBoundary 위젯으로 감싸주면 된다. 이는 범위 밖의 그림이 다시 그려지는것을 방지해준다. https://stackoverflow.com/questions/66388418/flutter-custompainter-paint-method-gets-called-several-times-instead-of-only-on Fl.. 2023. 12. 19.
Flutter에서 네이티브 뷰 호출하기 https://docs.flutter.dev/platform-integration/android/platform-views Hosting native Android views in your Flutter app with Platform Views Learn how to host native Android views in your Flutter app with Platform Views. docs.flutter.dev 1. 공식문서를 보기 전에 알아야 할 사실 위 링크의 공식문서는 네이티브 뷰를 호스팅하는 내용이다. 허나 한 가지 알아야할 사실이 있다. 저 링크의 내용은 네이티브 액티비티나 뷰 컨트롤러를 호출하는 것이 아닌, 플러터의 액티비티 or 뷰컨트롤러에 네이티브 뷰를 삽입하는 것이다. 한마디로 예를.. 2023. 11. 1.
Flutter개발중 안드로이드 개발자를 위한 iOS에 관한 기초지식들 1. iOS의 개발 방법 2가지 iOS의 경우 현재 개발방법이 2가지가 있다. 1. SwiftUI : Flutter와 마찬가지로 선언형 UI Framework이다 2. StoryBoard : 안드로이드의 xml과 유사한 방식으로 생각하면 된다. 명령형 UI 이다. 안드로이드 xml과 크게 다른점은, xml작성이 아닌 파워포인트 만드는것 처럼 UI를 만든다. 스토리보드에서는 하기개념을 알아야 한다 UIViewController UIView UIControl 위에서 중요한개념은 View Controller와 View이다. View Contoller는 대충 안드로이드의 액티비티라고 생각하면 된다 View의 경우 TextView 같이 자잘한 놈들이다. Control의 경우 EditText처럼 입력 가능한 놈들이.. 2023. 11. 1.
Flutter에서 long running isolate 사용하기 https://dart.dev/language/concurrency Concurrency in Dart Use isolates to enable parallel code execution on multiple processor cores. dart.dev 1. 단일 작업을 위한 Isolate 기본적으로 Isolate.run()을 사용하면 Isolate를 하나 만들어준뒤, 전달해준 함수를 실행해주고, 함수가 값을 리턴하면 result값을 받아와준다. 작업이 종료되면 Isolate를 종료한다. 이때 한가지 기억할건, 결과값은 메모리로 전달된다. 데이터를 카피하지 않음 void main() async { final result = await Isolate.run(_MyFuction); // 데이터 사용. pr.. 2023. 10. 25.
cloud_firestore 추가 후 빌드속도 향상시키기 https://firebase.flutter.dev/docs/firestore/overview Cloud Firestore | FlutterFire This page is archived and might not reflect the latest version of the firebase.flutter.dev 공식문서에서 나온 내용이다. flutter_ios_sdk의 경우 라이브러리가 드럽게 연결이 많이 되어서 한번 추가하면 빌드타임이 5분이나 걸린다고 한다. 이를 해결해주는 방법은 podfile에 아래 코드를 추가하는것이다. pod 'FirebaseFirestore', :git => 'https://github.com/invertase/firestore-ios-sdk-frameworks.git', :t.. 2023. 10. 20.
Module 'cloud_firestore' not found 파이어베이스 연동하다가 저런 에러가 떳다. iOS개발 경험이 적은 나에게 어려웠던 문제... 구글링해서 flutter clean하고 다시 get하고 해도 되지를 않았다. 그러다가 결국 해결책을 찾았는데, xcode에서 xcworkspace를 열어 빌드를 하면 해결되는것이였다. 주의할점은 xcodeproj가 아니라 xcworkspace를 열어야 한다는 점. 차이점은 xcworkspace의 경우 코코아팟을 이용해 외부라이브러리를 사용할 때 이런 외부 의존성을 관리 어쩌구 저쩌구. 고로 플러터를 할 때 xcworkspace를 열어주도록 하자 2023. 10. 20.
초간단 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.
플러터 코드 가독성 익숙해지기(네스팅 지옥) 최근 들어 플러터를 다시 공부하기로 마음먹었다. 앞으로 나올 퓨시아OS와 Matter OS가 스마트폰이 처음나올 때 만큼은 아니지만 큰 지각변동을 일으킬거라는 예상이 들었기 때문. 다시 공부하려니깐 플러터의 토나오는 코드 가독성때문에 몇 가지 팁을 소개하려 한다 처음에는 제목을 플러터 코드 가독성 향상법 이렇게 적을라 했는데... 생각해보니 그런게 있을리가 없다. 그냥 익숙해질 수 밖에 1. 괄호 꼬이는 문제 해결 방법 플러터를 하다보면 아래와 같은 상황이 발생한다 저놈의 ]) 괄호들이 꼬이기 시작하고 서로 껴안고 뽀뽀하고 떨어지기 싫어하는 문제이다. 이 문제를 해결하면 다음과 같이 해결하면 된다 항상 리스트의 끝이나 괄호의 마지막 부분에 콤마를 넣는 습관을 기르자! 가령 var a = [ 1, 2, 3.. 2023. 1. 26.
[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.
반응형

티스토리툴바