Flutter 7주차 (2) - http 패키지 이용하기

Flutter 7주차 (2) - http 패키지 이용하기

 

 

목차

 

 

http 패키지 설치하기

 

http 패키지를 사용한 통신 연습을 진행하기 위해 패키지 설치를 진행해보자.

 

먼저, pub.dev 로 이동하여 http를 검색해보자.

실습에서 사용할 패키지는 맨 위에 검색된 http 패키지이다. 해당 패키지 이름을 클릭하여 들어가자.

 

 

 

Using을 읽어보면 패키지를 import 할 때 as를 사용해서 http로 줄여서 사용하는 것을 권장하고 있다.

 

 

 

 

이제 Installing 탭으로 이동해서 설명처럼 pubspec.yaml 파일에 dependencies안에 http를 추가한 후 pub get을 눌러 설치하자.

 

 

 

 

다트 파일 작성하기

 

이제 http 패키지를 사용한 다트 파일을 아래와 같이 작성해보자.

 

lib 폴더 아래에 http라는 디렉터리를 하나 만들고 안에 test.dart 파일을 만들고 코드를 작성하자.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HttpApp(),
    );
  }
}

class HttpApp extends StatefulWidget {
  @override
  State<HttpApp> createState() => _HttpAppState();
}

class _HttpAppState extends State<HttpApp> {
  String result = ' ';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Http Example 202316035 박준혁'),
      ),
      body: Container(
        child: Center(
          child: Text('$result'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var url = 'http://www.google.com';
          var response = await http.get(Uri.parse(url));
          setState(() {
            result = response.body;
          });
        },
        child: Icon(Icons.file_download),
      ),
    );
  }
}

 

위 코드는 floatingActionButton을 클릭하면 http://www.google.com 으로 get 요청을 보내고 응답을 response 변수로 받고, 응답의 body값을 출력하게 된다.

 

실행 결과는 아래와 같다.

 

 

 

 

http://www.google.com 으로 요청을 보내니까 응답이 오는것은 확인이 되는데 이 url은 API가 아니기 때문에 그 값을 읽기가 쉽지 않다.

 

이번에는 응답값을 확인하기 쉬운 테스트용 API를 사용하여 요청을 보내어 응답값을 확인해보자.

 

같은 디렉터리에 test2.dart 파일을 만들어 아래와 같이 코드를 작성하자.

 

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HttpApp(),
    );
  }
}

class HttpApp extends StatefulWidget {

  @override
  State<HttpApp> createState() => _HttpAppState();
}

class _HttpAppState extends State<HttpApp> {
  String result = ' ';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Http Example 202316035 박준혁'),
      ),
      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Center(
          child: SingleChildScrollView(
            child: Text(result),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          var url = 'https://jsonplaceholder.typicode.com/posts/1';
          var response = await http.get(Uri.parse(url));
          if (response.statusCode == 200) {
            setState(() {
              result = response.body;
            });
          } else {
            setState(() {
              result = 'Failed to load data';
            });
          }
        },
        child: Icon(Icons.file_download),
      ),
    );
  }
}

 

 

실행 결과는 아래와 같다.

 

 

 

응답값이 잘 가공되어 있는 https://jsonplaceholder.typicode.com/posts/1 API로 요청을 보내니 위와 같이 key:value 형태의 JSON 응답을 받을 수 있다.