[flutter] 플러터 Dio에서의 커스텀 UI 구현 방법

14 Dec 2023

flutter

Dio는 플러터 앱에서 HTTP 요청을 보내는 데 사용되는 강력한 패키지입니다. 그러나 Dio는 기본적으로 UI 구성 요소를 제공하지 않습니다. 따라서 Dio를 사용하여 데이터를 가져오고 이를 커스텀 UI로 표시하는 방법에 대해 알아보겠습니다.

1. Dio 패키지 추가

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

dependencies:
  dio: ^4.0.0

그런 다음 터미널에서 flutter pub get 명령을 실행하여 패키지를 다운로드합니다.

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

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

import 'package:dio/dio.dart';

class DataManager {
  Dio _dio = Dio();

  Future<Map<String, dynamic>> fetchData() async {
    try {
      Response response = await _dio.get('https://api.example.com/data');
      return response.data;
    } catch (e) {
      print(e);
      return null;
    }
  }
}

위 코드는 Dio를 사용하여 원격 데이터를 가져오는 간단한 예시입니다.

3. 커스텀 UI 구성

데이터를 성공적으로 가져왔다면, 이제 해당 데이터를 사용하여 커스텀 UI를 구성할 수 있습니다. 예를 들어, ListView를 이용하여 데이터를 목록으로 표시하거나, 그래프로 데이터를 시각화할 수 있습니다.

import 'package:flutter/material.dart';

class CustomUI extends StatefulWidget {
  @override
  _CustomUIState createState() => _CustomUIState();
}

class _CustomUIState extends State<CustomUI> {
  DataManager _dataManager = DataManager();
  Map<String, dynamic> _data;

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

  Future<void> _getData() async {
    Map<String, dynamic> data = await _dataManager.fetchData();
    setState(() {
      _data = data;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom UI'),
      ),
      body: _data != null
          ? ListView.builder(
              itemCount: _data.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_data['items'][index]['title']),
                  subtitle: Text(_data['items'][index]['description']),
                );
              },
            )
          : Center(
              child: CircularProgressIndicator(),
            ),
    );
  }
}

위 코드는 데이터를 가져와 ListView를 사용하여 목록을 표시하는 예시입니다.

이와 같이 Dio를 사용하여 데이터를 가져오고, 가져온 데이터를 이용하여 원하는 형태의 커스텀 UI를 구성할 수 있습니다.

결론

Dio를 사용하여 데이터를 가져오고, Flutter의 다양한 UI 구성 요소를 활용하여 데이터를 표시하는 것은 매우 강력한 기능입니다. Dio와 Flutter를 함께 사용하여 사용자 정의 UI를 쉽게 구현할 수 있습니다.