안녕하세요~ 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은 선택하지 않고 그냥 닫..

안녕하세요~ totally 개발자입니다. bottom_picker 지난 포스팅에서는 showDatePicker로 날짜를 선택하는 방법에 대해 살펴보았고 이번에는 bottomPicker를 통해 날짜를 선택하는 방법에 대해 살펴봅니다. bottomPicker 말 그대로 기기 아래 부분의 UI로 구성되어 날짜를 선택할 수 있도록 도와주는 패키지로 매우 간단하게 구현할 수 있습니다. Step 1: pubspec.yaml에 bottom_picker 패키지를 추가합니다. Step 2: 27번째처럼 변수를 선언해주시고 33~52번째 줄처럼 메소드를 선언하여 bottomPicker가 보여질 수 있도록 구성합니다. 여기에서는 dateOrder만 잘 해주시면 되는데 DatePickerDateOrder.ymd 즉 연/월/일..

안녕하세요~ totally 개발자입니다. showDatePicker 어플을 개발할 때 날짜를 입력 받아야 하는 경우가 종종 있는데 플러터에서는 showDatePicker을 통해 간단하게 구현할 수 있습니다. 바로 실습을 통해 살펴보도록 하겠습니다. Step 1: 라이브러리 설치 필요 없이 바로 구현 가능합니다. DateTime? _selectedDate; 처럼 변수를 미리 선언해줍니다. Step 2: showDatePicker 부분을 구현합니다 initialDate는 초기 날짜 세팅, firstDate와 lastDate는 선택 가능한 날짜의 범위를 정하는 것입니다. 그리고 then을 통해 위에 선언된 _selectedDate 변수에 상태를 업데이트해주면 됩니다. Step 3: 날짜를 선택한 후 선택한 날..