본문 바로가기

Flutter12

[Flutter/Xcode] 여러 타겟 동시에 version 관리 - Generated.xcconfig Flutter 프로젝트에서 ios 빌드하면서 AppStore에 배포할 때 자꾸 아래와 같은 경고 이메일이 날라왔다. ITMS-90473: CFBundleVersion Mismatch - The CFBundleVersion value '1' of extension 'Runner.app/PlugIns/ImageNotification.appex' does not match the CFBundleVersion value '181' of its containing iOS application 'Runner.app'.ITMS-90473: CFBundleShortVersionString Mismatch - The CFBundleShortVersionString value '1.0' of extension 'Runne.. 2024. 4. 18.
[Flutter] Flutter App Badger 플러그인의 안드로이드 호환성 이번 글에서는 Flutter 프로젝트에서 앱 뱃지 기능 구현을 위해 많이 사용되는 플러그인,flutter_app_badger 의 안드로이드 호환성에 대해 이야기해보고자 한다.  flutter_app_badger | Flutter packagePlugin to update the app badge on the launcher (both for Android, iOS and macOS)pub.dev 필자의 프로젝트에서 위 플러그인을 사용하면서 안드로이드 에뮬로 실행하니제대로 작동이 안되는 경우도 있었고 작동하는 방식이 iOS와 다른 경우도 있었다.그래서 이 플러그인이 안드로이드 앱 뱃지 기능을 어떻게 구현했는지 자세히 알아보았는데그 과정에서 알게 된 내용들을 공유하고자 한다.  1.  pub.dev 문서먼저.. 2024. 3. 26.
[Flutter] GoogleMap에 방향 지시자 추가하는 패키지 만들기 - 3 구현 로직 설명 - 위젯 부분 1. 지도 위에 방향 지시자 겹쳐놓기 Stack 위젯 안에 google_maps_flutter에서 제공하는 GoogleMap위젯을 위치시키고 그 위에 방향 지시자 위젯들이 렌더링되도록 한다. Stack( children: [ GoogleMap( ... ), if (widget.isIndicatorVisible && widget.markers.isNotEmpty) ..._indicatorOffsetList.map((el) { return Positioned( ... ); }).toList(), ], ); 2. GoogleMap 위젯이 받는 파라미터 대신 받기 패키지에서 제공하는 위젯이 구글맵 위젯의 부모 위젯이 되기 때문에 부모 위젯에서 구글맵 위젯이 받는 파라미터를 대신 .. 2024. 1. 29.
[Flutter] GoogleMap에 방향 지시자 추가하는 패키지 만들기 - 2 패키지를 만들기 위한 템플릿 생성 flutter create --template=package [패키지명] 의존성 추가 google_maps_flutter 에서 구현한 GoogleMap 위젯 위에 방향 지시자를 겹쳐서 보여줄 계획이므로 google_maps_flutter 의존성을 추가한다. dependencies: flutter: sdk: flutter google_maps_flutter: ^2.5.3 디렉토리 구조 디렉토리 구조는 간단하다. 구글맵 위에 위치시킬 방향 지시자의 위치와 각도를 계산하는 서비스(CaculateService) 파일과 위젯을 작성한 파일 두개가 있다. lib/google_map_with_direction_indicator.dart 이 파일을 library 표기와 다른 파일의 e.. 2024. 1. 29.
[Flutter] GoogleMap에 방향 지시자 추가하는 패키지 만들기 - 1 패키지를 만든 이유 google_maps_flutter 패키지를 사용하여 구글 지도 기능을 사용하다가 지도 밖에 마커들이 위치해 있을 경우 그 마커들을 가리키는 방향 지시자가 구현하고 싶다는 생각이 들었다. 내가 구상중인 프로젝트에서는 사용자는 지도를 움직일 수 없고 오직 주변 마커들의 위치를 짐작할 수 있는 힌트만 주고 싶었기 때문에 마커를 가리키는 방향 지시자가 필요했다. 그리고 만드는 김에 오픈 소스로 공유할 수 있는 패키지 형태로 만들어볼까 생각을 하게 되었다. pub.dev 링크 https://pub.dev/packages/google_map_with_direction_indicator google_map_with_direction_indicator | Flutter package A Flutt.. 2024. 1. 29.
[Flutter] ChangeNotifier 잘 쓰는 꿀팁! Flutter 개발에서 상태 관리를 위해서 ChangeNotifier을 유연하고 강력하게 사용하는 것이 중요하다. 많은 Flutter 프로젝트의 아키텍쳐로 사용되는 MVVM 아키텍쳐에서는 Model / ModelView / VIew Layer 중 ModelView 계층을 ChangeNotifier 믹스인한 클래스로 표현할 만큼 Flutter 프로젝트에서 핵심적인 부분을 차지한다. 이렇게 자주 사용되는 ChangeNotifier을 잘 써먹을 수 있도록 기복적이지만 유용한 꿀팁들을 정리해본다! 1. 상태 캡슐화 상태관리를 위해 외부에서 ChangeNotifier 믹스인한 클래스의 내부 상태 접근하는 경우가 빈번하게 발생한다. 이를 위해 접근 및 수정할 수 있는 getter와 setter를 작성하고 내부 .. 2024. 1. 20.
[Flutter] STOMP, WebSocket으로 실시간 통신하기 1. 개념 WebSocket 이란? 웹 애플리케이션에서 실시간 양방향 통신을 가능하게 하는 통신 프로토콜. 일반적으로 통신에 사용하는 HTTP 프로토콜은 요청해야 응답이 오는 방식으로 작동한다. 하지만 채팅, 실시간 업데이트와 같이 요청이 없어도 서버에서 지속적으로 응답을 주어야 하는 경우에는 HTTP 프로토콜을 사용하는 것에 불편함을 느끼게 된다. 이를 위해 고안된 것이 WebSocket 이다. WebSocket 통신 프로세스 1) 클라이언트의 요청 클라이언트는 서버에 HTTP 요청을 보내고, 이 요청에는 WebSocket 연결을 원한다는 것을 나타내는 특별한 헤더가 포함된다. 2) 서버의 응답 서버가 WebSocket 연결을 지원하고 받아들일 준비가 되면, 클라이언트의 요청에 대해 101 Switch.. 2024. 1. 15.
GitHub Actions으로 Flutter CI/CD 구축하기 - workflow 설정 2 GiHub Actions으로 Flutter CI/CD 구축하기 - GitHub Secret 설정 GitHub Actions으로 Flutter CI/CD 구축하기 - workflow 설정 1 이전 두 편에서는 깃허브 액션에서 제공하는 가상환경에서 빌드할 때 필요한 파일들과 데이터들을 깃허브 시크릿에 등록하는 작업, 그리고 이를 활용해서 안드로이드, iOS 배포를 위해 각각 apk, ipa를 빌드하여 구글 드라이브와 AppStore Connect의 api를 통해 배포하는 워크플로우릴 작성해보았다. 이제 마지막으로 자동 빌드 후 Flutter 프로젝트의 버전 및 빌드 번호 수정 또한 자동화하는 workflow를 작성하겠다. 본인 프로젝트의 버전(빌드 버전) 관리 전략에 대해 먼저 간단하게 설명하면, 배포 환경.. 2024. 1. 8.
GitHub Actions으로 Flutter CI/CD 구축하기 - workflow 설정 1 GiHub Actions으로 Flutter CI/CD 구축하기 - GitHub Secret 설정 전편에서 깃허브 액션 내에서 활용할 파일들이나 데이터들을 GitHub Secret에 등록하는 작업을 했다. 이제 깃허브 액션이 제공해주는 가상환경에서 이 secret을 활용하여 Workflow를 구성하는 작업을 진행한다. 우선 나의 프로젝트 상황에서는 두개의 workflow가 필요하다. 1. 풀리퀘스트 시 빌드 번호 업데이트, 빌드 그리고 배포 (develop, stage, release 브랜치 각각 작성) 2. develop, stage, release 브랜치에서 풀리퀘스트 시 develop, stage, release 브랜치 모두의 빌드 번호 업데이트 이번 글에서는 먼저 1번(빌드 및 배포 워크플로우)에 .. 2024. 1. 6.