[flutter] Dio를 사용하여 서버로부터 받은 이미지를 표시하는 방법을 알려주세요.

11 Dec 2023

flutter

서버로부터 이미지를 받아 Dio를 사용하여 Flutter 앱에서 표시하는 방법을 다음과 같이 설명하겠습니다.

Dio 패키지 추가하기

먼저, pubspec.yaml 파일에 Dio 패키지를 추가합니다.

dependencies:
  dio: ^4.0.0

그런 다음, pubspec.yaml 파일을 저장하고 터미널에서 flutter pub get을 실행하여 패키지를 설치합니다.

이미지를 로드하여 표시하기

다음으로, Dio를 사용하여 서버로부터 이미지를 로드하고 표시하는 방법을 알아봅시다.

import 'package:flutter/material.dart';
import 'package:dio/dio.dart'; // Dio 패키지 import

class ImageFromServer extends StatefulWidget {
  @override
  _ImageFromServerState createState() => _ImageFromServerState();
}

class _ImageFromServerState extends State<ImageFromServer> {
  Dio dio = Dio();

  String imageUrl = 'YOUR_IMAGE_URL'; // 이미지 URL

  Future<void> fetchImage() async {
    try {
      Response response = await dio.get(imageUrl, options: Options(responseType: ResponseType.bytes));
      setState(() {
        _imageBytes = response.data;
      });
    } catch (e) {
      print(e);
    }
  }

  @override
  void initState() {
    super.initState();
    fetchImage();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image from Server'),
      ),
      body: Center(
        child: _imageBytes != null
            ? Image.memory(
                _imageBytes,
                fit: BoxFit.contain,
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

이 코드는 Dio 패키지를 사용하여 서버에서 이미지를 로드하여 화면에 표시하는 예제입니다.

이제, Dio를 사용하여 Flutter 앱에서 서버로부터 이미지를 표시하는 방법을 알 수 있었습니다.