[flutter] Dio를 사용하여 서버로부터 받은 데이터를 가공하여 화면에 표시하는 방법을 알려주세요.

11 Dec 2023

flutter

Dio는 강력한 HTTP 클라이언트 라이브러리로, Flutter 애플리케이션에서 서버로부터 데이터를 가져와 가공하는 데 사용됩니다. 이 글에서는 Dio를 사용하여 서버로부터 받은 데이터를 가져와 화면에 표시하는 방법에 대해 알아보겠습니다.

Dio 라이브러리 소개

Dio는 Dart 언어로 작성된 강력한 HTTP 클라이언트 라이브러리로, RESTful API를 호출하고 데이터를 가져오는 데 사용됩니다.

Dio를 사용하여 데이터 가져오기

먼저, pubspec.yaml 파일에 Dio 라이브러리를 추가합니다. 이후 flutter pub get 명령어를 통해 의존성을 설치합니다.

dependencies:
  dio: ^4.0.0

다음으로, Dio를 사용하여 서버로부터 데이터를 가져오는 코드를 작성합니다.

import 'package:dio/dio.dart';

void fetchData() async {
  try {
    var response = await Dio().get('https://api.example.com/data');
    var data = response.data;
    // 데이터 처리 로직 추가
  } catch (e) {
    print('Error fetching data: $e');
  }
}

가져온 데이터를 화면에 표시하기

가져온 데이터를 화면에 표시하려면 fetchData 함수에서 가져온 데이터를 상태 관리 변수에 저장한 후, 화면 위젯에서 해당 데이터를 사용하여 UI를 업데이트합니다.

import 'package:flutter/material.dart';

class DataScreen extends StatefulWidget {
  @override
  _DataScreenState createState() => _DataScreenState();
}

class _DataScreenState extends State<DataScreen> {
  var _data = '';

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

  fetchData() async {
    try {
      var response = await Dio().get('https://api.example.com/data');
      setState(() {
        _data = response.data;
      });
    } catch (e) {
      print('Error fetching data: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Data Screen'),
      ),
      body: Center(
        child: Text(_data),
      ),
    );
  }
}

이제 _DataScreenState 클래스의 build 메서드에서 가져온 데이터를 화면에 표시할 준비가 되었습니다.

이렇게 하면 Dio를 사용하여 서버로부터 데이터를 가져와서 화면에 표시할 수 있습니다.

이제 Dio를 사용하여 서버로부터 데이터를 가져와 화면에 표시하는 방법에 대해 알아보았습니다. Dio의 강력한 기능을 활용하여 Flutter 애플리케이션에서 서버로부터의 데이터 요청과 처리를 보다 용이하게 할 수 있습니다.

TOC

Dio 라이브러리 소개

Dio를 사용하여 데이터 가져오기

가져온 데이터를 화면에 표시하기