Dev.dodo

외부 요인에 맞게 빌드 환경이 필요할 때 이를 보통 dev, staging, prod 등으로 나누는데요, flutter에서는 flavor란 기능으로 이를 지원하고 있습니다. 저는 프로젝트 중 서버가 불안정할때도 원활하게 UI개발을 하고 싶어 flavor를 이용해 환경을 분리하게 되었습니다. 빌드 환경을 나누고 프로젝트 내부에서 환경에 따라 DI하는 법까지 소개해보겠습니다. 1. iOS 세팅 조금 번거롭지만, flutter에서 빌드 환경을 나누려면 각 플랫폼 별에서 별도로 작업을 미리 해주어야합니다. iOS는 빌드 환경을 'Scheme'라고 하는데 이를 먼저 세팅해주겠습니다. 1. 먼저, ios > Runner.xcworkspace 파일을 통해 Xcode를 열어줍니다. 2. Project > Info 에서..

Flutter에서 웹뷰를 띄워보겠습니다. 1. 라이브러리 설정 [pubspec.yaml]에 해당 라이브러리를 추가해줍니다. dependencies: flutter: webview_flutter: ^3.0.4 // 최신버전으로 적어주세요 최신버전 확인 : https://pub.dev/packages/webview_flutter/install 아니면 터미널에 다음 명령어를 입력하셔도 됩니다. (자동으로 최신버전 다운로드) flutter pub add webview_flutter 2. 웹 뷰 컴포넌트 생성 import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class CustomWebView ..

라이브러리 Retrofit과 Freezed를 이용해서 REST 통신을 하는 상황에서 에러가 발생했습니다. Retrofit은 Dio라이브러리를 이용해 네트워킹을 해주는 라이브러리이고, Freezed는 json을 객체로 매핑하는 작업 (serialize)을 도와주는 라이브러리입니다. (json_serializable 라이브러리를 의존) 두 라이브러리 모두 어노테이션을 이용한 코드 제너레이터 기능이 있기 때문에 타이핑 코드양을 정말 많이 줄일 수 있습니다. 에러 DioError [DioErrorType.other]: type 'String' is not a subtype of type 'Map?' in type cast 타입 에러가 발생했습니다. Map으로 들어와야할 값이 String으로 들어왔다고 합니다. ..

0. 소개 이전에 StatefulWidget으로 만들었던 BottomNavigationBar를 GetX controller를 이용해 만들어보겠습니다. GetX 라이브러리에서는 StatefulWidget 사용을 지양하니 섞어 사용중이시라면 GetX 방식으로 바꾸시는걸 권장드립니다. [Flutter] 하단탭바, BottomNavigationBar 만들기 이거 탭바라고 자주불렀는데, 플러터에선 BottomNavigationBar라고 하네요. 플러터에서 탭바는 상단에 있는 이거라고 합니다. 현재 만들 것은 TabBar가 아닌 BottomNavigationBar 입니다. 시작 1️⃣ BottomNavg.. dokit.tistory.com 이전글 1. GetX Controller 만들기 // BottomNaviga..

Flutter에서 BottomNavigationBar를 커스텀할 수 있는 속성들을 정리해보겠습니다. 1️⃣ 선택된 탭 색상 변경 아이콘과 라벨 색을 변경할 수 있습니다. selectedItemColor: Colors.green, // 선택된 요소 색 unselectedItemColor: Colors.grey, // 선택되지 않은 요소 색 2️⃣ 아이콘/라벨 스타일 변경 아이콘과 라벨의 스타일을 변경할 수 있습니다. 이때, 라벨 텍스트 컬러는 1번의 item 컬러로 적용됩니다. (TextStyle에 color를 지정해주어도 적용되지 않습니다) selectedIconTheme: IconThemeData(color: Colors.green), // 선택된 아이콘 스타일 unselectedIconTheme: I..

이거 탭바라고 자주불렀는데, 플러터에선 BottomNavigationBar라고 하네요. 플러터에서 탭바는 상단에 있는 이거라고 합니다. 현재 만들 것은 TabBar가 아닌 BottomNavigationBar 입니다. 시작 1️⃣ BottomNavgationBar를 이용하기 위해선 StatefulWidget이 필요합니다. 따라서 메인 화면이 될 StatefulWidget을 만들고 루트위젯(MyApp())의 home에 넣어줍니다. // main.dart void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); static const String _titl..

[문제코드] class ThemeViewModel extends GetxController{ RxBool isLightTheme = false.obs; void changeTheme() { if (isLightTheme) { Get.changeThemeMode(ThemeMode.dark); isLightTheme = false; // 문제 발생 } else { Get.changeThemeMode(ThemeMode.light); isLightTheme = true; // 문제 발생 } } } [해결] class ThemeViewModel extends GetxController{ RxBool isLightTheme = false.obs; void changeTheme() { if (isLightTheme...

Flutter 기본 폰트가 너무 별로네요.. 전체 폰트를 변경해보겠습니다. 세팅 1️⃣ 최상위 폴더에 assets 폴더를 만들고 그 안에 fonts 폴더를 만든 다음 사용할 폰트들을 그대로 넣어줍니다. 2️⃣ 그 다음 pubspec.yaml 파일에서 주석처리된 fonts: 를 찾아 주석을 해제하고 다음과 같이 설정해줍니다. fonts: - family: Pretendard fonts: - asset: assets/fonts/Pretendard-Thin.ttf weight: 100 - asset: assets/fonts/Pretendard-ExtraLight.ttf weight: 200 - asset: assets/fonts/Pretendard-Light.ttf weight: 300 - asset: as..