[flutter] 플러터 get과 그리드 뷰

26 Dec 2023

flutter

Flutter는 Get 패키지를 사용하여 State Management와 라우팅을 간소화할 수 있고, 그리드 뷰를 통해 데이터를 효과적으로 표현할 수 있습니다.

Get 패키지란?

Get 패키지는 Flutter 애플리케이션의 상태 관리 및 라우팅을 단순화하기 위한 유연한 도구입니다. Get 패키지를 사용하면 상태 관리, 라우팅 및 다국어 처리 등을 더 간단하게 구현할 수 있습니다.

그리드 뷰란?

그리드 뷰는 모바일 앱에서 많은 양의 데이터를 2차원 배열 형태로 표현하는데 사용됩니다. 특히 이미지나 상품 목록과 같은 데이터를 그리드 형태로 화면에 표시하는 데 적합합니다.

Get 패키지와 그리드 뷰의 활용

먼저, Get 패키지를 이용하여 데이터를 받아오고 상태를 관리합니다. 다음으로, 그리드 뷰를 사용하여 데이터를 화면에 효과적으로 표시할 수 있습니다.

Get 패키지 설치

pubspec.yaml 파일에 Get 패키지를 추가합니다.

dependencies:
  get: ^4.1.4

터미널에서 다음 명령어를 실행하여 패키지를 설치합니다.

flutter pub get

Get 패키지를 사용한 데이터 관리

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

class MyController extends GetxController {
  final items = <String>[].obs;

  @override
  void onInit() {
    // 데이터를 불러와서 items에 추가하는 작업 수행
    super.onInit();
  }
}

위 코드에서 items는 Get 패키지의 obs를 사용하여 상태 관리됩니다.

그리드 뷰로 데이터 표시

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

class MyGridView extends StatelessWidget {
  final MyController myController = Get.put(MyController());

  @override
  Widget build(BuildContext context) {
    return Obx(
      () => GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 8,
          crossAxisSpacing: 8,
          childAspectRatio: 1,
        ),
        itemCount: myController.items.length,
        itemBuilder: (context, index) {
          return Container(
            color: Colors.grey[200],
            child: Center(
              child: Text('Item ${myController.items[index]}'),
            ),
          );
        },
      ),
    );
  }
}

위 코드에서 Obx 위젯을 사용하여 상태 변경 시 그리드 뷰를 다시 빌드하고, SliverGridDelegateWithFixedCrossAxisCount를 통해 그리드 뷰의 크기와 간격을 설정합니다.

Flutter의 Get 패키지와 그리드 뷰를 효율적으로 사용하여 애플리케이션의 상태 관리와 데이터 표시를 단순화할 수 있습니다.

위의 예제에 대한 자세한 내용은 아래 링크를 참조하세요.