반응형 Flutter43 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. [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. 이전 1 2 3 다음 반응형
