플러터 앱을 개발하면서 GridView를 사용하여 여러 개의 아이템을 표시해야 하는 경우가 있습니다. 이때 아이템에 재사용 가능한 커스텀 위젯을 사용하면 코드를 깔끔하게 유지할 수 있습니다. 이 포스트에서는 플러터 GridView에서 아이템에 재사용 가능한 커스텀 위젯을 사용하는 방법에 대해 알아보겠습니다.

1. 커스텀 위젯 만들기

먼저, 재사용 가능한 커스텀 위젯을 만들어야 합니다. 이 위젯은 GridView의 각 아이템에 대한 모양과 동작을 정의합니다.

class MyCustomWidget extends StatelessWidget {
  final String title;

  const MyCustomWidget({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(),
      ),
      child: Center(
        child: Text(title),
      ),
    );
  }
}

위 코드에서 MyCustomWidget은 title을 받아들이고 각 아이템을 위한 컨테이너를 반환하는 간단한 예제입니다.

2. GridView에서 커스텀 위젯 사용하기

이제 MyCustomWidget을 GridView에서 사용하겠습니다. GridView.builder를 사용하여 아이템을 동적으로 렌더링할 수 있습니다.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 4.0,
    mainAxisSpacing: 4.0,
  ),
  itemCount: _items.length,
  itemBuilder: (context, index) {
    return MyCustomWidget(title: _items[index]);
  },
)

위 코드에서 itemCount는 아이템의 개수이고, itemBuilder는 각 아이템에 대해 어떻게 렌더링할지를 정의합니다. 여기서 MyCustomWidget을 사용하여 각 아이템을 나타냅니다.

이제 여러분은 플러터 GridView에서 아이템에 재사용 가능한 커스텀 위젯을 사용하는 방법에 대해 알게 되었습니다. 이를 통해 코드의 가독성을 높이고 유지보수를 용이하게 할 수 있습니다.

더 많은 정보는 플러터 공식 문서를 참고하세요.