[flutter] 플러터 get과 카드 뷰

26 Dec 2023

flutter

이번에는 플러터(Flutter) 앱 개발에서 Get 패키지를 사용하여 데이터를 가져오고, 해당 데이터를 카드 뷰(Card View)로 표시하는 방법에 대해 알아보겠습니다.

Get 패키지란?

Get 패키지는 플러터(Flutter) 앱 개발을 보다 효과적으로 할 수 있도록 돕는 패키지 중 하나입니다. 이 패키지는 화면 전환, 상태 관리, 의존성 주입 등을 보다 쉽게 처리할 수 있도록 도와줍니다.

카드 뷰(Card View) 만들기

먼저, Get 패키지를 사용하려면 pubspec.yaml 파일에 다음과 같이 패키지를 추가해야 합니다.

dependencies:
  get: ^4.1.4

그런 다음, 아래의 예시 코드와 같이 Get 패키지를 사용하여 데이터를 가져오고, 카드 뷰로 표시할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card View with Get'),
        ),
        body: Center(
          child: GetBuilder<DataController>(
            builder: (controller) {
              return ListView.builder(
                itemCount: controller.data.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: ListTile(
                      title: Text(controller.data[index].name),
                      subtitle: Text(controller.data[index].description),
                    ),
                  );
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

class Data {
  String name;
  String description;

  Data({required this.name, required this.description});
}

class DataController extends GetxController {
  var data = <Data>[].obs;

  @override
  void onInit() {
    fetchList();
    super.onInit();
  }

  void fetchList() {
    var fetchedData = [
      Data(name: 'Item 1', description: 'Description for Item 1'),
      Data(name: 'Item 2', description: 'Description for Item 2'),
      Data(name: 'Item 3', description: 'Description for Item 3'),
    ];
    data.assignAll(fetchedData);
  }
}

위 코드에서 DataController 클래스는 Get 패키지의 GetxController를 상속하여 사용하고 있습니다. fetchList 메서드에서 데이터를 가져와 data 변수에 할당하고 있습니다.

이렇게 하면 화면에 리스트 형태의 카드 뷰로 데이터가 표시됩니다.

이상으로, 플러터(Flutter)에서 Get 패키지와 카드 뷰를 사용하는 방법에 대해 알아보았습니다.

더 많은 정보는 아래 Get 패키지 공식 문서를 참고해 주시기 바랍니다.

Get 패키지 공식 문서: Get 패키지 문서