[flutter] 플러터 Checkbox 주변 기기 검색 기능 추가하기

07 Dec 2023

flutter

이번 글에서는 플러터 앱에 Checkbox를 사용하여 주변 기기를 검색하는 기능을 추가하는 방법에 대해 알아보겠습니다.

목표

주변 기기 목록을 가져와서 Checkbox 목록으로 표시하기
사용자가 Checkbox를 선택하면 선택된 기기를 검색하기

구현 단계

1. 지도와 GPS 권한 설정하기

먼저, 주변 기기를 검색하기 위해 지도와 GPS 권한을 설정해야 합니다. google_maps_flutter 패키지를 사용하여 지도를 추가하고, geolocator 패키지를 사용하여 GPS 위치를 가져와야 합니다. 아래의 코드를 pubspec.yaml 파일에 추가하여 패키지를 가져옵니다.

dependencies:
  flutter:
    sdk: flutter
  google_maps_flutter: ^2.0.3
  geolocator: ^8.0.1

2. 위치 정보 가져오기

geolocator 패키지를 사용하여 사용자의 현재 위치를 가져옵니다. 아래의 코드를 작성하여 getCurrentPosition 함수를 호출하여 위치 정보를 가져옵니다.

import 'package:geolocator/geolocator.dart';

void getCurrentLocation() async {
  Position position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.best);
  double latitude = position.latitude;
  double longitude = position.longitude;

  print('Latitude: $latitude, Longitude: $longitude');
}

3. 주변 기기 검색하기

위치 정보를 가져온 후, 주변 기기를 검색하는 API를 호출하여 기기 목록을 가져옵니다. API 호출은 비동기로 이루어져야 하므로 http 패키지의 get 함수를 사용합니다. 아래의 코드를 작성하여 API 호출을 수행합니다.

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

void searchDevices(double latitude, double longitude) async {
  String apiUrl = 'http://example.com/api/search?latitude=$latitude&longitude=$longitude';

  http.Response response = await http.get(Uri.parse(apiUrl));
  if (response.statusCode == 200) {
    // 기기 목록 가져오기 성공
    List<dynamic> devices = jsonDecode(response.body);
    print('Devices: $devices');
  } else {
    // 기기 목록 가져오기 실패
    print('Failed to fetch devices');
  }
}

4. Checkbox 목록으로 표시하기

API를 호출하여 가져온 기기 목록을 Checkbox 목록으로 표시합니다. Flutter의 ListView.builder를 사용하여 동적으로 Checkbox 목록을 생성합니다. 아래의 코드를 작성하여 Checkbox 목록을 표시합니다.

ListView.builder(
  itemCount: devices.length,
  itemBuilder: (BuildContext context, int index) {
    return CheckboxListTile(
      title: Text(devices[index]['name']),
      value: isChecked[index],
      onChanged: (bool? value) {
        setState(() {
          isChecked[index] = value!;
        });
      },
    );
  },
)

5. 선택된 기기 검색하기

Checkbox를 선택하면 해당 기기를 검색하여 추가적인 작업을 수행할 수 있습니다. 선택된 기기의 정보를 활용하여 추가적인 API 호출 등을 수행할 수 있습니다. 아래의 코드를 작성하여 선택된 기기를 검색하는 함수를 정의합니다.

void searchSelectedDevices() {
  List<dynamic> selectedDevices = [];

  for (int i = 0; i < devices.length; i++) {
    if (isChecked[i]) {
      selectedDevices.add(devices[i]);
    }
  }

  print('Selected Devices: $selectedDevices');
  // 선택된 기기에 대한 추가 작업 수행
}

마무리

위의 단계를 따라가면 플러터 앱에 Checkbox를 사용하여 주변 기기를 검색하는 기능을 추가할 수 있습니다. 이를 통해 사용자는 주변 기기를 선택하여 추가적인 작업을 수행할 수 있게 됩니다.