ListTile with Navigation on Each Tile

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "List With Spaced items",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: ListWithSpaced(),
    );
  }
}
class ListWithSpaced extends StatelessWidget
{
  ListWithSpaced({super.key});
  var items = 10;

  // List UserImage = [Image.asset("assets/images/login_screen_image.png"),
  //   Image.asset("assets/images/Login_screen_image_3.png"),
  //   Image.asset("assets/images/Lord-Hanuman.jpg"),
  //   Image.asset("assets/images/Natural_image.jpg"),
  //   Image.asset("assets/images/quote3.jpg"),
  //   Image.asset("assets/images/login_screen_image.png"),
  //   Image.asset("assets/images/Login_screen_image_3.png"),
  //   Image.asset("assets/images/Lord-Hanuman.jpg"),
  //   Image.asset("assets/images/Natural_image.jpg"),
  //   Image.asset("assets/images/quote3.jpg"),
  // ];

  List<String> userImage2 = ["assets/images/login_screen_image.png", "assets/images/Login_screen_image_3.png",
    "assets/images/Lord-Hanuman.jpg", "assets/images/Natural_image.jpg", "assets/images/quote3.jpg",
    "assets/images/login_screen_image.png", "assets/images/Login_screen_image_3.png",
    "assets/images/Lord-Hanuman.jpg", "assets/images/Natural_image.jpg", "assets/images/quote3.jpg"];

  List titleList = ["login_screen_image", "Login_screen_image_3", "Lord-Hanuman", "Natural_image",
  "quote3", "login_screen_image", "Login_screen_image_3", "Lord-Hanuman", "Natural_image", "quote3"];

  List subtitleList = ["Image 1", "Image 2", "Image 3", "Image 4", "Image 5", "Image 6", "Image 7",
                "Image 8", "Image 9", "Image 10"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListTile with Spaced items"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          return SingleChildScrollView(
            child: ConstrainedBox(
              constraints: BoxConstraints(minHeight: constraints.maxHeight),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: List.generate(items, (index) {
                  return ItemWidget(text: "Item $index", title: titleList[index],
                      subtitle: subtitleList[index], imageUrl: userImage2[index], index: "$index");
                },),
              ),
            ),
          );
        },
      ),
    );
  }
}
class ItemWidget extends StatelessWidget
{
  const ItemWidget({super.key, required this.text, required this.title, required this.subtitle,
    required this.imageUrl, required this.index});
  final String text;
  final String title;
  final String subtitle;
  final String imageUrl;
  final String index;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: SizedBox(
        height: 80.0,
        child: ListTile(
          leading: CircleAvatar(backgroundImage: AssetImage(imageUrl)),
          title: Text(title, style: const TextStyle(fontWeight: FontWeight.bold),),
          subtitle: Text(subtitle),
          trailing: const Icon(Icons.keyboard_arrow_right),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) {
                  return SecondPage(text: text, index: index, imagePath: imageUrl, title: title);
                },
              ),
            );
          },
        ),
      ),
    );
  }
}
class SecondPage extends StatelessWidget
{
  const SecondPage({super.key,required this.text, required this.index,
    required this.imagePath, required this.title});
  final String text;
  final String index;
  final String imagePath;
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("This is $index image",
              style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),),
            const SizedBox(height: 10.0),
            Text(title, style: const TextStyle(fontWeight: FontWeight.bold),),
            const SizedBox(height: 20.0),
            CircleAvatar(
              backgroundImage: AssetImage(imagePath),
              maxRadius: 120.0,
            ),
            const SizedBox(height: 20.0),
            Text(text, style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 30.0),),
          ],
        ),
      ),
    );
  }
}