Flutter 16

Flutter Hive box의 open을 어떻게 하는게 좋을까?

Hive 라이브러리를 쓰면서 하는 고민이 있다. 우선 유지보수 단계에서의 유연성, 서비스 운영이 장기화되면 발생할 수 있는 마이그레이션 관련 이슈를 방지하기 위해서는 관심사를 세부적으로 나누고 각 관심사별 box를 분리해서 관리하는 게 좋을 것 같다는 생각을 하게 되었다. 이렇게 할 경우 hive에 저장되는 데이터의 구조 변경이 일어나도 비교적 간단하게 처리가 가능할 것이다. 또한 특정 자료형이 지나치게 복잡해지는 것도 방지할 수 있을 것이라고 생각했다.하지만 이렇게 사용할 경우 문제점이 하나 생긴다. 방법에 따라 하나 이상의 문제가 발생하는데, 문제의 유형은 3가지로 발생한다. 보일러 플레이트 코드가 발생한다코드 외적인 절차가 발생할 수 있다인지하지 못할 수 있는 동작이 발생한다일단 이 문제의 발단은 ..

flutter 2024.10.12

riverpod의 AsyncStateProvider의 AsynData관련 오류 디버깅

발생 상황 AsyncGuard를 통해 가공한 값을 사용하는 과정에서 nullcheck를 명시하였음에도 불구하고 Exception이 발생하는 상황Sample Codeclass TempAsyncNotifier extends _$TempAsyncNotifier{ ... foo() async { state = await AsyncData.guard( .... ); return state.value?.data ; }​}원인과 해결 방법AsyncValue는 [AsyncData, AsyncLoading, AsyncError] 이렇게 3가지의 형태로 분리되어 사용됩니다. riverpod(provider)에서 제공하는 값이며 비동기 상태변화가 일어날 경우 사용하라고 제공한 타입들입..

flutter 2024.09.17

flutter_cache_manager를 사용한 Svg캐싱

앱을 개발할 때 이미지를 사용하는 일을 굉장히 빈번하다. 그리고 이미지는 앱의 퍼포먼스에 지대한 영향을 미친다. 기기의 성능이 제한적인 앱 환경은 웹 환경에 비해 더 섬세한 자원관리가 필요하다.자원관리가 미흡할 경우 최소 퍼포먼스 저하 및 발열, 최악의 경우 os 차원에서 리소스를 많이 소모하는 앱이라는 경고창을 띄울 수 있다.앱의 성능을 최적화하는 방법들은 이미 여러 가지가 있지만 가성비가 가장 좋은 방법 중 하나는 이미지의 캐싱이다.아무리 이미지의 용량을 조절한다 하여도 결국 외부에서 이미지를 가져오는 행위는 리소스의 소모가 클 수밖에 없다. 언제나 새로운 이미지를 제공해야 한다면 어쩔 수 없겠지만 대부분의 요구사항에서는 가져오는 이미지의 종류가 기간별로 한정적이다. cached_network_ima..

flutter 2024.09.04

제네릭 타입이 포함 된 data class 의 Freezed 적용

제네릭 타입이 포함 된 data class 의 Freezed 적용Freezed를 통해 데이터 클래스를 정의하는 경우가 많다. 하지만 제네릭 타입이 포함된 경우 조금 특수한 처리가 필요할 수 있다.예시타입 class CommonResponse{String code;String message;T? data;}기본적으로 freezed는 제네릭을 사용할 수 없지만 몇가지 처리를 통해 추가할 수 있다.@Freezed(genericArgumentFactories: true)sealed class CommonResponse with _$CommonResponse {const factory CommonResponse({required String code, required String message, T? data})..

flutter 2024.08.28

Google IO 2024 Fluttter 새로운 소식 후기

올해도 Google IO 세션이 열렸고 다양한 사항들이 발표되었다. 그중 Flutter 관련 새로운 소식들이 있었다이번 키노트에서 특히 강조한 내용은 5가지이다. Gemini(AI), Flame(Game Engine), Macros(개발 생산성), Impeller(UI Rendering Engine), WebAssembly(Web)Geminiflutter만의 추가사항은 아니고 이번 IO 자체의 가장 중요한 이슈로 보인다. 구글의 자연어 처리 AI 모델이다. flutter에서도 적극적으로 지원한다는 내용이다. 기존에도 tflite_flutter 라이브러리를 통해 tensor flow를 통한 AI기능 구현이 가능한 사항이지만 Gemini를 통해 더 쉽게 자연어 처리 기술을 적용할 수 있을 것 같다.http..

flutter 2024.05.17

Flutter Riverpod 테스트 케이스 활용 + mockito

우선 테스트 케이스를 구성하는데 있어서 중요한 부분은 테스트의 범위를 정확히 설정하는 것 이다. 좋은 함수란 하나의 기능을 확실하게 잘 수행하는 함수이며, 이는 테스트 케이스 역시 해당하는 부분이다. 우선 로직이 복잡하게 구성되어 있다면 테스트 케이스는 잘 구현될 수 없다. 로직의 품질과 테스트 케이스의 품질은 정비례한다는 것을 먼저 알고 코드를 구성해야 한다. 테스트를 할 코드는 다음과 같다. @riverpod class SampleStateNotifier extends _$SampleStateNotifier { late final Repository repository; @override BaseSampleState build() { repository = ref.watch(clientReposito..

flutter 2023.06.10

riverpod2.0 codegeneration 학습 2

class 기반의 riverpod은 몇가지의 특징을 가진다. 우선 g.dart파일로 생성된 결과물은 Notifier / AsyncNotifier를 생성하는 것을 볼 수 있다. AutoDisposeNotifier; AutoDisposeAsyncNotifier; 1. 생성 NotidierProvider notifier는 state를 가지고 있으며, 해당 state를 중심으로 동작한다. notifier는 반드시 class로 구성되어야 하며, codegenerater를 사용한다면 다음과 같이 상속을 통해 구현됨을 명시하여야 한다. @riverpod class ValueNotifier extends _$ValueNotifier ChangeNotifier 혹은 StateNotifier를 구현하는 것과 일정부분 유사..

flutter 2023.05.06

riverpod2.0 codegeneration 학습 1

CodeGenerator를 통해 provider를 생성하며 해당 provider들의 생성 및 dispose에 대해서 알아보자 provider는 여러가지 기준으로 분류할 수 있다. 분류의 기준 중 하나로 [ 함수 / 클래스 ] 가 있다. 이번 글에서는 함수형 provider들의 생성 및 사용에 대하여 기술한다. 0. observer 프로바이더들의 생성 및 변경, 삭제 이벤트를 확인하기 위해 observer를 등록하여 로그를 찍도록 하였다. ProviderObserver 객체를 상속받아 원하는 형태로 사용 가능하며, 용도에 따라서 여러 observer를 추가하여 사용할 수 있다. import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package..

flutter 2023.05.01

리버팟 2.0 간단한 공부 정리

최근 현업 프로잭트에서 riverpod을 사용하여 프로젝트를 진행하는 중이다. 또한 flutter discord 채널을 통해서 riverpod 관련 발표자료를 공유받아 최근 정리하였다. 들어가기 전에 간단한 사견 개인 공부로는 bloc을 사용해서 프로젝트를 진행하고 있는데 아무래도 상태관리를 지원하는 패키지인만큼 유사한 부분들이 많이 보인다. state를 중심으로 state의 변화에 따라 UI의 동작을 결정한다는 측면에서는 유사한 측면을 보인다. riverpod은 riverpod 하나로 서비스로케이터, 싱글톤, 의존성 주입 같은 요소들을 전부 할 수 있어서 사용하는 측면에서 편리하다는 느낌을 받는다. 추가적으로 riverpod내부에서 다른 riverpod을 결합할 수 있다는 특징이 로직을 설계하는 상황에..

flutter 2023.04.23

Bloc을 활용한 UI 전반의 설정과 변경

특정한 상황에 따라 앱 전반의 UI, 혹은 테마를 전반적으로 변경하고 싶은 경우가 있다. 가장 좋은 예시로 Youtube Music의 경우 앨범 커버에 따라 UI의 색상이 변경되는 것을 확인할 수 있다. Flutter의 theme 과 bloc을 사용하면 특정한 이벤트에 따라 앱 전반의 UI를 원하는대로 변경할 수 있다. 사용하는 라이브러리 dependencies bloc: ^8.0.0 flutter_bloc flex_color_scheme 1. 테마 설정 https://pub.dev/packages/flex_color_scheme flex_color_scheme | Flutter Package A Flutter package to use and make beautiful Material design ba..

flutter 2023.03.04