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,
),
],
),
),
],
),
);
}
}