env를 사용하는 이유개발(테스트, 스테이징 등) 중에 프로덕션 환경 설정git 오픈소스에 올리면 안되는 보안 상 문제가 될 수 있는 값 (예. API 키, DB 정보 등)을 따로 분리할 경우 사용법Root 경로에 .env 파일을 생성한다..env 파일에 환경 변수를 지정한다. pubspec.yaml 파일에 assets에 .env파일을 추가한다. 병합env 파일에서 병합.env 파일에 지정된 환경변수의 값을 병합해 사용할 수 있다.$를 사용하여 환경변수의 값을 가져온다.$의 문자를 포함할 경우 환경변수의 값을 ''로 지정한다. 소스 상에서 병합load 함수의 mergeWith 에서 병합할 환경변수의 Key, Value 값을 지정한다. Null Safe환경변수의 Key 값이 없는 경우 Assertio..
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 ..