From 6aaf2406b306258ffc5cef49df3dc226fab3e65b Mon Sep 17 00:00:00 2001 From: Van Leemput Dayron Date: Sat, 4 Oct 2025 12:36:28 +0200 Subject: [PATCH] Create UI for trip that the User is into. --- README.md | 14 - lib/components/create_trip_content.dart | 0 lib/components/home/home_content.dart | 387 +++++++++++++++++++++++- lib/pages/login.dart | 1 - 4 files changed, 375 insertions(+), 27 deletions(-) create mode 100644 lib/components/create_trip_content.dart diff --git a/README.md b/README.md index 7c1f34d..2f84304 100644 --- a/README.md +++ b/README.md @@ -57,18 +57,4 @@ Travel Mate est une application mobile conçue pour simplifier l'organisation de - **Google Maps API** - Cartes et navigation - **Google Directions API** - Calcul d'itinéraires -## 🚀 Installation -### Prérequis -- Flutter SDK (version 3.0+) -- Dart SDK -- Android Studio / VS Code -- Compte Google Cloud Platform (pour les APIs) -- Projet Firebase configuré - -### Configuration - -1. **Cloner le repository** -```bash -git clone https://github.com/Dayron-HELHa/travel_mate.git -cd travel_mate diff --git a/lib/components/create_trip_content.dart b/lib/components/create_trip_content.dart new file mode 100644 index 0000000..e69de29 diff --git a/lib/components/home/home_content.dart b/lib/components/home/home_content.dart index 8c05548..ab904eb 100644 --- a/lib/components/home/home_content.dart +++ b/lib/components/home/home_content.dart @@ -1,24 +1,387 @@ import 'package:flutter/material.dart'; +import 'package:provider/provider.dart'; +import '../../providers/user_provider.dart'; class HomeContent extends StatelessWidget { const HomeContent({super.key}); @override Widget build(BuildContext context) { - return Center( - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Icon(Icons.home, size: 80, color: Colors.blue), - SizedBox(height: 20), - Text( - 'Bienvenue sur Travel Mate', - style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold), + return Consumer( + builder: (context, userProvider, child) { + final user = userProvider.currentUser; + + return SingleChildScrollView( + // Ajout du scroll + padding: const EdgeInsets.all(16.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Header de bienvenue + Text( + 'Bonjour ${user?.prenom ?? 'Voyageur'} !', + style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold), + ), + SizedBox(height: 8), + Text( + 'Vos voyages en cours', + style: TextStyle(fontSize: 16, color: Colors.grey[600]), + ), + SizedBox(height: 20), + + // Liste des groupes/voyages + _buildTravelCard( + context, + title: 'Voyage à Paris', + location: 'Paris, France', + dates: '15-20 Juin 2024', + participants: ['Alice', 'Bob', 'Charlie'], + budget: 1200.50, + imageUrl: + 'https://images.unsplash.com/photo-1502602898536-47ad22581b52', + color: Colors.blue, + ), + + _buildTravelCard( + context, + title: 'Road Trip Espagne', + location: 'Madrid, Espagne', + dates: '10-18 Août 2024', + participants: ['Marie', 'Paul', 'Sophie', 'Thomas'], + budget: 850.75, + imageUrl: + 'https://images.unsplash.com/photo-1539037116277-4db20889f2d4', + color: Colors.orange, + ), + + _buildTravelCard( + context, + title: 'Weekend à Amsterdam', + location: 'Amsterdam, Pays-Bas', + dates: '3-5 Septembre 2024', + participants: ['Emma', 'Lucas'], + budget: 450.25, + imageUrl: + 'https://images.unsplash.com/photo-1534351450181-ea9f78427fe8', + color: Colors.green, + ), + + SizedBox(height: 20), + + // Bouton pour créer un nouveau voyage + _buildCreateTravelCard(context), + ], ), - SizedBox(height: 10), - Text('Page d\'accueil'), - ], + ); + }, + ); + } + + Widget _buildTravelCard( + BuildContext context, { + required String title, + required String location, + required String dates, + required List participants, + required double budget, + required String imageUrl, + required Color color, + }) { + return Card( + elevation: 4, + margin: EdgeInsets.only(bottom: 16), + shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), + child: InkWell( + onTap: () { + // Navigation vers les détails du voyage + _showTravelDetails(context, title); + }, + borderRadius: BorderRadius.circular(12), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Image d'en-tête avec titre overlay + Container( + height: 150, + decoration: BoxDecoration( + borderRadius: BorderRadius.vertical(top: Radius.circular(12)), + gradient: LinearGradient( + begin: Alignment.topCenter, + end: Alignment.bottomCenter, + colors: [ + color.withValues(alpha: 0.7), + color.withValues(alpha: 0.9), + ], + ), + ), + child: Stack( + children: [ + // Image placeholder (vous pouvez utiliser Network.image avec imageUrl) + Container( + width: double.infinity, + decoration: BoxDecoration( + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), + ), + color: color.withValues(alpha: 0.3), + ), + ), + + // Titre et localisation + Positioned( + bottom: 16, + left: 16, + right: 16, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + title, + style: TextStyle( + fontSize: 20, + fontWeight: FontWeight.bold, + color: Colors.white, + ), + ), + SizedBox(height: 4), + Row( + children: [ + Icon( + Icons.location_on, + color: Colors.white, + size: 16, + ), + SizedBox(width: 4), + Text( + location, + style: TextStyle( + fontSize: 14, + color: Colors.white, + ), + ), + ], + ), + ], + ), + ), + ], + ), + ), + + // Contenu de la carte + Padding( + padding: EdgeInsets.all(16), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + // Dates + Row( + children: [ + Icon( + Icons.calendar_today, + size: 16, + color: Colors.grey[600], + ), + SizedBox(width: 8), + Text( + dates, + style: TextStyle( + fontSize: 14, + color: Colors.grey[600], + fontWeight: FontWeight.w500, + ), + ), + ], + ), + + SizedBox(height: 12), + + // Participants + Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Icon(Icons.group, size: 16, color: Colors.grey[600]), + SizedBox(width: 8), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + '${participants.length} participant${participants.length > 1 ? 's' : ''}', + style: TextStyle( + fontSize: 14, + color: Colors.grey[600], + fontWeight: FontWeight.w500, + ), + ), + SizedBox(height: 4), + Wrap( + spacing: 4, + children: participants + .take(3) + .map( + (name) => Chip( + label: Text( + name, + style: TextStyle(fontSize: 12), + ), + backgroundColor: color.withValues( + alpha: 0.1, + ), + materialTapTargetSize: + MaterialTapTargetSize.shrinkWrap, + visualDensity: VisualDensity.compact, + ), + ) + .toList(), + ), + if (participants.length > 3) + Text( + '+${participants.length - 3} autres', + style: TextStyle( + fontSize: 12, + color: Colors.grey[500], + fontStyle: FontStyle.italic, + ), + ), + ], + ), + ), + ], + ), + + SizedBox(height: 12), + + // Budget + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + Icon(Icons.euro, size: 16, color: Colors.grey[600]), + SizedBox(width: 8), + Text( + 'Budget: ${budget.toStringAsFixed(2)}€', + style: TextStyle( + fontSize: 14, + color: Colors.grey[600], + fontWeight: FontWeight.w500, + ), + ), + ], + ), + + // Statut + Container( + padding: EdgeInsets.symmetric( + horizontal: 8, + vertical: 4, + ), + decoration: BoxDecoration( + color: Colors.green.withValues(alpha: 0.1), + borderRadius: BorderRadius.circular(12), + ), + child: Text( + 'En cours', + style: TextStyle( + fontSize: 12, + color: Colors.green[700], + fontWeight: FontWeight.w500, + ), + ), + ), + ], + ), + ], + ), + ), + ], + ), ), ); } + + Widget _buildCreateTravelCard(BuildContext context) { + return Card( + elevation: 2, + margin: EdgeInsets.only(bottom: 16), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(12), + side: BorderSide( + color: Colors.grey[300]!, + width: 2, + style: BorderStyle.solid, + ), + ), + child: InkWell( + onTap: () { + _showCreateTravelDialog(context); + }, + borderRadius: BorderRadius.circular(12), + child: Container( + padding: EdgeInsets.all(24), + child: Column( + children: [ + Icon(Icons.add_circle_outline, size: 48, color: Colors.grey[400]), + SizedBox(height: 12), + Text( + 'Créer un nouveau voyage', + style: TextStyle( + fontSize: 16, + fontWeight: FontWeight.w500, + color: Colors.grey[600], + ), + ), + SizedBox(height: 4), + Text( + 'Organisez votre prochaine aventure', + style: TextStyle(fontSize: 14, color: Colors.grey[500]), + ), + ], + ), + ), + ), + ); + } + + void _showTravelDetails(BuildContext context, String title) { + Navigator.push( + context, + MaterialPageRoute( + builder: (context) => Scaffold( + appBar: AppBar(title: Text(title)), + body: Center( + child: Text('Détails du voyage: $title\n(À implémenter)'), + ), + ), + ), + ); + } + + void _showCreateTravelDialog(BuildContext context) { + showDialog( + context: context, + builder: (BuildContext context) { + return AlertDialog( + title: Text('Créer un voyage'), + content: Text( + 'Fonctionnalité à implémenter pour créer un nouveau voyage.', + ), + actions: [ + TextButton( + onPressed: () => Navigator.of(context).pop(), + child: Text('Fermer'), + ), + ElevatedButton( + onPressed: () { + Navigator.of(context).pop(); + // TODO: Naviguer vers le formulaire de création + }, + child: Text('Créer'), + ), + ], + ); + }, + ); + } } diff --git a/lib/pages/login.dart b/lib/pages/login.dart index 741bd49..9af1f68 100644 --- a/lib/pages/login.dart +++ b/lib/pages/login.dart @@ -1,5 +1,4 @@ import 'package:flutter/material.dart'; -import '../models/user.dart'; import '../services/user_service.dart'; import 'package:provider/provider.dart'; import '../providers/user_provider.dart';