플러터(Flutter) HTTP 통신 알아보기 -1

패키지 추가

 

pubspec.yaml 파일에 http 패키지를 추가하고 pub get 혹은 flutter pub get 명령어로 해당 패키지를 설치합니다.

 

pubspec.yaml

name: http_1
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  
  cupertino_icons: ^0.1.2
  
  http: ^0.12.2

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

 

 

 

예제

 

아래 참고 링크에 단일 데이터를 가져오는 코드를 수정해서 JSON Array 를 ListView.builder 를 통해서 동적인 ListView 로 구성했습니다.

 

import 'dart:async';
import 'dart:convert';

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

Future<List<Post>> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    List list = jsonDecode(response.body);
    var postList = list.map((element) => Post.fromJson(element)).toList();
    return postList;
  } else {
    throw Exception('Failed to load post');
  }
}
    
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

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

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Future<List<Post>> postList;

  @override
  void initState() {
    super.initState();
    postList = fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'jvvp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTTP GET'),
        ),
        body: Center(
          child: FutureBuilder<List<Post>>(
            future: postList,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index){
                    Post post = snapshot.data[index];
                    return Card(
                      child: ListTile(
                        title: Text(post.title),
                      )
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

 

 

패키지를 import 할 때는 다음과 같이 합니다.

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

 

HTTP GET 요청을 통해 JSON Array 응답을 Post 객체 List 로 반환하는 함수입니다.

지난 포스팅에서 JSON 다루는 방법을 소개했었습니다.

Future<List<Post>> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    List list = jsonDecode(response.body);
    var postList = list.map((element) => Post.fromJson(element)).toList();
    return postList;
  } else {
    throw Exception('Failed to load post');
  }
}

 

initState() 를 통해 해당 클래스가 호출되면 Post 객체의 list 를 가져옵니다.

body 에는 ListView.builder 를 통해 list 의 크기만큼 Card Widget 를 생성하여 Title 을 출력합니다.

class _MyAppState extends State<MyApp> {
  Future<List<Post>> postList;

  @override
  void initState() {
    super.initState();
    postList = fetchPost();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'jvvp',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTTP GET'),
        ),
        body: Center(
          child: FutureBuilder<List<Post>>(
            future: postList,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: (context, index){
                    Post post = snapshot.data[index];
                    return Card(
                      child: ListTile(
                        title: Text(post.title),
                      )
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

 

 

 

 

참고

인터넷에서 데이터 가져오기

JSONPlaceholder - Fake online REST API for developers