본문 바로가기

Flutter47

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.

path/to/sdkmanager --install "cmdline-tools;latest" 맥북 설정하다가 저런 에러가 났다 이 에러는 무엇이냐 sdk manager에서 저놈을 설치안해서 생긴일이다 2022. 1. 28.

[Flutter] 카카오 로그인 api 사용하기 1. kakao_flutter_sdk 설치 먼저 하기와 같은 커맨드로 카카오 sdk를 설치 해 준다 flutter pub add kakao_flutter_sk 2. 윈도우 개발자 모드 실행 위 커맨드를 입력하면 아래처럼 개발자모드를 enable 해 달라고 한다 하기 커맨드를 입력하면 윈도우 개발자 모드 설정하는 창이 뜬다. start ms-settings:developers 아래처럼 활성화 시켜 주자 3. Native App 설정 API를 사용하기 위해서 native app에다가 설정을 추가 하여 준다. 하기 링크를 참고하자 안드로이드의 경우 AndroidManifest.xml 파일에 하기 코드를 입력 하여준다 안드로이드 https://developers.kakao.com/docs/latest/ko/ka.. 2021. 12. 24.

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

이전 1 2 3 다음

티스토리툴바