플러터(Flutter)로 앱을 개발하다 보면 다양한 사용자 입력 기능을 구현해야 할 때가 있습니다. 이 중에서도 우편번호 검색 기능은 많은 앱에서 사용되는 기능 중 하나입니다. 이번 포스트에서는 플러터에서 Checkbox를 사용하여 우편번호 검색 기능을 추가하는 방법을 알아보겠습니다.

Checkbox란?

Checkbox는 사용자가 선택하거나 선택을 해제할 수 있는 위젯입니다. 일반적으로 “동의”, “확인” 등의 목적으로 사용되며, 선택 여부를 표시하는 작은 사각형의 박스와 해당 사각형 앞에 위치한 레이블로 구성됩니다.

Step 1: 프로젝트 설정

먼저, 플러터 프로젝트를 생성하고 필요한 패키지를 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 http 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3

이후 flutter pub get 명령을 실행하여 패키지를 설치합니다.

Step 2: Checkbox 위젯 생성

Checkbox를 사용하여 우편번호 검색 기능을 구현하기 위해 먼저 Checkbox 위젯을 생성해야 합니다. 다음과 같은 코드를 사용하여 Checkbox를 생성할 수 있습니다.

bool isSearchByZipCode = false;

Checkbox(
  value: isSearchByZipCode,
  onChanged: (bool value) {
    setState(() {
      isSearchByZipCode = value;
    });
  },
),

위 코드에서 isSearchByZipCode는 현재 Checkbox의 선택 여부를 나타내는 변수입니다. Checkbox 위젯의 value 속성을 이 변수와 연결하여 현재 선택 상태를 표시합니다. onChanged 속성을 이용하여 Checkbox의 선택 여부가 변경될 때마다 setState() 함수를 호출하여 화면이 업데이트되도록 합니다.

Step 3: 우편번호 검색 기능 추가

Checkbox를 생성했으면, 이제 해당 Checkbox의 선택 여부에 따라 우편번호 검색 기능을 추가해야 합니다. Checkbox가 선택된 경우에만 우편번호 검색 기능이 동작하도록 작성해보겠습니다.

if (isSearchByZipCode) {
  // 우편번호 검색 기능을 구현
} else {
  // Checkbox가 선택되지 않은 경우 처리 로직
}

위 코드에서 isSearchByZipCode 변수를 사용하여 Checkbox의 선택 여부에 따라 조건문을 작성합니다. Checkbox가 선택된 경우에는 우편번호 검색 기능을 구현하고, 선택되지 않은 경우에는 다른 처리 로직을 수행하도록 합니다.

Step 4: 우편번호 검색 기능 구현

마지막으로 선택된 Checkbox에 따라 실제 우편번호 검색 기능을 구현해야 합니다. 이 부분은 서버와의 통신이 필요할 수도 있습니다. 예를 들어, http 패키지를 사용하여 우편번호 검색 API와 통신하고 결과를 처리하는 방법을 알아보겠습니다.

import 'package:http/http.dart' as http;

if (isSearchByZipCode) {
  // 우편번호 검색 API 호출
  final response = await http.get(Uri.parse('https://api.example.com/zipcode'));
  
  if (response.statusCode == 200) {
    // API 호출 성공 시 처리 로직
    final data = json.decode(response.body);
    // 결과 처리
  } else {
    // API 호출 실패 시 처리 로직
  }
} else {
  // Checkbox가 선택되지 않은 경우 처리 로직
}

위 코드에서는 http 패키지를 사용하여 https://api.example.com/zipcode라는 API를 호출하는 예시를 보여줍니다. http.get() 함수를 사용하여 GET 요청을 보내고, API 호출 결과에 따라 처리 로직을 작성합니다.

이렇게 구현된 우편번호 검색 기능은 선택된 Checkbox에 따라 동작하게 됩니다.

결론

이번 포스트에서는 플러터로 Checkbox를 사용하여 우편번호 검색 기능을 추가하는 방법에 대해 알아보았습니다. Checkbox를 활용하여 다양한 사용자 입력 기능을 구현할 수 있으므로, 필요한 기능을 추가할 때 참고해보세요.

참고 문서:

• Flutter Checkbox
• Flutter Cookbook - Fetch data from the internet