Flutter (12) 썸네일형 리스트형 Flutter Version Management(FVM) 사용법 정리(Mac) flutter sdk version 관리를 쉽게 할 수 있도록 도와주는 fvm 사용법을 계속 까먹어서 정리하려고 한다.flutter sdk version release가 빠르게 이루어지기 때문에 한번 셋팅해놓고 사용하면 편할 것 같다.설치brew tap leoafarias/fvmbrew install fvm터미널에 위 커맨드를 입력하면된다. 첫번째 커맨드는 이상하게 생겼다고 스킵하면 안되고 fvm을 제공하는 git repository를 추가해주는거라 입력해줘야 한다.삭제brew uninstall fvmbrew untap leoafarias/fvm실행dart pub global activate fvmfvm 설치를 했다면 위의 커맨드를 통해 fvm를 실행시킬 수 있다.사용법https://fvm.app/doc.. get_it, injectable 패키지를 이용한 의존성의 주입 의존성 주입(Dependency Injection)이란 class Car { Engine engine = Engine(); } class Engine {} 위와 같은 코드는 Car라는 클래스가 Engine 클래스에 의존하고 있다. 그리고 Car 내부에서 직접 Engine 클래스 생성자를 사용하고 있다 따라서 Engine 외 Gas와 같은 다른 클래스를 사용하는 차를 만들고 싶으면 새로운 클래스를 만들어야 한다. class Car { Engine engine; Car(this.engine); } class Engine {} 위 코드도 마찬가지로 Car 내부에서 Engine을 사용하지만 Engine을 외부에서 생성해서 주입하고 있다. 따라서 어떠한 Engine이 들어와도 Car 클래스를 재사용 할 수 있는.. flutter_gen 패키지를 이용하여 asset 사용하기 일반적으로 경로에서 이미지나 폰트를 불러오는 경우에는 아래와 같이 문자열로 경로나 폰트 명을 지정한다. Widget image() { return Image.asset('assets/images/profile.jpeg'); } Widget text() { return Text("hello", style: TextStyle(fontFamily: "Pretendard")); } 하지만 이러한 경우에는 오타 등과 같은 휴먼 에러의 위험성이 있고, 유지보수 측면에서도 그다지 좋은 점이 없다. flutter_gen flutter_gen | Dart Package The Flutter code generator for your assets, fonts, colors, … — Get rid of all String-.. Flutter MVVM Architecture 기능 개발을 우선으로 생각하고 개발한 결과, 가장 어려웠던 부분은 기능의 확장과 유지보수였다. 최근에는 이를 고려하여 MVVM 아키텍쳐를 적용하여 개발하기 위해 노력하고 있다. MVVM 이란? Model-View-ViewModel의 약자로 UI와 로직을 분리하여 프로그래밍하는 기법이다. MVVM을 사용하는 이유 - 각 영역마다 관심사를 분리하여 설계함으로써 코드의 복잡성이 감소하고, 유지보수성과 확장성이 증가한다. - View는 단순히 UI만 구성하는 코드를 작성할 수 있게되어 UI 변경 시 ViewModel에 영향이 가지 않는다. 이처럼 View와 ViewModel이 분리되기 때문에 ViewModel의 테스트가 용이해진다. View - 사용자에게 보여지는 UI 부분, 사용자의 동작이나 각종 처리를 Vi.. Flutter Mockito를 이용한 API 통신 Unit Test API 통신 기능을 unit test 할 때 실제 API를 호출하여 진행하면 몇 가지 문제가 있다. 실제 API를 요청하게 되면 test 성능이 저하될 수 있다. 서버의 이상 유무에 따라 응답 값이 달라질 수 있고, 이 경우 테스트가 실패하게 된다. 모든 성공, 실패를 테스트하기는 무리가 있다. 위와 같은 이유로 Flutter에서는 Mock 객체를 생성하여 다양한 케이스를 테스트할 수 있고, 이는 annotation과 code generation을 제공하는 mockito 패키지를 이용하여 진행하면 된다. Example Mockito Package https://pub.dev/packages/mockito mockito | Dart Package A mock framework inspired by Mock.. Flutter InheritedWidget https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html InheritedWidget class - widgets library - Dart API Base class for widgets that efficiently propagate information down the tree. To obtain the nearest instance of a particular type of inherited widget from a build context, use BuildContext.dependOnInheritedWidgetOfExactType. Inherited widgets, when referenc api.flutter.dev 복잡한 구조의.. 뒤늦게 정리하는 Flutter riverpod 개념 공부를 하면서 새로 알게된 상태관리 플러그인 riverpod provider들의 개념 정리 riverpod Provider 종류 Provider 가장 베이스가 되는 Provider 아무 타입이나 반환 가능 반환 값을 캐싱할 때 많이 사용 여러 Provider를 묶어서 한번에 반환 값을 만들어낼 수 있다. StateProvider ui에서 직접적으로 데이터를 변경하고 싶을 때 사용 단순한 형태의 데이터 관리에 사용 StateNotifierProvider StateProvider와 마찬가지로 데이터를 직접적으로 변경하고 싶을 때 사용 복잡한 형태의 데이터를 관리할 수 있다. StateNotifier를 상속한 값을 반환한다. FutureProvider Future 타입만 반환 가능 복잡한 기능 또는 사용자의 .. Debounce와 Throttle 개발을 마치고 테스트를 하다보면 특정 함수가 중복으로 여러번 실행되는 경우가 있다. 지금까지는 함수 실행 사이에 일정 시간 간격을 두고 제한을 하는 등의 방법으로 해결했는데 더 좋은 방법을 알게 되었는데 바로 Debounce와 Throttle이다. 모두 특정 함수의 실행을 제한하는 기능을 제공한다. Debounce Debounce는 특정 기간 안의 함수 실행을 모두 제한하고 마지막에만 실행한다. https://rxmarbles.com/#debounce RxMarbles: Interactive diagrams of Rx Observables rxmarbles.com 위 이미지에서 첫번째 라인은 함수 실행 명령이고, 두번째 라인은 실제 실행 결과이다. duration 1초의 설정 값을 가진 함수는 1초 안에.. 이전 1 2 다음
