Flutter 앱을 개발하다 보면 ListView를 사용하여 여러 항목을 표시하고, 사용자가 특정 항목을 선택했을 때 다른 화면으로 이동해야 하는 경우가 있습니다. 이를 위해 ListView의 아이템을 선택하는 방법 및 선택한 항목을 다른 화면에 전달하는 방법에 대해 알아보겠습니다.

ListView에 아이템 선택 기능 추가하기

Flutter에서 ListView를 사용하여 아이템을 표시한 후, 아이템을 선택했을 때 처리를 하려면 각 아이템에 GestureDetector나 InkWell을 추가하여 탭 이벤트를 처리할 수 있습니다.

ListView.builder(
  itemCount: itemList.length,
  itemBuilder: (context, index) {
    return GestureDetector(
      onTap: () {
        // 선택한 아이템 처리 로직
      },
      child: ListTile(
        title: Text(itemList[index].title),
      ),
    );
  },
)

여기서 onTap 콜백 함수 내부에서 선택한 아이템의 정보를 전달하는 방법에 대해 살펴보겠습니다.

선택한 아이템 정보 다른 화면으로 전달하기

선택한 아이템 정보를 다른 화면으로 전달하기 위해서는 Navigator.push 메서드를 사용하여 새로운 화면으로 이동해야 합니다.

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => DetailScreen(item: itemList[index]),
    ),
  );
}

위 코드에서 DetailScreen은 선택한 아이템을 표시하는 화면이고, 선택한 아이템은 itemList[index]로 전달됩니다.

마치며

이제 ListView에서 아이템을 선택하여 다른 화면으로 이동하는 방법에 대해 알아보았습니다. ListView를 사용하여 다양한 항목을 표시하고, 선택한 항목에 따라 다른 화면으로 전환하는 기능은 Flutter 앱에서 자주 사용되므로, 유용한 패턴이라고 할 수 있습니다.

참고문헌

• Flutter ListView Class
• Flutter Documentation