From 434dad4ef8613eb97e66b29e89d67b17f6ba5013 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ya=C3=ABl=20Perret?= Date: Tue, 2 Sep 2025 20:38:21 +0200 Subject: [PATCH] feat : Replace tab system --- .../event_details/event_details_view.dart | 459 +++++++++--------- 1 file changed, 230 insertions(+), 229 deletions(-) diff --git a/lib/ui/views/event_details/event_details_view.dart b/lib/ui/views/event_details/event_details_view.dart index ddf57ae..49d8644 100644 --- a/lib/ui/views/event_details/event_details_view.dart +++ b/lib/ui/views/event_details/event_details_view.dart @@ -25,247 +25,248 @@ class EventDetailsView extends StackedView { length: 2, child: Scaffold( backgroundColor: Colors.white, - body: SingleChildScrollView( - child: Column( - children: [ - Container( - width: double.infinity, - height: MediaQuery.of(context).size.width * 9 / 16, - child: const Image( - image: AssetImage('assets/images/Affiche.jpg'), - fit: BoxFit.cover, - alignment: Alignment.center, + body: NestedScrollView( + headerSliverBuilder: (context, innerBoxIsScrolled) => [ + SliverToBoxAdapter( + child: Column( + children: [ + Container( + width: double.infinity, + height: MediaQuery.of(context).size.width * 9 / 16, + child: const Image( + image: AssetImage('assets/images/Affiche.jpg'), + fit: BoxFit.cover, + alignment: Alignment.center, + ), + ), + Container( + color: Colors.white, + padding: const EdgeInsets.only(left: 16.0, right: 16.0, top: 16.0, bottom: 0.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + // Titre de l'événement + Text( + 'Disc\'Octonelle 2', + style: Theme.of(context).textTheme.headlineLarge?.copyWith( + color: Colors.black, + ), + ), + const SizedBox(height: 16), + Center( + child: Container( + width: MediaQuery.of(context).size.width * 0.8, + child: Table( + columnWidths: const { + 0: FixedColumnWidth(80.0), + 1: FlexColumnWidth(), + }, + children: [ + // Date + TableRow( + children: [ + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Align( + alignment: Alignment.centerLeft, + child: Icon( + Icons.calendar_today, + size: 30, + color: Theme.of(context).colorScheme.tertiary, + ), + ), + ), + ), + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Text( + '29.04.2023', + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: Colors.black, + ), + ), + ), + ), + ], + ), + // Lieu + TableRow( + children: [ + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Align( + alignment: Alignment.centerLeft, + child: Icon( + Icons.location_on, + size: 30, + color: Theme.of(context).colorScheme.tertiary, + ), + ), + ), + ), + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + 'Anim-Halle', + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: Colors.black, + fontWeight: FontWeight.w500, + ), + ), + Text( + 'En Bas-les-Barres 6', + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: Colors.grey[800], + ), + ), + Text( + '2316 Les Ponts-de-martel', + style: Theme.of(context).textTheme.bodyMedium?.copyWith( + color: Colors.grey[800], + ), + ), + ], + ), + ), + ), + ], + ), + // Organisation + TableRow( + children: [ + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Align( + alignment: Alignment.centerLeft, + child: Container( + width: 40, + height: 40, + child: Image.asset( + 'images/OCTONELLE.jpg', + fit: BoxFit.cover, + ), + ), + ), + ), + ), + TableCell( + verticalAlignment: TableCellVerticalAlignment.middle, + child: Padding( + padding: const EdgeInsets.symmetric(vertical: 4.0), + child: Text( + 'L\'Octonelle', + style: Theme.of(context).textTheme.bodyLarge?.copyWith( + color: Colors.black, + ), + ), + ), + ), + ], + ), + ], + ), + ), + ), + const SizedBox(height: 16), + // TabBar + TabBar( + tabs: const [ + Tab(text: 'Publications'), + Tab(text: 'À propos'), + ], + labelColor: Theme.of(context).colorScheme.primary, + unselectedLabelColor: Colors.black, + indicatorColor: Theme.of(context).colorScheme.primary, + tabAlignment: TabAlignment.start, + isScrollable: true, + labelStyle: Theme.of(context).textTheme.titleLarge, + dividerColor: Colors.transparent, + onTap: (index) { + viewModel.setSelectedTab(index); + }, + ), + ], + ), + ), + ], ), ), - Container( - color: Colors.white, - padding: const EdgeInsets.all(16.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - // Titre de l'événement - Text( - 'Disc\'Octonelle 2', - style: Theme.of(context).textTheme.headlineLarge?.copyWith( - color: Colors.black + ], + body: TabBarView( + children: [ + // Tab 1: Publications + Container( + color: const Color(0xFFEFF0FF), + child: ListView.builder( + padding: const EdgeInsets.all(16.0), + itemCount: 10, + itemBuilder: (context, index) { + return PostCardWidget( + title: 'Publication ${index + 1}', + content: 'Voici le contenu de la publication ${index + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', + authorName: 'L\'Octonelle', + authorImageUrl: '', + publishDate: DateTime.now().subtract(Duration(days: index)), + imageUrls: index % 3 == 0 ? ['assets/images/Affiche.jpg'] : null, + likesCount: (index + 1) * 5, + commentsCount: (index + 1) * 2, + aspectRatio: 4/5, + onLike: () { + print('Like publication ${index + 1}'); + }, + onComment: () { + print('Comment publication ${index + 1}'); + }, + onShare: () { + print('Share publication ${index + 1}'); + }, + ); + }, ), ), - const SizedBox(height: 16), - - Center( - child: Container( - width: MediaQuery.of(context).size.width * 0.8, - child: Table( - columnWidths: const { - 0: FixedColumnWidth(80.0), // Largeur fixe pour les icônes - 1: FlexColumnWidth(), // Prend l'espace restant - }, - children: [ - // Date - TableRow( - children: [ - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Align( - alignment: Alignment.centerLeft, - child: Icon( - Icons.calendar_today, - size: 30, - color: Theme.of(context).colorScheme.tertiary, - ), - ), - ), + // Tab 2: À propos + Container( + color: const Color(0xFFEFF0FF), + child: ListView( + padding: const EdgeInsets.all(16.0), + children: [ + Text( + 'À propos de L\'Octonelle', + style: Theme.of(context).textTheme.headlineSmall?.copyWith( + color: Colors.black, + fontWeight: FontWeight.bold, ), - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Text( - '29.04.2023', - style: Theme.of(context).textTheme.bodyLarge?.copyWith( - color: Colors.black, - ), - ), - ), - ), - ], - ), - // Lieu - TableRow( - children: [ - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Align( - alignment: Alignment.centerLeft, - child: Icon( - Icons.location_on, - size: 30, - color: Theme.of(context).colorScheme.tertiary, - ), - ), - ), - ), - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'Anim-Halle', - style: Theme.of(context).textTheme.bodyLarge?.copyWith( - color: Colors.black, - fontWeight: FontWeight.w500, - ), - ), - Text( - 'En Bas-les-Barres 6', - style: Theme.of(context).textTheme.bodyMedium?.copyWith( - color: Colors.grey[800], - ), - ), - Text( - '2316 Les Ponts-de-martel', - style: Theme.of(context).textTheme.bodyMedium?.copyWith( - color: Colors.grey[800], - ), - ), - ], - ), - ), - ), - ], - ), - // Organisation - TableRow( - children: [ - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Align( - alignment: Alignment.centerLeft, - child: Container( - width: 40, - height: 40, - child: Image.asset( - 'images/OCTONELLE.jpg', - fit: BoxFit.cover, - ), - ), - ), - ), - ), - TableCell( - verticalAlignment: TableCellVerticalAlignment.middle, - child: Padding( - padding: const EdgeInsets.symmetric(vertical: 4.0), - child: Text( - 'L\'Octonelle', - style: Theme.of(context).textTheme.bodyLarge?.copyWith( - color: Colors.black, - ), - ), - ), - ), - ], - ), - ], - ), + ), + const SizedBox(height: 16), + const Text( + 'Description détaillée de l\'organisation L\'Octonelle et de ses activités...', + style: TextStyle(color: Colors.black87), + ), + ...List.generate(20, (index) => Padding( + padding: const EdgeInsets.symmetric(vertical: 8.0), + child: Text('Ligne de contenu ${index + 1}'), + )), + ], ), ), - - const SizedBox(height: 16), - - // TabBar - TabBar( - tabs: const [ - Tab(text: 'Publications'), - Tab(text: 'À propos'), - ], - labelColor: Theme.of(context).colorScheme.primary, - unselectedLabelColor: Colors.black, - indicatorColor: Theme.of(context).colorScheme.primary, - tabAlignment: TabAlignment.start, - isScrollable: true, - labelStyle: Theme.of(context).textTheme.titleLarge, - dividerColor: Colors.transparent, - onTap: (index) { - viewModel.setSelectedTab(index); - }, - ), - ], ), ), - - // Contenu des onglets basé sur l'index sélectionné - Container( - color: const Color(0xFFEFF0FF), - padding: const EdgeInsets.all(16.0), - child: viewModel.selectedTabIndex == 0 - ? Column( - mainAxisSize: MainAxisSize.min, - children: List.generate(10, (index) { - return PostCardWidget( - title: 'Publication ${index + 1}', - content: 'Voici le contenu de la publication ${index + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', - authorName: 'L\'Octonelle', - authorImageUrl: '', // URL vide pour utiliser l'icône par défaut - publishDate: DateTime.now().subtract(Duration(days: index)), - imageUrls: index % 3 == 0 ? ['assets/images/Affiche.jpg'] : null, - likesCount: (index + 1) * 5, - commentsCount: (index + 1) * 2, - aspectRatio: 4/5, - onLike: () { - // Action lors du clic sur "J'aime" - print('Like publication ${index + 1}'); - }, - onComment: () { - // Action lors du clic sur "Commenter" - print('Comment publication ${index + 1}'); - }, - onShare: () { - // Action lors du clic sur "Partager" - print('Share publication ${index + 1}'); - }, - ); - }), - ) - : Column( - mainAxisSize: MainAxisSize.min, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'À propos de L\'Octonelle', - style: Theme.of(context).textTheme.headlineSmall?.copyWith( - color: Colors.black, - fontWeight: FontWeight.bold, - ), - ), - const SizedBox(height: 16), - const Text( - 'Description détaillée de l\'organisation L\'Octonelle et de ses activités...', - style: TextStyle(color: Colors.black87), - ), - // Contenu supplémentaire pour tester le scroll - ...List.generate(20, (index) => Padding( - padding: const EdgeInsets.symmetric(vertical: 8.0), - child: Text('Ligne de contenu ${index + 1}'), - )), - ], - ), ), - ], - ), - ), ), - ), Positioned( top: 20, left: 20,