[flutter] ListView 아이템 클릭하기

안녕하세요, 

 

오늘은 ListView의 아이템을 클릭하여 클릭한 아이템의 텍스트를 화면에 출력하는 예제를 만들어보겠습니다. 

 

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '리스트뷰 클릭 예제',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ListViewExample(),
    );
  }
}

class ListViewExample extends StatelessWidget {
  final List<String> items = List<String>.generate(20, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('리스트뷰 클릭 예제'),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
            onTap: () {
              // 아이템 클릭 시 새로운 화면으로 이동
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(item: items[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String item;

  // 생성자를 통해 클릭된 아이템을 전달받음
  DetailScreen({required this.item});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('클릭 화면'),
      ),
      body: Center(
        child: Text(
          '클릭한 아이템 : $item',
          style: TextStyle(fontSize: 24),
        ),
      ),
    );
  }
}

 

 

시연 영상입니다.