[ Flutter ] HTTP 통신

POST

💬  서버에 요구하는 포맷에 맞춰 서버로 데이터를 전송하고, 때에 따라 서버에서 회신하는 Response를 받는 작업

예제

💬  두 개의 입력을 받을 수 있는 TextField

💬  값을 입력 후 FloatingButton을 클릭 시 웹 서버에 입력한 값을 지정한 포맷으로 post 후 response를 받아서 화면에 띄워준다.

모델 클래스 만들기

https://app.quicktype.io/

Instantly parse JSON in any language | quicktype

💬  response로 받을 Json 데이터의 포맷에 맞는 예시 데이터를 화면 왼편에 적으면 오른편에 Json에서 String까지의 인코드, 디코드 코드가 포함된 클래스가 만들어지며, 이를 사용하여 모델 클래스를 만든다.

 

코드 작성하기

main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

Future<UserModel> createUser(String name, String jobTitle) async {
  const String apiUrl = "https://reqres.in/api/users";

  // post를 보내고 await로 response를 받아온 것을 response에 넣는다.
  final response = await http.post(apiUrl, body: {
    "name": name,
    "job": jobTitle
  });

  if (response.statusCode == 201) {
    final String responseString = response.body;
    return userModelFromJson(responseString);
  } else {
    return throw Exception('Error');
  }
}

class _MyHomePageState extends State<MyHomePage> {

  late UserModel _user = UserModel(name: "", job: "", id: "", createdAt: DateTime.now());

  final TextEditingController nameController = TextEditingController();
  final TextEditingController jobController = TextEditingController();

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('HTTP Test'),
      ),
      body:Container(
        padding: const EdgeInsets.all(32),
        child: Column(
          children: <Widget>[
            TextField(
              controller: nameController,
            ),
            TextField(
              controller: jobController,
            ),
            const SizedBox(height: 32,),
            Text(
              "User Name : ${_user.name}\n"
              "User Job : ${_user.job}\n"
              "User Id : ${_user.id}\n"
              "Create Time : ${_user.createdAt.toIso8601String()}"
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final String name = nameController.text;
          final String jobTitle = jobController.text;
          final UserModel user = await createUser(name, jobTitle);

          setState(() {
            _user = user;
          });
        },
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

추가 지식

response code

200 (성공) : 서버가 요청을 제대로 처리했다는 의미. 주로 서버가 요청받은 페이지를 제공했다는 의미로 쓰인다.

201 (작성됨) : 성공적으로 요청되었으며, 서버가 새 리소스를 작성했다는 의미로 쓰인다.