[flutter] 플러터 get과 리스트 뷰

26 Dec 2023

flutter

플러터 앱을 개발하다 보면 외부 소스로부터 데이터를 가져와서 리스트 뷰에 표시해야 하는 경우가 많습니다. 이때 get 메서드를 사용하여 데이터를 가져오고, 리스트 뷰에 렌더링하는 방법에 대해 알아보겠습니다.

데이터 가져오기: `get` 메서드 활용

플러터에서 HTTP 요청을 보내 데이터를 가져올 때, 보통 http 패키지의 get 메서드를 사용합니다. 예를 들어, 다음은 http 패키지의 get 메서드를 사용하여 JSON 데이터를 가져오는 간단한 예제입니다.

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

Future fetchData() async {
  var response = await http.get(Uri.parse('https://example.com/data'));
  if (response.statusCode == 200) {
    var data = json.decode(response.body);
    return data;
  } else {
    throw Exception('Failed to load data');
  }
}

위 예제에서는 http.get 메서드를 사용하여 원격 서버에서 데이터를 가져온 다음, json.decode를 사용하여 JSON 형식의 데이터를 해석합니다.

리스트 뷰에 데이터 표시하기

가져온 데이터를 플러터의 리스트 뷰에 표시하려면 ListView.builder 위젯을 사용할 수 있습니다. 다음은 가져온 데이터를 리스트 뷰에 표시하는 예제입니다.

import 'package:flutter/material.dart';

class DataListWidget extends StatelessWidget {
  final Future<List<dynamic>> data;

  DataListWidget({Key key, this.data}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: data,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data[index]['title']),
                subtitle: Text(snapshot.data[index]['description']),
              );
            },
          );
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        return CircularProgressIndicator();
      },
    );
  }
}

위 코드에서는 FutureBuilder를 사용하여 비동기적으로 데이터를 가져온 후, ListView.builder를 이용하여 데이터를 리스트 뷰에 표시합니다.

이제 get 메서드를 사용하여 데이터를 가져오고, 리스트 뷰에 표시하는 방법에 대해 알게 되었습니다. 플러터에서 외부 데이터를 다룰 때 참고하시기 바랍니다.

참고 문헌

데이터 가져오기: get 메서드 활용

리스트 뷰에 데이터 표시하기

데이터 가져오기: `get` 메서드 활용