'package:flutter/material.

dart';

import 'DetailsScreen.dart';

void main() {

runApp(MyApp());

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Categories',

theme: ThemeData(

primarySwatch: Colors.blue,

),

home: MyHomePage(),

);

class MyHomePage extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(
 'Catégories',

style: TextStyle(

fontSize: 24.0, // Set the font size

fontWeight: FontWeight.bold, // Set the font weight

color: Colors.white, // Set the text color

),

),

backgroundColor: Colors.lightGreen, // Change this line to set the desired color

toolbarHeight: 60.0, // Set a custom height (adjust the value as needed)

centerTitle: true, // Center the title horizontally

),

body: SingleChildScrollView(

child: Column (

children: [

Categories(),

// Add other widgets or content here

],

),

),

);

}
const kTextColor = Color(0xFF535353);

const kTextLightColor = Color(0xFFACACAC);

const kDefaultPaddin = 20.0;

const kHistoricalSites = "Historical Sites";

const kCafeRestaurant = "Café & Restaurant";

const kHotels = "Hotels";

const kMuseums = "Museums";

class Categories extends StatefulWidget {

@override

_CategoriesState createState() => _CategoriesState();

class _CategoriesState extends State<Categories> {

Map<String, List<Map<String, String>>> categoryImages = {

kHistoricalSites: [

{"path": "images/1.jpg", "name": "Memorial du Martyr", "location": "El Madania",

"description": "Le Mémorial du Martyr est un monument aux morts commémorant la guerre
d'Algérie pour l'indépendance. Le monument a été inauguré en 1982 pour le 20e anniversaire de
l'indépendance de l'Algérie."},

{"path": "images/2.jpg", "name": "Jardin d'Essai Hamma", "location": "Belouizdad Alger",

"description": "Le Jardin d'Essai, situé dans le quartier de Hamma est un joyau botanique de plus de
3 000 espèces végétales offrant une véritable bouffée d'oxygène en plein centre d'Alger "},

{"path": "images/3.jpg", "name": "Kasbah", "location": "Casbah Alger",

 "description": "La casbah d'Alger, communément appelée la Casbah correspond à la vieille ville ou
médina d'Alger, capitale de l'Algérie, dont elle forme un quartier historique inscrit au patrimoine mondial
de l'humanité de l'Unesco depuis 1992"},

{"path": "images/4.jpg", "name": "Djamaâ El-Djazaïr", "location": "Mohammadia Alger",

"description": "Djamaâ El-Djazaïr est une grande mosquée située à Alger, en Algérie. La mosquée est
achevée en avril 2019. Elle était, lors de son inauguration la plus grande mosquée d'Afrique et la
troisième plus grande mosquée du monde."},

],

kCafeRestaurant: [

{"path": "images/5.jpg", "name": "La Palmeraie", "location": "Dely Ibrahim Alger",

"description": "La Palmeraie vous accueille dans un décor au charme de l'orient et vous propose de
délicieuses spécialités traditionnelles , à consommer sur place ou à emporter"},

{"path": "images/6.jpg", "name": "Signature", "location": "Hydra Alger",

"description": "Situé à Val d’Hydra, restaurant Signature vous accueille dans un cadre agréable et
vous invite à découvrir les saveurs de sa cuisine variée. Vous pouvez vous y rendre en famille ou entre
amis."},

{"path": "images/7.jpg", "name": "El Mordjane", "location": "rue Hassiba Benbouali, Alger",

"description": "Ce restaurant gastronomique propose des plats très bons avec quelques spécialités
algériennes."},

{"path": "images/8.png", "name": "El Boustene", "location": "Bois des Arcades Riadh El Feth, Alger",

"description": "Restaurant ALBOUSTAN est un établissement privé de droit Algérien, catégorisé et

reconnu comme établissement de qualité à niveau d’exigence élevé, classé par le ministère du tourisme
en 1984 à ce jour en classe 4 étoiles."},

],

kHotels: [

{"path": "images/11.jpg", "name": "Hyatt Regency", "location": "HBIA Dar El Beida, Alger",

"description": "Une oasis de paix animée et contemporaine directement connectée à l’aéroport

d’Alger.Situé dans un emplacement stratégique de la ville merveilleuse d’Alger, Nos chambres sont
équipées de tout le confort pour un séjour mémorable."},

{"path": "images/22.jpg", "name": "Sofitel", "location": "172, rue Hassiba Benbouali, Alger",
 "description": "Luxe et confort vous attendent au Sofitel Algiers Hamma Garden. Situé aux portes du
jardin d'Essai d'Hamma, notre établissement propose 309 chambres et 23 suites climatisées et
spacieuses avec accès gratuit au Wi-Fi. Pour vous détendre, vous disposerez de 3 restaurants proposant
des plats gastronomiques"},

{"path": "images/33.jpg", "name": "Holiday Inn Alger", "location": "02 route de Ouled Fayet, Cheraga
Alger",

"description": "L’hôtel Holiday Inn Algiers-Cheraga Tower est une conjugaison parfaite du prestige
contemporain et du confort, il constitue le lieu idéal pour vos voyages d’affaires, vos réunions
d’entreprise ou encore vos évènements familiaux."},

{"path": "images/44.jpg", "name": "Ibis", "location": " Bab Ezzouar, Alger",

"description": "Situé à 5 min de l'aéroport international Houari Boumediene, l'ibis Alger Aéroport
propose 264 chambres climatisées et insonorisées. Elles sont toutes équipées du wifi, d'un coin bureau,
d'un écran LED et d'une salle de bain."},

],

kMuseums: [

{"path": "images/55.jpg", "name": "Musée National d'Art Moderne Contemporain", "location": "25
Rue Larbi Ben M'hidi, Alger ",

"description": "Le musée public national d'Art moderne et contemporain d’Alger est un musée d'art
moderne et contemporain, inauguré en 2007, situé au cœur de la capitale Alger en Algérie."},

{"path": "images/66.jpg", "name": "Musée National du Bardo", "location": " 03 Rue Franklin
Roosevelt, Alger",

"description": "Le musée national du Bardo est un musée algérien situé au haut de la principale rue
du centre d'Alger, la rue Didouche Mourad dominant l'avenue Ghermoul et l'hôpital Mustapha Pacha. Il
est nommé musée du Bardo avant de prendre son nom actuel en 1985."},

{"path": "images/77.jpg", "name": "Musée National des Arts et Traditions Populaires", "location": "9,
rue Mohamed Akli Malek Alger",

"description": "Le musée national des Arts et Traditions populaires (MNATP) occupe à Alger le palais
dit Dar Khedaoudj el Amia datant du xvie ou du xviiie siècle et situé dans la basse Casbah. Le palais
connaîtra plusieurs propriétaires avant d'être érigé Musée national le 29 septembre 1987."},

{"path": "images/88.jpg", "name": "Musée des Beaux Arts", "location": "Rue Du Dr Laveran, Algiers",

"description": "Le musée national des Beaux-Arts d'Alger, est l’un des plus grands musées d’art
d'Afrique. Ouvert au public depuis le 5 mai 1930, il est situé dans le quartier du Hamma, du côté du
jardin d'essai du Hamma."},
 ],

};

int selectedIndex = 0;

@override

Widget build(BuildContext context) {

String selectedCategory = categoryImages.keys.toList()[selectedIndex];

List<Map<String, String>> images = categoryImages[selectedCategory] ?? [];

return Column(

children: [

Padding(

padding: const EdgeInsets.symmetric(vertical: kDefaultPaddin / 2),

child: SizedBox(

height: 25,

child: ListView.builder(

scrollDirection: Axis.horizontal,

itemCount: categoryImages.keys.length,

itemBuilder: (context, index) =>

buildCategory(index, categoryImages.keys.toList()),

),

),

),

Container(
 height: MediaQuery.of(context).size.height,

child: GridView.builder(

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 2,

crossAxisSpacing: 8.0,

mainAxisSpacing: 8.0,

childAspectRatio: 0.75,

),

itemCount: images.length,

itemBuilder: (context, index) => buildImageCard(index, images),

),

),

],

);

Widget buildCategory(int index, List<String> categoryNames) {

String categoryName = categoryNames[index];

return GestureDetector(

onTap: () {

setState(() {

selectedIndex = index;

});

},
 child: Padding(

padding: const EdgeInsets.symmetric(horizontal: kDefaultPaddin / 2),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: <Widget>[

Text(

categoryName,

style: TextStyle(

fontWeight: FontWeight.bold,

color: selectedIndex == index ? kTextColor : kTextLightColor,

),

),

Container(

margin: EdgeInsets.only(top: kDefaultPaddin / 8),

height: 2,

width: 30,

color: selectedIndex == index ? Colors.black : Colors.transparent,

),

],

),

),

);

Widget buildImageCard(int index, List<Map<String, String>> images) {

String imagePath = images[index]["path"] ?? "";

String imageName = images[index]["name"] ?? "";

String location = images[index]["location"] ?? "";

String description = images[index]["description"] ?? "";

return GestureDetector(

onTap: () {

Navigator.push(

context,

MaterialPageRoute(

builder: (context) => DetailsScreen(

imagePath: imagePath,

placeInfo: PlaceInfo(

name: imageName,

location: location,

description: description,

),

),

),

);

},

child: Card(

clipBehavior: Clip.antiAlias,

shape: RoundedRectangleBorder(

borderRadius: BorderRadius.circular(8.0),
 ),

child: Column(

crossAxisAlignment: CrossAxisAlignment.start,

children: [

Expanded(

child: Image.asset(

imagePath,

fit: BoxFit.cover,

),

),

Padding(

padding: const EdgeInsets.all(8.0),

child: Text(

imageName,

style: TextStyle(

fontWeight: FontWeight.bold,

color: kTextColor,

),

),

),

],

),

),

);

}
}