안녕하세요~ totally 개발자입니다. DevTools 오늘은 DevTools 활용하는 방법에 대해서 살펴보도록 하겠습니다. 이 DevTools은 여러 유용한 기능들을 가지고 있습니다. DevTools는 Dart와 Flutter를 위한 성능 및 디버깅 도구이며 UI 레이아웃, 상태(state)를 점검할 수 있도록 도와주며 그 외 CPU, Network, Debug Memory issue, 코드 분석, 진단 등 여러 복합적인 기능들을 제공하고 있습니다. 실행 방법 기본적으로 Flutter, dart 확장자가 설치되어 있다면 별도로 설치하실 필요는 없으며 Visual Studio Code(VSCode)에서 F1를 눌러서 나오는 Command palatte에 devtools 검색하여 실행할 수 있습니다. 이..

안녕하세요~ totally 개발자입니다. 플러터 개발을 하다보면 Failed to build iOS app Error (Xcode): The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation. Could not build the application for the simulator. Error launching application on iPhone 14 Pro Max. 위와 같은 에러가 뜨는 경우가 종종 있는데 이럴 때에는 위에 해결책이 나와 있습니다. Run 'pod install' or update your CocoaPods installation.이라고 나오는데 보통..

안녕하세요~ totally 개발자입니다. JSON Serializable 이 포스팅에서는 JSON Serializable(직렬화)에 대해 다뤄봅니다. 보통 예전 포스팅에서 주로 사용했던 dart:convert를 이용하는 수동 직렬화와 오늘 포스팅에서 사용할 라이브러리를 사용해서 자동으로 직렬화하는 방법이 있습니다. 수동 직렬화는 세팅을 하지 않고 간단하게 구현할 수 있다는 장점이 있어 소규모의 프로젝트로는 괜찮을 수 있으나 어느 정도 프로젝트의 규모가 커지고 에러가 발생했을 때 컴파일 과정에서 발견되기 때문에 오류 해결에 있어 더 도움이 됩니다. 간단한 예제를 통해 실습을 해보도록 하겠습니다. Step 1: 다음처럼 build_runner, json_annotation를 적고 dev_dependencie..

안녕하세요~ totally 개발자입니다. qr_flutter 오늘 살펴볼 부분은 qr_flutter 패키지를 사용하여 QR 코드를 간단하게 생성하는 방법에 대해 살펴보겠습니다. 방법이 매우 간단하기 때문에 바로 실습을 통해서 알아보도록 하겠습니다. Step 1: pubspec.yaml 파일에 qr_flutter:를 추가합니다. Step 2: qr_flutter를 import 해줍니다. Step 3: 저는 qr코드 생성 버튼을 눌렀을 때, QR 코드가 나타나게 할려고 구성할 것이기 때문에 bool 변수를 하나 넣어줍니다. Step 4: 44~51번째 줄의 버튼을 눌렀을 때 47번째 줄처럼 _qrGenerated 변수를 true로 상태 업데이트 해줍니다. Step 5: 다음처럼 QrImage 위젯을 넣어줍니..

안녕하세요~ totally 개발자입니다. 이번 포스팅에서는 간단히 라이트, 다크 모드를 구현해보도록 하겠습니다. 플러터에서는 이 라이트, 다크 모드를 내장된 기능으로 간단하게 구현할 수 있습니다. Step 1: MyApp 부분에 11-12번째 줄처럼 ValueNotifier 부분을 넣어줍니다. 이 ValueNotifier는 ChangeNotifier을 상속받고 있기 때문에 마치 provider, stream처럼 상태를 받아와 변경된 데이터를 적용할 수 있습니다. Step 2: 그 아래에 ValueListenableBuilder로 감싸주어야 합니다. 마치 StreamBuilder처럼 감싸주는 것과 동일합니다. themeNotifier가 변경된 것을 valueListenable로 받아오고 builder를 통..

안녕하세요~ totally 개발자입니다. country_calling_code_picker 이 패키지를 사용하여 국가 선택을 쉽게 할 수 있습니다. Step 1: pubspec.yaml에 country_calling_code_picker를 넣어줍니다. Step 2: main.dart에 import해줍니다. Step 3: 다음을 추가해줍니다. 이 Country 클래스에는 name, flag, countryCode, callingCode가 들어가 있습니다. 그리고 국가 리스트들을 초기화하고 기본 국가를 가지고 오기 위한 작업을 진행합니다. Step 4: 아래쪽에서 국가를 고를 수 있는 UI부분을 만들어주며 heightFactor는 기기 대비 높이 비율을 말하며 cancelWidget은 선택하지 않고 그냥 닫..