[flutter] 플러터 GridView에서 아이템에 버튼을 추가하는 방법은?

18 Dec 2023

flutter

플러터에서 GridView를 사용하여 그리드 레이아웃을 만들 때 각 아이템에 버튼을 추가하려면 다음과 같이 할 수 있습니다.

먼저, GridView의 itemBuilder 속성을 사용하여 아이템을 생성합니다.
각 아이템을 위젯으로 만들어 반환하는 함수를 작성합니다.
해당 위젯 안에 버튼을 추가합니다.

아래는 예시 코드입니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
  ),
  itemCount: items.length,
  itemBuilder: (BuildContext context, int index) {
    return GridItemWidget(
      item: items[index],
      onPressed: () {
        // 버튼이 클릭됐을 때의 동작
        // 여기에 처리할 내용을 작성합니다.
      },
    );
  },
);

class GridItemWidget extends StatelessWidget {
  final Item item;
  final VoidCallback onPressed;

  GridItemWidget({required this.item, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          // 여기에 아이템을 표시하는 내용을 작성합니다.
          Text(item.name),
          Image.network(item.imageUrl),
          // 버튼 추가
          ElevatedButton(
            onPressed: onPressed,
            child: Text('버튼'),
          ),
        ],
      ),
    );
  }
}

위 코드에서 GridItemWidget은 각 그리드 아이템을 표현하는 위젯이며, 여기에 버튼이 추가되어 있습니다.

이렇게 하면 GridView의 각 아이템에 버튼을 추가할 수 있습니다.

더 복잡한 상황에 따라 추가적인 조치가 필요할 수 있으므로 실제 사용하는 상황에 맞게 코드를 수정하시면 됩니다.