[Flutter] Http POST (json)

Programming/Flutter 2024. 3. 17. 01:55 Posted by 생각하는로뎅
반응형

1. HTTP API 통신을 위해 아래 라이브러리를 사용한다. 

 

https://pub.dev/packages/http

 

http | Dart package

A composable, multi-platform, Future-based API for HTTP requests.

pub.dev

 

 

2. pubspec.yaml

dependencies:
  flutter:
    sdk: flutter

  http: ^1.2.1

 

 

3. 결과를 수신(Response) 받을 클래스를 생성한다.

/// 결과 수신 객체
class ResultResponse {

  // 결과
  final bool result;

  const ResultResponse({required this.result});

  factory ResultResponse.fromJson(Map<String, dynamic> json) {
    return switch (json) {
      {
      'result': bool result,
      } =>
          ResultResponse(
            result: result,
          ),
      _ => throw const FormatException('Failed to load ResultResponse.'),
    };
  }
}

 

 

4. API 를 송신(Send) 하기 위한 login 메소드를 생성한다.

  import 'package:http/http.dart' as http;
  import 'dart:async';
  import 'dart:convert';
  
  /// api 통신
  Future<ResultResponse> login(String id, String password) async {
    final response = await http.post(
      Uri.parse("http://localhost/api경로"),
      headers: <String, String>{
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode(<String, String>{
        'email': id,
        "encryptedPassword" : password
      }),
    );

    if (response.statusCode == 200) {
      // 결과를 반환한다.
      return ResultResponse.fromJson(jsonDecode(response.body) as Map<String, dynamic>);
    } else {
      throw Exception('Failed to login.');
    }
  }

 

 

5. 버튼 혹은 액션을 취했을때, 위에서 만들었던 login 함수를 호출하고, Future 을 이용하여 결과를 확인한다.

 onPressed: () {
 
      // api 호출
      Future<ResultResponse> futureResult = login(idTextController.text, passwordTextController.text);

      // 결과가 이곳으로 들어온다.
      futureResult.then((value) {

          // 결과를 출력한다.
          debugPrint(value.result.toString());

      });
      
  },

 

반응형