[flutter] 플러터 get과 이미지 처리

26 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter) 앱에서 HTTP 요청을 보내고 응답으로 받은 이미지를 처리하는 방법에 대해 알아보겠습니다. 먼저 http 패키지를 사용하여 GET 요청을 보내고, 받은 이미지를 디코딩하여 이미지 위젯에 표시하는 방법을 다룰 것입니다.

GET 요청 보내기

먼저 http 패키지를 사용하여 GET 요청을 보내는 방법을 살펴봅시다.

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

Future<http.Response> fetchImage() {
  return http.get('https://example.com/image.jpg');
}

위 코드에서 http.get() 메서드를 사용하여 원하는 이미지 URL에 GET 요청을 보낼 수 있습니다. 이렇게 보낸 요청의 응답은 Future<http.Response> 형태로 반환됩니다.

이미지 디코딩 및 표시

이제 받은 응답을 디코딩하여 이미지로 표시하는 방법을 살펴봅시다.

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

class ImageFromUrl extends StatefulWidget {
  @override
  _ImageFromUrlState createState() => _ImageFromUrlState();
}

class _ImageFromUrlState extends State<ImageFromUrl> {
  Future<Uint8List> _fetchImage() async {
    final response = await http.get('https://example.com/image.jpg');
    if (response.statusCode == 200) {
      return response.bodyBytes;
    } else {
      throw Exception('Failed to load image');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: _fetchImage(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
          return Image.memory(
            snapshot.data,
            fit: BoxFit.cover,
          );
        } else if (snapshot.hasError) {
          return Text('Failed to load image');
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

위 코드는 ImageFromUrl 위젯을 만들고, http.get() 메서드를 사용하여 이미지를 가져와 Image.memory 위젯을 사용해 이미지를 디스플레이하는 방법을 보여줍니다. Image.memory 위젯은 바이트(위 코드에서는 snapshot.data) 형태로 이미지를 받아 화면에 표시할 수 있도록 해줍니다.

이상으로, 플러터에서 HTTP GET 요청을 보내고 받은 이미지를 디스플레이하는 방법에 대해 알아보았습니다. 이를 통해 앱에서 외부 이미지를 가져와 효과적으로 활용할 수 있게 되었습니다.

참고 자료

Flutter HTTP 통신