[Flutter] Flutter http

 

 

 

 

http 패키지 추가하기

dependencies:
  flutter:
    sdk: flutter
  http: 0.13.0

pub.dev/packages/http/example << 여기서 최신 버전을 확인할 수 있음

 

 

 

응답 정보를 커스텀 Dart 객체로 변환하기

좀 더 쉽고 용이하게 하기 위해 http.Response를 Dart 객체로 변환

// data/post.dart
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'],
    );
  }
}

 

 

 

Post를 사용하여 네트워크 요청하기

- 이때, import 'dart:convert'; 선언

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

  if (response.statusCode == 200) {
    // 만약 서버가 OK 응답을 반환하면, JSON을 파싱합니다.
    return Post.fromJson(json.decode(response.body));
  } else {
    // 만약 응답이 OK가 아니면, 에러를 던집니다.
    throw Exception('Failed to load post');
  }
}

 

 

 

데이터 가져오기

- fetch 메서드를 initState() 혹은 didChangeDependencies() 메서드 안에서 호출

- initState() : 딱 1번만 실행됨.

- API 다시 로드하고 싶다면 didChangeDependencies() 사용

class _MyAppState extends State<MyApp> {
  Future<Post> post;
  
  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }
}

▶ fetchPost()를 initSate()에서 호출하는 이유 : Flutter는 무언가 변경될 때마다 build() 메서드 호출하는데, 이 호출은 자주 발생. 만약 네트워크 요청 코드를 build() 메서드에 넣어두면 불필요한 API 요청이 많이 발생해 앱이 느려질 수 있음.

 

 

 

320x100

 

 

데이터 보여주기

- 데이터를 화면에 보여주기 위한 목적으로 FutureBuilder 위젯 사용.

- FutureBuilder : Flutter에 기본적으로 제공되는 위젯으로 비동기 데이터 처리 쉽게 해줌

FutureBuilder<Post>(
   future: post,
   builder: (context, snapshot) {
      if (snapshot.hasData) {
         return Text(snapshot.data.title);
      } else if (snapshot.hasError) {
         return Text("${snapshot.error}");
      }

      // 기본적으로 로딩 Spinner를 보여줍니다.
      return CircularProgressIndicator();
   },
)

 

 

 

 

 

 

 

 

 

최종 코드

import 'dart:convert';

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

// Uncomment lines 7 and 10 to view the visual layout at runtime.
// import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

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

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

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

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

  if (response.statusCode == 200) {
    // 만약 서버가 OK 응답을 반환하면, JSON을 파싱합니다.
    return Post.fromJson(json.decode(response.body));
  } else {
    // 만약 응답이 OK가 아니면, 에러를 던집니다.
    throw Exception('Failed to load post');
  }
}

class _MyAppState extends State<MyApp> {
  Future<Post> post;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>(
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title);
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }

              // 기본적으로 로딩 Spinner를 보여줍니다.
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }

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

 

 

 

 

 

참고 : flutter-ko.dev/docs/cookbook/networking/fetch-data

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