import 'package:flutter/material.dart'; import 'package:stacked/stacked.dart'; import 'event_details_viewmodel.dart'; import 'package:bahla_front/ui/common/ReadMoreText.dart'; import 'package:bahla_front/ui/common/animator_widget.dart'; import 'package:bahla_front/ui/common/post_card_widget.dart'; class EventDetailsView extends StackedView { final int eventId; const EventDetailsView({Key? key, required this.eventId}) : super(key: key); @override Widget builder( BuildContext context, EventDetailsViewModel viewModel, Widget? child, ) { return PopScope( canPop: true, onPopInvokedWithResult: (bool didPop, Object? result) { viewModel.onBackPressed(); }, child: Stack( children: [ DefaultTabController( length: 2, child: Scaffold( backgroundColor: Colors.white, 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); }, ), ], ), ), ], ), ), ], 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}'); }, ); }, ), ), // Tab 2: À propos Container( color: const Color(0xFFEFF0FF), child: Column( children: [ Container( padding: const EdgeInsets.all(16.0), child: ReadMoreText( 'Bienvenue à Disc\'Octonelle 2 ! \n\nRejoignez-nous pour une soirée inoubliable de musique, de danse et de bonne humeur. \n\nQue vous soyez amateur de rock, de pop, de jazz ou d\'électro, il y en aura pour tous les goûts. \nVenez découvrir des artistes locaux et internationaux dans une ambiance conviviale et festive. \nNe manquez pas cette occasion unique de faire la fête et de créer des souvenirs mémorables avec vos amis. Nous avons hâte de vous accueillir à Disc\'Octonelle 2 !', trimLines: 10, collapsedText: '... Voir plus', expandedText: ' Voir moins', textStyle: Theme.of(context).textTheme.bodyMedium?.copyWith( color: Colors.black, height: 1.4, ), ), ), Divider(height: 2, indent: 20, endIndent: 20, color: Theme.of(context).colorScheme.primary), // The ListView inside a Column needs bounded height => wrap with Expanded Expanded( child: ListView.builder( padding: const EdgeInsets.all(16.0), itemCount: 10, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.only(bottom: 12.0), child: AnimatorWidget( authorName: 'Animateur ${index + 1}', authorImageUrl: 'https://placehold.co/400x400/png', ), ); }, ), ), ], ), ), ], ), ), ), ), Positioned( top: 20, left: 20, child: Container( //padding: const EdgeInsets.all(8.0), decoration: BoxDecoration( color: Colors.black.withOpacity(0.6), borderRadius: BorderRadius.circular(20), ), child: IconButton( onPressed: viewModel.onBackPressed, icon: const Icon(Icons.arrow_back, size: 20), ) ), ), ], ), ); } @override EventDetailsViewModel viewModelBuilder( BuildContext context, ) => EventDetailsViewModel(); }