Flutter 에서 사용하는 dart 언어에서 Model 클래스를 만들기 위해 다양한 기능을 override하거나 직접 구현해야한다.Freezed는 이러한 번거로움을 단번에 해결할 수 있는 유용한 플러그인이다.Flutter Favorite이므로 믿고 사용할 수 있다.Freezed에서 제공하는 기능으로 인해 Bloc, Retrofit을 사용할 때 함께 사용하면 더욱더 진가를 발휘한다. Freezed의 기능생성자(constructor)와 프로퍼티(properties) 자동 생성 toString, operator == , hashCode 함수를 ovrride 해준다.copyWith를 사용해서 객체를 복제직렬화/역직렬화 지원Union 타입과 sealed classDependency 추가 생성자와 프로퍼티 자동 ..
Theme는 앱의 정체성을 표현하는데 가장 중요시 된다. 하지만 Material Color Theme를 지정하기 위해선 여러 값에 따라 색상을 지정해줘야한다. 이러한 번거로움을 한 번에 해결하는 플러그인을 소개한다. Flutter Favorite을 받은 플러그인이므로 믿고 사용할 수 있다. Theme 지정하기themes playgroud 페이지에서 본인이 원하는 Theme를 지정한다. (Custom 가능)Theme Code를 선택하여 코드를 복사한다.https://rydmike.com/flexcolorscheme/themesplayground-v7-1/#/ (v-7-1 의 값은 플러그인 버전에 따라 변동된다, 23.05.16 기준 flex_color_scheme 7.1.1 버전이다.) Theme 적용..
요즘 스마트폰은 해상도 사이즈가 다양하다. 그렇기 때문에 반응형으로 작업해줘야한다. 한 기기로 작업 후 다른 해상도의 기기로 실행하면 의도치 않은 레이아웃 배치가 되곤한다. 그렇다고 시뮬레이터를 다운받아 일일히 확인하는 것도 여간 힘든 작업이 아니다. 간단하게 나의 앱을 여러 해상도로 확인해볼 수 있는 유용한 패키지를 활용해보자. https://pub.dev/packages/device_preview device_preview | Flutter PackageApproximate how your Flutter app looks and performs on another device.pub.dev
OOP 기반 언어에서 객체를 비교할 경우가 많다. 그럴 때 객체의 필드 값을 전부 비교하거나 operator 함수와 hashCode 함수를 override 하여 비교한다. 하지만 개발하다 보면 클래스의 수가 많아지기 때문에 클래스마다 함수를 override 하는 일은 생산성을 떨어트리기 때문에 이를 자동화해주는 유용한 플러그인을 사용하자. ※ Hash Code란? - 객체를 식별할 수 있는 고유한 정수값이다. Operator 함수 재정의하는 경우equal(==) operator 함수를 override 한다.hashCode 함수를 override 한다. Equatable 플러그인을 사용하는 경우Equatable 클래스를 상속받아 props 함수를 override한다.props 의 return 하는 리스트..
Google Map style 변경하기 flutter_google_map 패키지 사용할 경우 Makers 추가 시 Default로 보여지는 Landmarkers가 보여져서 내가 추가한 Makers가 눈에 덜 띄거나 Makers 가 너무 많아 의도한 정보를 보여주지 못할 가능성이 있다.그런 경우 Map의 style을 Custom하여 조절할 수 있다. Style 커스텀하기아래 사이트에서 원하는 스타일을 커스텀한다.FINISH 버튼 클릭 후 COPY JSON 버튼을 클릭한다.https://mapstyle.withgoogle.com/ Styling Wizard: Google Maps APIsTo import, paste in your JSON. When importing we reorder and rewrite..
Font(폰트) 변경Font 지정하는 방법 2가지에 대해 알아보자.google_fonts 패키지를 활용해서 폰트를 지정하는 방법직접 Font를 다운로드 받아 지정하는 방법google_fonts 패키지 사용구글에 등록된 폰트를 쉽게 사용할 수 있는 패키지HTTP 통신을 통해 폰트를 자동으로 가져온다.GoogleFonts 내 Font 별 Theme 함수가 제공된다. (모든 폰트를 제공하진 않는다.)공식 영상 앱 전체 Font 적용하기MaterialAPP 내 theme 속성을 지정한다.ThemeData 내 textTheme 속성에서 GoogleFonts의 원하는 폰트의 theme를 선택한다. 일부 텍스트만 Font 적용하기 1. 고정 Font (폰트가 변경되지 않는 경우) 2. 가변 Font (상황에 따..
ToggleButtonschildren 속성에 등록한 Widget 리스트와 bool 타입의 리스트인 isSelected의 갯수가 동일해야한다.isSelected의 값으로 선택 여부를 지정한다. 공식 영상 다중 선택 (1 개 이상) 다중 선택 (미선택 포함) 단일 선택 (1 개 선택) 단일 선택 (미선택 포함)
Material3 Design 적용하기 Material Design 이란? - 2014년부터 Google이 제시한 Android 디자인 시스템이다. - Material 3는 Android 12 부터 적용되었다. Material3 Components - 아직 Flutter에는 개발 진행 중인 components이 존재한다. (ex. Bottom app bar) - Material 공식 사이트에서 확인 가능하다( https://m3.material.io/components) - 지원 여부는 확인하고 싶은 components를 선택 후 Resources 영역의 status를 확인하면 된다. Components – Material Design 3Components are interactive building ..
정규식(Regex) 정규식이란? 정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. - MDN 정규식을 쓰는 이유 특정 프로그래밍 언어에만 국한되지 않고 대부분의 언어에서 사용할 수 있다. 정규표현식을 정규식이라고도 한다. 정규식을 쉽게 사용하는 법 정규식의 패턴은 직관적이지 않아 익히더라도 금방 잊게된다. 여러 언어에서 지원하는 정규식을 쉽게 사용할 수 있는 라이브러리 및 패키지를 활용한다. Verbal_expressions 패키지 https://pub.dev/packages/verbal_expressions verbal_expressions | Dart Package A package that helps to construct difficult regular express..