Afficher une image d'une liste dans une autre page après click

Bonjour a tous je debut avec flutter et je m'excercie à afficher des images avec des informations leurs concernants que j'ai stocker dans une liste. Maintenent j'aimerais après un click sur une image quelconque, afficher l'image et l'infomation le concernant dans une autre page. je vous montre mon code
merci:
import ‹ models/produit.dart ›;

final List hotelList = [

  {

    'Titre': 'NOVOTEL HOTEL',

    'Place': 'Plateau ',

    'Distance': 2,

    'NombreDeVue': 22,

    'Images': 'images/hotels_10.jpg',

    'Prix': '15.000 F',

  },

  {

    'Titre': 'AZALAI HOTEL',

    'Place': 'Marcory ',

    'Distance': 3,

    'NombreDeVue': 32,

    'Images': 'images/hotels_1.jpg',

    'Prix': '25.000 F',

  },

  {

    'Titre': 'IBIS HOTEL',

    'Place': 'Koumassi ',

    'Distance': 2,

    'NombreDeVue': 12,

    'Images': 'images/hotels_8.jpg',

    'Prix': '35.000 F',

  },

  {

    'Titre': 'AITCHI HOTEL',

    'Place': 'Plateau ',

    'Distance': 2,

    'NombreDeVue': 19,

    'Images': 'images/hotels_3.jpg',

    'Prix': '10.000 F',

  },

  {

    'Titre': 'IVOIRE HOTEL',

    'Place': 'Cocody ',

    'Distance': 8,

    'NombreDeVue': 35,

    'Images': 'images/hotels_1.jpg',

    'Prix': '45.000 F',

  },

];

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';

import 'package:hotels/DetailHotel.dart';

import 'package:hotels/calandrier.dart';

import 'package:hotels/main.dart';

import 'constant.dart';

class HomePage extends StatelessWidget {

  const HomePage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: const MyAppBar(),

      //SingleChildScrollView permet d'adatper son body a l'ecran

      body: SingleChildScrollView(

        child: Column(

          children: [

            SearchSection(),

            HotelSection(),

          ],

        ),

      ),

    );

  }

}

class MyAppBar extends StatelessWidget implements PreferredSizeWidget {

  const MyAppBar({Key? key}) : super(key: key);

  @override

  Size get preferredSize => const Size.fromHeight(50);

  @override

  Widget build(BuildContext context) {

    return AppBar(

      leading: IconButton(

        icon: Icon(

          Icons.arrow_back,

          color: Colors.grey[800],

          size: 20,

        ),

        onPressed: () {},

      ),

      title: Text(

        'Explore',

        style: GoogleFonts.nunito(

          color: Colors.black,

          fontSize: 22,

          fontWeight: FontWeight.w800,

        ),

      ),

      actions: [

        IconButton(

          icon: Icon(

            Icons.favorite_outline_rounded,

            color: Colors.grey[800],

            size: 20,

          ),

          onPressed: () {},

        ),

        IconButton(

          icon: Icon(

            Icons.place,

            color: Colors.grey[800],

            size: 20,

          ),

          onPressed: () {},

        ),

      ],

      centerTitle: true, //forcer le texte à se centrer

      backgroundColor: Colors.white,

    );

  }

}

class SearchSection extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

      //height: 200,

      color: Colors.grey[200],

      padding: const EdgeInsets.fromLTRB(10, 25, 10, 10),

      child: Column(

        children: [

          Row(

            children: [

              Expanded(

                child: Container(

                  padding: const EdgeInsets.only(left: 5),

                  decoration: BoxDecoration(

                    color: Colors.white,

                    borderRadius: BorderRadius.circular(30),

                    boxShadow: [

                      BoxShadow(

                        color: Colors.grey.shade300,

                        blurRadius: 4,

                        offset: const Offset(0, 3),

                      ),

                    ],

                  ),

                  child: const TextField(

                    decoration: InputDecoration(

                      hintText: 'Abidjan',

                      contentPadding: EdgeInsets.all(10),

                      border: InputBorder.none,

                    ),

                  ),

                ),

              ),

              const SizedBox(

                width: 10,

              ),

              Container(

                height: 50,

                width: 50,

                decoration: BoxDecoration(

                  //color: Colors.green,

                  boxShadow: [

                    BoxShadow(

                      color: Colors.grey.shade300,

                      blurRadius: 4,

                      offset: const Offset(0, 4),

                    ),

                  ],

                  borderRadius: const BorderRadius.all(

                    Radius.circular(25),

                  ),

                ),

                child: ElevatedButton(

                  onPressed: () {},

                  child: const Icon(

                    Icons.search,

                    size: 26,

                  ),

                  style: ElevatedButton.styleFrom(

                    shape: const CircleBorder(),

                    padding: const EdgeInsets.all(10),

                    primary: d_green,

                  ),

                ),

              ),

            ],

          ),

          //const SizedBox(height: 50, ),

          Row(

            mainAxisAlignment:

                MainAxisAlignment.spaceBetween, //espacer des elements

            children: [

              Container(

                margin: EdgeInsets.all(10),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: [

                    new InkWell(

                      onTap: () {

                        Navigator.push(context,

                            MaterialPageRoute(builder: (context) {

                          return CalandrierPage();

                        }));

                      },

                      child: Text(

                        'Choisir la Date',

                        style: GoogleFonts.nunito(

                          color: Colors.grey,

                          fontSize: 15,

                        ),

                      ),

                    ),

                    const SizedBox(

                      height: 5,

                    ),

                    Text(

                      '27 Mai - 05 Jui',

                      style: GoogleFonts.aclonica(

                        color: Colors.black,

                        fontSize: 14,

                      ),

                    ),

                  ],

                ),

              ),

              Container(

                margin: EdgeInsets.all(10),

                child: Column(

                  crossAxisAlignment: CrossAxisAlignment.start,

                  children: [

                    Text(

                      'Nombre de Chambre',

                      style: GoogleFonts.nunito(

                        color: Colors.grey,

                        fontSize: 15,

                      ),

                    ),

                    const SizedBox(

                      height: 5,

                    ),

                    Text(

                      '1 Chambre - 2 Adultes',

                      style: GoogleFonts.aclonica(

                        color: Colors.black,

                        fontSize: 14,

                      ),

                    ),

                  ],

                ),

              ),

            ],

          )

        ],

      ),

    );

  }

}

class HotelSection extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Container(

      //height: 2000,

      padding: EdgeInsets.all(10),

      color: Colors.white,

      child: Column(

        children: [

          Container(

            //color: Colors.red,

            height: 50,

            child: Row(

              mainAxisAlignment:

                  MainAxisAlignment.spaceBetween, //espacer des elements

              children: [

                Text(

                  '550 Hotel trouvés',

                  style: GoogleFonts.nunito(

                    color: Colors.black,

                    fontSize: 14,

                  ),

                ),

                Row(

                  children: [

                    Text(

                      "Filter",

                      style: GoogleFonts.nunito(

                        color: Colors.black,

                        fontSize: 14,

                      ),

                    ),

                    const IconButton(

                      onPressed: null,

                      icon: Icon(

                        Icons.filter_list_outlined,

                        color: d_green,

                      ),

                    ),

                  ],

                ),

              ],

            ),

          ),

          Column(

            children: hotelList.map((hotel) {

              return HotelCard(hotel);

            }).toList(),

          ),

        ],

      ),

    );

  }

}

class HotelCard extends StatelessWidget {

  final Map hotelData;

  HotelCard(this.hotelData);

  @override

  Widget build(BuildContext context) {

    return Container(

      margin: EdgeInsets.all(10),

      height: 230,

      width: double.infinity,

      decoration: BoxDecoration(

        color: Colors.white,

        borderRadius: const BorderRadius.all(

          Radius.circular(18),

        ),

        boxShadow: [

          BoxShadow(

            color: Colors.grey.shade200,

            spreadRadius: 4,

            blurRadius: 6,

            offset: Offset(0, 3),

          ),

        ],

      ),

      child: Column(

        children: [

          InkWell(

            onTap: () {

              Navigator.push(

                context,

                MaterialPageRoute(builder: (context) {

                  return detailHotel();

                }),

              );

            },

            child: Container(

              height: 140,

              decoration: BoxDecoration(

                borderRadius: const BorderRadius.only(

                  //pour arrondire les bords

                  topLeft: Radius.circular(18),

                  topRight: Radius.circular(18),

                ),

                //color: Colors.red,

                image: DecorationImage(

                  image: AssetImage(

                    hotelData['Images'],

                  ),

                  fit: BoxFit.cover, //adapter l'image a son boxdecoration

                ),

              ),

              child: Stack(

                children: [

                  Positioned(

                    top: 5,

                    right: -15,

                    child: MaterialButton(

                      color: Colors.white,

                      shape: CircleBorder(),

                      onPressed: () {},

                      child: const Icon(

                        Icons.favorite_outline_rounded,

                        color: d_green,

                        size: 20,

                      ),

                    ),

                  )

                ],

              ),

            ),

          ),

          Container(

            margin: EdgeInsets.fromLTRB(10, 10, 10, 0),

            child: Row(

              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              children: [

                Text(

                  hotelData['Titre'],

                  style: GoogleFonts.alice(

                      fontSize: 14, fontWeight: FontWeight.w800),

                ),

                Text(

                  hotelData['Prix'],

                  style: GoogleFonts.bellota(

                      fontSize: 14, fontWeight: FontWeight.w800),

                ),

              ],

            ),

          ),

          Container(

            margin: EdgeInsets.symmetric(horizontal: 10),

            child: Row(

              mainAxisAlignment: MainAxisAlignment.spaceBetween,

              children: [

                Text(

                  hotelData['Place'],

                  style: GoogleFonts.nunito(

                    fontSize: 14,

                    color: Colors.grey[500],

                    fontWeight: FontWeight.w400,

                  ),

                ),

                Row(

                  children: [

                    const Icon(

                      Icons.place,

                      color: d_green,

                      size: 14.0,

                    ),

                    Text(hotelData['Distance'].toString() + 'Km ')

                  ],

                ),

                Row(

                  children: [

                    Text('La Nuit'),

                  ],

                ),

              ],

            ),

          ),

          Container(

            margin: EdgeInsets.symmetric(horizontal: 10),

            child: Row(

              children: [

                const Icon(

                  Icons.star_rate,

                  size: 14,

                  color: d_green,

                ),

                const Icon(

                  Icons.star_rate,

                  size: 14,

                  color: d_green,

                ),

                const Icon(

                  Icons.star_rate,

                  size: 14,

                  color: d_green,

                ),

                const Icon(

                  Icons.star_rate,

                  size: 14,

                  color: d_green,

                ),

                const Icon(

                  Icons.star_border,

                  size: 14,

                  color: d_green,

                ),

                const SizedBox(

                  width: 10,

                ),

                Text(hotelData['NombreDeVue'].toString()),

                const Icon(

                  Icons.remove_red_eye_outlined,

                  color: d_green,

                ),

              ],

            ),

          ),

        ],

      ),

    );

  }

}

Bonjour,

Si la page d’après est statique sans fonction complexe vous pouvez faire passer la variable hotelData directement à la page.
Le principe est similaire à celui utilisé dans votre classe HotelCard, sauf qu’il faudra construire la page avec un Scaffold(plus esthétique) et passer la variable via le Navigator.push pour passer à l’autre page.

Vous trouverez un exemple détaillé ici : Send data to a new screen | Flutter