[Flutter] http 통신(Post)

저번에 get 을 이용해서 서버에서 데이터를 가져오는 것을 해보았으니 이번에는 post를 이용해서 서버에 데이터를 보내는걸 해보도록 하겠습니다.

TextEditingController

TextField에서 작성한 값을 서버로 전송할 계획인데 이렇게 하기 위해서는 TextEditingController()를 이용해줘야합니다.

final TextEditingController namecontroller = TextEditingController();

 

이렇게 namecontroller를 선언해주고 나중에 TextField에서는

 

children: [
  TextField(
    controller: namecontroller,
    decoration: const InputDecoration(hintText: 'Enter Title'),
  ),

 

이런식으로 컨트롤러를 지정해주면됩니다. 나중에 필드에 입력된 값을 보낼때는 namecontroller.text 를 인수로 사용하면 됩니다. (컨트롤러명.text 형태)

 

http.post

처음에는 텍스트 필드를 사용하기보다는 일단 콘솔에서 값이 잘 전달되는지 확인해보고자 하였습니다.

서버는 php로 구성되었으며 post로 데이터를 받으면 그 값을 다시 response해주는 형태로 이루어져있습니다.

아래의 값이 아무값도 전달하지 않은 response 상태입니다.

 

{"http_status":"200","message":"값이 잘 전송되었습니다.","loc_code":"","name":"","regdate":"","rating":"","content":"","imglink":""}

 

Textfield에서 작성한 값이 name이라는 매개변수로 전송된 후 name의 값이 변경 되게 하려고했습니다.

Future<String> call(String name) async {
  var url = Uri.parse('url');
  Map data = {'name': name};
  var body=json.encode(data);

  var response = await http.post(url, body: body);

  print("${response.statusCode}");
  print("${response.body}");

  return response.body;
}

 

실행해보니 출력은 잘 되는데 name 값을 분명 전달했는데도 null로 나와서 한참을 헤맸습니다...

찾아보니 서버에 데이터를 넘겨줄때 json형태로 넘겨주는게 아니라 그냥 값을 바로 넘겨줘야하는 거였습니다..!

(저는 Flutter에서 프론트 담당이고, 서버는 담당하는 사람이 따로 있는데 그분이 코드를 json형식으로 값을 받는게 아니라 따로따로 값 받으면 바로 response해주는 형태로 만드셔서 더 헤맸습니다..커뮤니케이션의 중요성을 알게된...)

 

 

그리고 한글이 나와야하는 부분에 텍스트가 깨진게 보이는데, 이부분을 제대로 출력되게 하기 위해서는

utf8.decode(response.bodyBytes)을 이용해서 디코딩 해줘야합니다.

 

Future<String> call(String name) async {
  var url = Uri.parse('url');
  Map data = {'name': name};

  var response = await http.post(url, body: data);

  var responseBody = utf8.decode(response.bodyBytes);

  print("${response.statusCode}");
  print(responseBody);

  return responseBody;
}

 

해당 코드를 실행해보면 

 

 

name에 값이 정상적으로 들어간 모습을 볼 수 있습니다! Post가 성공적으로 이루어진 것입니다!