플러터(Flutter) #

플러터란 #

• Flutter 개요 : http://www.incodom.kr/Flutter
• Flutter 설치 : http://www.incodom.kr/Flutter/setting
• Flutter state(상태) : http://www.incodom.kr/Flutter/state
• Flutter FCM(알림메세지) : http://www.incodom.kr/Flutter/FCM
• Flutter http : http://www.incodom.kr/Flutter/http

post #

1. Flutter - get/post code
2. Server - get/post code
3. Result
4. Full code

Flutter - get/post code #

• 선언

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

httpClient를 http로 별칭을 붙여 라이브러리를 사용하는 선언이다.

• UI

Get, Post 버튼을 각 각 floatingActionsButton으로 생성한 후, 결과에 맞게 화면 중앙의 Text를 변경시킨다.

• get : 해당 url에 요청/응답을 진행한다.

Align(
      alignment: Alignment.bottomCenter,
      child: FloatingActionButton(
        onPressed: () async {
          http.Response _res = await http.get("$_url/");
          print(_res.statusCode);
          print(_res.body);
          setState(() {
            _text = _res.body;
          });
        },
        child: Icon(Icons.chevron_left),
      ),
     ),

• post : 해당 url에 데이터를 body에 담아 요청/응답을 진행한다.

Align(
        alignment: Alignment.bottomRight,
        child:  FloatingActionButton(
          onPressed: () async {
            var data = {
              "id" : "ID0205",
              "name" : "이병준",
              "age" : "25"
            };
            var body = json.encode(data);
            http.Response _res = await http.post("$_url/data", 
                headers: {"Content-Type": "application/json"}, 
                body: body
                );
            print(_res.statusCode);
            print(_res.body);
            setState(() {
              _text = _res.body;
            });
          },
          child: Icon(Icons.chevron_right),
        ),
      )

Server - get/post code #

get/post로 해당하는 url에 요청을 받아 res.send()로 응답하여 데이터를 res.body에 담아 전달한다.

var express = require('express'); // express를 import(적용)
var app = express(); // express를 실행시키고 별칭으로 app

app.use(express.json()); // json 요청을 받겠다.

app.get('/', function(req,res){
    console.log('---get방식이 구동되었습니다.---');
    var text = 'get으로 나타나는 데이터!';
    console.log("전송데이터 : " + text)
    res.send(text);
});

app.post('/data', function(req,res){
    var data  = req.body;

    console.log('---post방식이 구동되었습니다.---');
    console.log(data);
    var text = data.id + ' ' + data.name + ' ' + data.age + '살';
    console.log("전송데이터 : " + text)
    res.send(text);
});

app.listen(3000); // 3000 포트

Result #

• 구동

• Flutter cmd

  • 200 : 상태코드( 200 : 성공 )
  • 서버로부터 받아지는 text data

• Server cmd

  • post시, flutter로부터 넘겨받는 데이터
  • 전송데이터 : 서버가 flutter로 건네는 데이터

Full code #

모든 코드는 해당 링크에서 확인할 수 있다. GitHub_code

Suggested Pages #

• 0.025 Android
• 0.025 iOS
• More suggestions...