ListView with Navigator

 import "package:flutter/material.dart";

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "ListView with Navigator",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const WithNavigator(),
    );
  }
}
class WithNavigator extends StatelessWidget
{
  const WithNavigator({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ListView with Navigator"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: _buildListView(),
    );
  }
  ListView _buildListView()
  {
    List imageList = ["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",
      "assets/images/Flutter_Logo.png", "assets/images/flutter_transparent.JPG",
      "assets/images/geeksforgeeks.png", "assets/images/hand_logo.jpg", "assets/images/oliver_sea.jpg"
    ];

    return ListView.builder(
      itemCount: imageList.length,
      itemBuilder: (context, index) {
        return Card(
          child: SizedBox(
            height: 100.0,
            child: ListTile(
              leading: CircleAvatar(backgroundImage: AssetImage(imageList[index]),),
              title: Text("The list item $index"),
              subtitle: Text("subtitle item $index"),
              trailing: const Icon(Icons.keyboard_arrow_right),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) {
                      return DetailPage(index: "$index", image: imageList[index]);
                    },
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }
}
class DetailPage extends StatelessWidget
{
  DetailPage({super.key, required this.index, required this.image});
  String index;
  String image;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Index $index"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // CircleAvatar(
            //   backgroundImage: AssetImage(image),
            //   radius: 100.0,
            // ),
            Image.asset(image, fit: BoxFit.cover, width: 300.0, height: 300.0),
            const SizedBox(height: 30.0),
            Text("This is the page $index",
              style: const TextStyle(fontSize: 30.0, fontWeight: FontWeight.bold),),
          ],
        ),
      ),
    );
  }
}