[flutter] ListView에서 아이템을 클릭하여 상세 정보 보기

08 Dec 2023

flutter

Flutter 앱을 개발할 때, ListView를 사용하여 목록을 표시하고, 이 목록에서 아이템을 클릭했을 때 상세 정보를 보여주어야 하는 상황이 있을 수 있습니다. 이러한 기능을 구현하기 위해 onTap 이벤트를 ListView 아이템에 추가하여 상세 페이지로 이동하는 방법을 알아보겠습니다.

ListView 구성하기

먼저, ListView를 구성해야 합니다. ListView.builder를 사용하여 동적인 아이템 목록을 표시할 수 있습니다. 아래는 ListView.builder를 사용한 간단한 예시입니다.

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(items[index].title),
      subtitle: Text(items[index].subtitle),
      onTap: () {
        // 아이템을 클릭했을 때 처리할 내용 추가
      },
    );
  },
)

상세 페이지로 이동하기

ListView의 아이템을 클릭했을 때 상세 페이지로 이동하기 위해서는 Navigator를 사용하여 새로운 화면으로 이동해야 합니다. MaterialPageRoute를 이용하여 상세 페이지로 아이템 정보를 전달할 수 있습니다.

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

상세 페이지 구성하기

이제, 상세 페이지(DetailScreen)를 구성해야 합니다. 이 페이지에서는 아이템의 상세 정보를 표시합니다.

class DetailScreen extends StatelessWidget {
  final Item item;

  DetailScreen({required this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(item.title),
            Text(item.subtitle),
            // 상세 정보 표시
          ],
        ),
      ),
    );
  }
}

이제 ListView에서 아이템을 클릭하면 상세 페이지로 이동하며, 상세 페이지에서는 선택한 아이템의 정보를 표시할 수 있습니다.

이와 같이 ListView를 사용하여 목록을 표시하고 클릭하여 상세 정보를 보는 방법을 알아보았습니다. 개발하시는 과정에서 도움이 되기를 바라며, 언제든지 질문하시면 도움을 드리겠습니다.

참고 자료: