Bahla-Team/Bahla-Front
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : EventDetails -> layout and tabs

Browse Source
This commit is contained in:
Yaël Perret
2025-08-07 19:37:02 +02:00
parent 2cb2133208
commit 29b10f81f5
41 changed files with 284 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
lib/app/app.dart
View File

@@ -6,7 +6,6 @@ import 'package:stacked/stacked_annotations.dart';
import 'package:stacked_services/stacked_services.dart';
import 'package:bahla_front/ui/views/main/main_view.dart';
import 'package:bahla_front/ui/views/event_details/event_details_view.dart';
import 'package:bahla_front/ui/views/event_details/event_details_view.dart';
// @stacked-import
@StackedApp(

1
lib/main.dart
View File

@@ -43,6 +43,7 @@ class MainApp extends StatelessWidget {
onSecondaryContainer: Colors.black,
onTertiaryContainer: Colors.black,
surfaceBright: Colors.black,
tertiary: Colors.black,
),
iconTheme: const IconThemeData(
color: Colors.white,

295
lib/ui/views/event_details/event_details_view.dart
View File

@@ -13,122 +13,233 @@ class EventDetailsView extends StackedView<EventDetailsViewModel> {
EventDetailsViewModel viewModel,
Widget? child,
) {
return Scaffold(
backgroundColor: Theme.of(context).colorScheme.background,
body: 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.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
return DefaultTabController(
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,
),
),
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: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.black,
style: Theme.of(context).textTheme.headlineLarge?.copyWith(
color: Colors.black
),
),
const SizedBox(height: 16),
// Date
Row(
children: [
Icon(
Icons.calendar_today,
size: 20,
color: Colors.grey[600],
),
const SizedBox(width: 12),
Text(
'29.04.2023',
style: TextStyle(
fontSize: 16,
color: Colors.black,
),
),
],
),
const SizedBox(height: 12),
// Lieu
Row(
children: [
Icon(
Icons.location_on,
size: 20,
color: Colors.grey[600],
),
const SizedBox(width: 12),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
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: [
Text(
'Anim-Halle',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
color: Colors.black,
// 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,
),
),
),
),
Text(
'En Bas-les-Barres 6',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
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,
),
),
),
),
Text(
'2316 Les Ponts-de-martel',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
],
),
// 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: 12),
// Organisation
Row(
children: [
Container(
width: 20,
height: 20,
child: Icon(
Icons.groups,
size: 20,
color: Colors.grey[600],
),
),
const SizedBox(width: 12),
Text(
'L\'Octonelle',
style: TextStyle(
fontSize: 16,
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);
},
),
],
),
),
],
// 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(50, (index) {
return Card(
margin: const EdgeInsets.only(bottom: 8.0),
child: ListTile(
title: Text('Publication ${index + 1}'),
subtitle: Text('Description de la 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}'),
)),
],
),
),
],
),
),
),
);
}

11
lib/ui/views/event_details/event_details_viewmodel.dart
View File

@@ -1,3 +1,12 @@
import 'package:stacked/stacked.dart';
class EventDetailsViewModel extends BaseViewModel {}
class EventDetailsViewModel extends BaseViewModel {
int _selectedTabIndex = 0;
int get selectedTabIndex => _selectedTabIndex;
void setSelectedTab(int index) {
_selectedTabIndex = index;
notifyListeners();
}
}

2
lib/ui/views/startup/startup_viewmodel.dart
View File

@@ -8,7 +8,7 @@ class StartupViewModel extends BaseViewModel {
// Place anything here that needs to happen before we get into the application
Future runStartupLogic() async {
await Future.delayed(const Duration(seconds: 3));
//await Future.delayed(const Duration(seconds: 3));
// This is where you can make decisions on where your app should navigate when
// you have custom startup logic