[flutter] 플러터 앱에서 GET 메소드를 사용하여 사용자의 게임 점수를 가져오는 방법은 무엇인가요?

30 Nov 2023

flutter

먼저, HTTP 패키지를 사용하여 GET 요청을 보내는 코드를 작성해야 합니다. 이를 위해 다음과 같이 http 패키지를 pubspec.yaml 파일에 추가해야 합니다.

dependencies:
  http: ^0.12.2

그런 다음, GET 요청을 보낼 API의 엔드포인트 URL을 정의해야 합니다. 이 예제에서는 ‘https://api.example.com/scores/{userId}’를 사용하겠습니다. {userId}는 게임 점수를 가져올 사용자의 고유 식별자입니다.

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

final String apiEndpoint = 'https://api.example.com/scores/{userId}';

Future<int> fetchUserScore(String userId) async {
  final response = await http.get(apiEndpoint.replaceFirst('{userId}', userId));
  if (response.statusCode == 200) {
    // API 요청이 성공적으로 완료되었을 때, 응답 바디에서 점수를 추출합니다.
    final score = jsonDecode(response.body)['score'];
    return score;
  } else {
    // API 요청이 실패했을 경우 예외 처리합니다.
    throw Exception('Failed to fetch user score');
  }
}

위의 코드는 fetchUserScore 함수를 정의하고 있습니다. 이 함수는 사용자의 고유 식별자인 userId를 매개변수로 받아서 해당 사용자의 점수를 가져옵니다.

GET 요청을 보내고 응답을 처리하는 부분은 http.get 메소드와 response 객체를 사용하여 이루어집니다. 응답의 상태 코드가 200인 경우에만 응답 바디에서 점수를 추출합니다. 그렇지 않은 경우, 적절한 예외 처리를 수행합니다.

이제 fetchUserScore 함수를 사용하여 플러터 앱에서 사용자의 게임 점수를 가져올 수 있습니다. 예를 들어, 다음과 같이 Text 위젯을 사용하여 점수를 표시할 수 있습니다.

class ScoreWidget extends StatelessWidget {
  final String userId;

  ScoreWidget(this.userId);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<int>(
      future: fetchUserScore(userId),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasData) {
            return Text('Score: ${snapshot.data}');
          } else if (snapshot.hasError) {
            return Text('Failed to fetch score');
          }
        }
        return CircularProgressIndicator();
      },
    );
  }
}

위의 코드는 ScoreWidget 클래스를 정의하고 있습니다. 이 위젯은 userId를 매개변수로 받아서 fetchUserScore 함수를 호출하고, 점수를 가져올 때까지 로딩 인디케이터를 표시합니다. 결과가 성공적으로 도착한 경우, 가져온 점수를 출력하고, 오류가 발생했을 경우 적절한 메시지를 표시합니다.

이와 같은 방식으로 플러터 앱에서 GET 메소드를 사용하여 사용자의 게임 점수를 가져올 수 있습니다.