[flutter] 플러터 GridView에서 아이템을 동적으로 추가하고 제거하는 방법은?

18 Dec 2023

flutter

플러터에서 GridView는 유연하고 다양한 형태의 아이템을 표시하는 데에 사용됩니다. 아이템을 동적으로 추가하거나 제거하기 위해서는 몇 가지 방법을 사용할 수 있습니다.

아이템 추가

아이템을 동적으로 추가하기 위해서 List를 활용하는 것이 일반적입니다. 새로운 아이템을 추가할 때마다 리스트에 아이템을 추가하고, 이를 GridView에 반영하여 새로운 아이템을 표시할 수 있습니다.

아래는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Dynamic GridView'),
        ),
        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Card(
              child: Center(
                child: Text(items[index]),
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              items.add('New Item'); //새로운 항목 추가
            });
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

위의 코드에서 FloatingActionButton을 클릭하면 리스트에 새로운 아이템이 추가됩니다.

아이템 제거

아이템을 제거하는 것도 비슷한 방식으로 할 수 있습니다. 아이템 제거를 위해서는 새로운 버튼을 만들고 해당 버튼을 클릭할 때 리스트에서 아이템을 제거하고, GridView를 업데이트합니다.

floatingActionButton: FloatingActionButton(
  onPressed: () {
    setState(() {
      items.removeAt(1); //특정 항목 제거
    });
  },
  child: Icon(Icons.remove),
),

이제 위의 예제 코드에서 FloatingActionButton을 클릭하면 리스트의 두번째 아이템이 제거됩니다.

Grid나 ListView를 사용하여 동적으로 아이템을 추가하고 제거하는 방법에 대해서 알아보았습니다. 위의 예제 코드를 활용하여 자신만의 동적 아이템 추가 및 제거 기능을 구현해보세요.

더 많은 자세한 내용은 Flutter 공식 문서를 참고하세요.